Skip to main content

​
<SignedOut />

The <SignedOut /> component is the declarative inverse of the <SignedIn /> component. It acts as a structural boundary that guarantees its React children will only mount if there is currently no active session in the user’s browser (i.e., they are totally anonymous).

​
Import

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

​
Usage

This component is most powerful when paired alongside the <SignedIn /> component to orchestrate smart, conditional layouts on public-facing pages without the boilerplate of manually inspecting internal session hooks. 
import { SignedOut } from "@wacht/react-router";

export function CallToActionSection() {
  return (
    <SignedOut>
      {/* 
        This aggressive promotional hero and sign-up button only shows to 
        logged-out visitors. If an active user visits the marketing page, 
        they logically will not see this upsell. 
      */}
      <div className="bg-zinc-950 text-white rounded-2xl p-12 text-center mt-20 shadow-2xl">
        <h2 className="text-4xl font-extrabold tracking-tight mb-4">Start building today.</h2>
        <p className="text-zinc-400 mb-8 max-w-xl mx-auto text-lg">
          Join thousands of developers building secure, robust applications with Wacht.
        </p>
        <a href="/sign-up" className="bg-white text-zinc-900 px-8 py-4 rounded-lg font-bold shadow-sm hover:bg-zinc-100 transition">
          Create a free account
        </a>
      </div>
    </SignedOut>
  );
}