`<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;

app.tsx
import { SignedOut, ClerkProvider } from "@clerk/clerk-react";
 
function Page() {
  return (
    <ClerkProvider publishableKey="pk_test_••••••••••••••••••••••••••••••••••">
      <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.

app.tsx
import { Routes, Route } from 'react-router-dom';
import {
  ClerkProvider,
  SignedOut,
  RedirectToSignIn
} from "@clerk/clerk-react";
 
function App() {
  return (
    <ClerkProvider publishableKey="pk_test_••••••••••••••••••••••••••••••••••">
      <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>
  );
}

routes/index.tsx
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>
  );
}

Last updated on November 21, 2023