Skip to main content

​
Overview

The <SignedOut /> component conditionally renders its children only when a user is not authenticated. It’s perfect for showing sign-in prompts, marketing content, or public information to unauthenticated visitors.

​
Basic Usage

import { SignedOut } from '@snipextt/wacht'

function App() {
  return (
    <>
      <SignedOut>
        <div>Please sign in to access your account</div>
        <SignInForm />
      </SignedOut>
    </>
  )
}

​
Props

​
children
React.ReactNode
required
The content to render when the user is not signed in.

​
What it includes

  • Conditional Rendering - Only shows children when user is not authenticated
  • Loading Handling - Hides content while authentication is loading
  • Performance Optimized - Minimal re-renders, only updates when auth state changes
  • SEO Friendly - Unauthenticated content can be statically rendered