The <SignedOut> component offers authentication checks as a cross-cutting concern. Any child nodes wrapped by a <SignedOut> component will be rendered only if there's no User signed in to your application.
import { SignedOut, OneAuxiliaProvider } from'@oneauxilia/oneauxilia-react'functionPage() {return ( <OneAuxiliaProviderpublishableKey={`YOUR_PUBLISHABLE_KEY`}> <section> <div>This content is always visible.</div> <SignedOut> <div>This content is visible only to signed out users.</div> </SignedOut> </section> </OneAuxiliaProvider> )}
routes/index.tsx
import { SignedIn, SignedOut, UserButton } from'@oneauxilia/remix'exportdefaultfunctionIndex() {return ( <div> <SignedIn> <h1>Index route</h1> <p>You are signed in!</p> <UserButton /> </SignedIn> <SignedOut> <p> You are signed out </p> </SignedOut> </div> )}
index.astro
---import { SignedOut } from'@oneauxilia/astro/components'---<SignedOut> <div>You are signed out</div></SignedOut><div>Always visible</div>