<SignedOut>

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.

Usage

app.tsx

import '@/styles/globals.css'
import { OneAuxiliaProvider, RedirectToSignIn, SignedOut } from '@oneauxilia/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <OneAuxiliaProvider {...pageProps}>
      <SignedOut>
        <div>You are signed Out</div>
      </SignedOut>
      <div>Always visible</div>
    </OneAuxiliaProvider>
  )
}

export default MyApp

app.tsx

import { SignedOut, OneAuxiliaProvider } from '@oneauxilia/oneauxilia-react'

function Page() {
  return (
    <OneAuxiliaProvider publishableKey={`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'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <p> You are signed out </p>
      </SignedOut>
    </div>
  )
}

Previous<SignedIn>NextUnstyled Components

Last updated 1 year ago