<SignedIn/> component
<SignedIn /> is the small client-side branch for authenticated UI. It waits for the session to settle and renders its children only when the current session includes an active sign-in.
Usage
The following example shows a basic usage of <SignedIn />.
import { SignedIn, UserButton } from '@wacht/nextjs';export default function SignedInUsage() { return ( <> <SignedIn> <UserButton /> </SignedIn> </> );}Behavior
Wrap the bits of UI that should only exist once the user is signed in. The component does not add its own layout or fallback; it simply gates its children.
That makes it a good fit for header actions, account shortcuts, and small signed-in branches that would be noisy to manage manually.
Branching
The component reads
useSession() under the hood. While the session is still loading it returns nothing, then it checks whether the session has sign-ins and an active sign-in before rendering children.If the session is empty or the active sign-in is missing, the branch stays closed.