<SignedOut/> component
<SignedOut /> is the inverse branch. It renders only when the current session does not have an active sign-in, so it is the clean way to keep sign-in prompts and hosted redirects out of the signed-in experience.
Usage
The following example shows a basic usage of <SignedOut />.
import { SignedOut } from '@wacht/nextjs';export default function SignedOutUsage() { return ( <> <SignedOut> <button>Sign in</button> </SignedOut> </> );}Behavior
Use it for login prompts, sign-in links, and redirect-only auth entry points. The component stays out of the way when the user is already signed in.
It is usually paired with <SignedIn /> so a page can switch between the two states without any extra conditional logic.
Branching
The component also depends on
useSession(). It waits for loading to finish, then keeps rendering only while there is no active sign-in in the current session.If the session contains sign-ins and an active sign-in, the branch closes immediately.