@kolaylogin/react

React provider, hooks, and conditional components — everything you need to wire client-side auth UI around your app.

<KolayLoginProvider>

Wrap your tree once, near the root. No props are required for the hosted SaaS.

<KolayLoginProvider>
  <App />
</KolayLoginProvider>

baseUrl (default /api/kl) — Path the React client fetches against. The default points at the same-origin proxy from @kolaylogin/nextjs/proxy; only override it if you mounted the proxy elsewhere.
autoRefresh (default true) — Schedule a refresh before the JWT expires.
refreshSkewSeconds (default 15) — How many seconds before exp to refresh.

Hooks

useAuth()

const { isSignedIn, userId, sessionId, orgId, orgRole, getToken } = useAuth();
fetch('/api/private', { headers: { authorization: 'Bearer ' + getToken() } });

useUser()

const { isLoaded, user } = useUser();
if (!isLoaded) return <Spinner />;
return <h1>Hi {user?.firstName ?? user?.email}</h1>;

useSession()

const s = useSession();
if (s.status === 'signed_in') console.log('JWT claims', s.claims);

useOrganization()

const { isLoaded, organization } = useOrganization();
if (isLoaded && organization) return <p>Active org: {organization.name}</p>;

usePlans() / useSubscription() / useCheckout()

const { plans } = usePlans();
const { subscription } = useSubscription();
const { startCheckout, isLoading } = useCheckout();

<button disabled={isLoading} onClick={() => startCheckout(plans[0].id, 'monthly')}>
  Subscribe
</button>

Components

<SignedIn> / <SignedOut>

<SignedIn>You are signed in.</SignedIn>
<SignedOut>Please <a href="/sign-in">sign in</a>.</SignedOut>

<Protect role="admin">

<Protect role="admin" fallback={<p>Admins only.</p>}>
  <AdminPanel />
</Protect>

<RedirectToSignIn /> / <RedirectToSignUp />

<SignedOut><RedirectToSignIn signInUrl="/sign-in" /></SignedOut>

<SignOutButton>

<SignOutButton redirectUrl="/">Sign out</SignOutButton>

← Previous

@kolaylogin/nextjs

@kolaylogin/backend