<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
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;import { SignedOut, ClerkProvider } from "@clerk/clerk-react";
function Page() {
return (
<ClerkProvider 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>
</ClerkProvider>
);
}Usage with React Router
Below is an example of how to use <SignedOut> with React Router. The <SignedOut> component can be used as a child of a <Route /> component to render content only to signed in users.
import { Routes, Route } from 'react-router-dom';
import {
ClerkProvider,
SignedOut,
RedirectToSignIn
} from "@clerk/clerk-react";
function App() {
return (
<ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
<Routes>
<Route
path="/"
element={<div>This page is publicly accessible.</div>}
/>
<Route
path="/public"
element={
<SignedOut>
<div>This content is accessible only to users that are signed out.</div>
</SignedOut>
}
/>
</Routes>
</ClerkProvider>
);
}import {
SignedIn,
SignedOut,
UserButton,
} from "@clerk/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>
);
}