<SignedOut>

Conditionally render content only when there's no signed in user.

Overview

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.

This is a component that controls the rendering flow. It acts as a guard; any content that you place inside a <SignedOut/> component will not be accessible to authenticated users.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

A common scenario for using the <SignedOut/> component is having an application with a page that should be accessible only by signed in users. With the <SignedOut/> component, you can show some special content to your visitors.

1
import { SignedOut, ClerkProvider } from "@clerk/clerk-react";
2

3
function Page() {
4
  return (
5
     <ClerkProvider publishableKey="clerk-pub-key">
6
      <section>
7
        <div>
8
          This content is always visible by both
9
          signed in users and guests.
10
        </div>
11
        <SignedOut>
12
          <div>
13
            This content is not visible to 
14
            signed in users.
15
          </div>
16
        </SignedOut>
17
      </section>
18
    </ClerkProvider>
19
  );
20
}

Conditional routing

Another common scenario which better resembles a real world use-case, might be to restrict some of your application's pages to signed in users.

For example, a Saas platform website might have a page with information about the company and this page should be publicly accessible. At the same time, there might be a page for signed in users only, where users can edit their preferences.

Let's see how the <SignedOut/> component might help with the above scenario. There's a restricted route and the <SignedOut/> component acts as a conditional inside it, in order to redirect unauthenticated requests to the sign in page.

Notice how we also use the <ClerkProvider/>, <SignedIn/> and <RedirectToSignIn/> components to complete the functionality. The example below uses the popular React Router routing library, but this is just an implementation detail. You can use any routing mechanism to achieve the same result.

1
import { BrowserRouter as Router, Route } from 'react-router-dom';
2
import { 
3
  ClerkProvider,
4
  SignedIn, 
5
  SignedOut, 
6
  RedirectToSignIn 
7
} from "@clerk/clerk-react";
8

9
function App() {
10
  return (
11
    <Router>
12
      <ClerkProvider publishableKey="clerk-pub-key">
13
        <Route path="/public">
14
          <div>This page is publicly accessible.</div>
15
        </Route>
16
        <Route path="/private">
17
          <SignedIn>
18
            <div>
19
              This content is accessible only to signed
20
              in users.
21
            </div>
22
          </SignedIn>
23
          <SignedOut>
24
            {/* 
25
              Route matches, but no user is signed in. 
26
              Redirect to the sign in page.
27
            */}
28
            <RedirectToSignIn />
29
          </SignedOut>
30
        </Route>
31
      </ClerkProvider>
32
    </Router>
33
  );
34
}

Props

This component accepts no props, apart from child components that will conditionally render, only when there's no signed in user.

Name	Type	Description
children	JSX.Element	Pass any component or components and they will be rendered only if no user is signed in.