Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<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 { ClerkProvider, RedirectToSignIn, SignedOut, } from "@clerk/nextjs"; import { AppProps } from "next/app"; function MyApp({ Component, pageProps }: AppProps) { return ( <ClerkProvider {...pageProps}> <SignedOut> <div>You are signed Out</div> </SignedOut> <div>Always visible</div> </ClerkProvider> ); } export default MyApp;

What did you think of this content?

Clerk © 2023