Auth UI
Embed sign-in, sign-up, verification, and invite flows inside a Next.js app.
<SignInForm/>
<SignInForm /> is the shared embedded sign-in surface. It sits on top of SignInProvider, useSignIn(), useSession(), deployment auth settings, and the shared navigation helpers, so the form can move between identifier entry, password entry, other auth strategies, verification, passkeys, profile completion, multi-session selection, and redirect handling without extra wiring from the app.
import { DefaultStylesProvider, SignInForm } from '@wacht/nextjs';export default function SignInFormUsage() { return ( <> <DefaultStylesProvider> <SignInForm /> </DefaultStylesProvider> </> );}<SignUpForm/>
<SignUpForm /> is the embedded sign-up surface. It reads deployment auth settings, invitation state, and the current session before it decides which fields, strategies, and redirects are available.
import { DefaultStylesProvider, SignUpForm } from '@wacht/nextjs';export default function SignUpFormUsage() { return ( <> <DefaultStylesProvider> <SignUpForm /> </DefaultStylesProvider> </> );}<WaitlistForm/>
<WaitlistForm /> is the embedded waitlist surface. It reads deployment auth settings, collects the enabled fields, and submits the result to the waitlist API.
import { WaitlistForm } from '@wacht/nextjs';export default function WaitlistFormUsage() { return ( <> <WaitlistForm /> </> );}<SSOCallback/>
<SSOCallback /> handles the return path after an SSO or enterprise auth redirect. It reads the callback state, completes the exchange, and decides whether to continue the sign-in attempt or move on to the final redirect.
import { SSOCallback } from '@wacht/nextjs';export default function SSOCallbackUsage() { return ( <> <SSOCallback /> </> );}<MagicLinkVerification/>
<MagicLinkVerification /> resolves the email-link callback step. It reads the callback parameters, verifies the link with the backend, and then moves the user on to the final redirect or back into sign-in when the link is no longer valid.
import { MagicLinkVerification } from '@wacht/nextjs';export default function MagicLinkVerificationUsage() { return ( <> <MagicLinkVerification /> </> );}<AcceptInvite/>
<AcceptInvite /> is the embedded invite-acceptance surface. It reads the token, resolves the invitation, and either finishes the membership flow or hands off to sign-in or sign-up when the invite still needs an authenticated user.
import { AcceptInvite } from '@wacht/nextjs';export default function AcceptInviteUsage() { return ( <> <AcceptInvite token={token} /> </> );}<SignedInAccounts/>
<SignedInAccounts /> surfaces the signed-in accounts attached to the current session. It matters when the product supports multi-account sessions and account switching.
import { SignedInAccounts } from '@wacht/nextjs';export default function SignedInAccountsUsage() { return ( <> <SignedInAccounts /> </> );}