Skip to main content
Docs

<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.

Properties

  • Name
    treatPendingAsSignedOut?
    Description

Usage with frameworks

app/page.tsx
import React from 'react'
import { ClerkProvider, SignedOut } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut>
              <p>You are signed out.</p>
            </SignedOut>
            <p>This content is always visible.</p>
          </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}
app.tsx
import '@/styles/globals.css'
import { ClerkProvider, RedirectToSignIn, SignedOut } from '@clerk/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedOut>
        <p>You are signed out.</p>
      </SignedOut>
      <p>This content is always visible.</p>
    </ClerkProvider>
  )
}

export default MyApp

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on