Control components

Tiny helpers for conditional rendering and redirects. They don't render any UI of their own — just branch on the session state.

<SignedIn> / <SignedOut>

<SignedIn>
  <UserButton />
</SignedIn>
<SignedOut>
  <a href="/sign-in">Sign in</a>
</SignedOut>

Both render null on the server until the provider hydrates — wrap your whole tree with <KolayLoginProvider> and they Just Work.

<Protect>

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

Reads the active organization role from the session JWT (org_role). If the user is signed out OR the role doesn't match, renders fallback(or null).

<RedirectToSignIn> / <RedirectToSignUp>

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

Fire-and-forget client-side redirect. Preserves the caller URL via a redirect_url query param so you can bounce back after sign-in.

<SignOutButton>

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

Calls POST /v1/auth/sign-out on the instance API and navigates to redirectUrl. Works with any child nodes so you can style it however you want.

Headless alternatives

Prefer your own JSX? Skip these and branch on useAuth().isSignedIndirectly — nothing here is magic.