SignedOut

Conditionally render children only when the user is signed out.

SignedOut

Conditionally renders its children only when no user is authenticated. Returns null during loading or if an active sign-in exists.

import { SignedOut } from "@wacht/react-router";

export default function HomePage() {
  return (
    <SignedOut>
      <div>
        <h1>Welcome to our app!</h1>
        <a href="/signin">Sign In</a>
        <a href="/signup">Sign Up</a>
      </div>
    </SignedOut>
  );
}

CTA When Signed Out

import { SignedOut, SignedIn, UserButton } from "@wacht/react-router";

export default function Navbar() {
  return (
    <nav>
      <h1>My App</h1>
      <SignedOut>
        <a href="/signin">Sign In</a>
        <a href="/signup">Sign Up</a>
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </nav>
  );
}

Params

children · ReactNode

Content to render when signed out.

Related

• SignedIn - Render when user is signed in
• useSession - Access session data