Skip to main content

​
<SignedIn />

The <SignedIn /> component offers a clean, declarative abstraction over session state. It acts strictly as a structural render boundary: it completely prevents its React children from mounting into the DOM unless the current user has a valid, active session.

​
Import

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

​
Usage

You should utilize <SignedIn /> in global layouts, headers, or marketing pages where specific UI elements—like the <UserButton />, a “Go to Dashboard” link, or premium features—should only be visible to logged-in users. Using this component is vastly cleaner and more readable than writing verbose ternary operators by manually inspecting the useSession hook. 
import { SignedIn, SignedOut, UserButton } from "@wacht/react-router";
import { Link } from "react-router";

export function TopNav() {
  return (
    <nav className="flex justify-between items-center p-4 border-b border-zinc-200">
      <div className="font-bold tracking-tight text-xl">Acme</div>
      
      <div className="flex gap-4 items-center">
        {/* 
          These elements ONLY mount if the user is authenticated.
        */}
        <SignedIn>
          <Link to="/dashboard" className="text-sm font-medium hover:underline text-zinc-700">
            Dashboard
          </Link>
          <UserButton />
        </SignedIn>
        
        {/* 
          These elements ONLY mount if the user is anonymous.
        */}
        <SignedOut>
          <Link to="/sign-in" className="px-4 py-2 border rounded-md hover:bg-zinc-50 font-medium">
            Log in
          </Link>
          <Link to="/sign-up" className="px-4 py-2 bg-zinc-900 text-white rounded-md hover:bg-zinc-800 font-medium tracking-wide">
            Get Started
          </Link>
        </SignedOut>
      </div>
    </nav>
  );
}

​
Security Note

The <SignedIn /> component is specifically designed for UI manipulation and visual decluttering. It is not a security gateway. To secure sensitive dashboard routes, you must still configure route protection at the router boundary (e.g. loaders) or implement explicit server-side authorization checks using Wacht’s backend SDK. Never rely solely on client-side rendering boundaries to protect sensitive data.