3.0.0
Component Reference
API Reference
Learning Center
<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 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
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.Clerk React
1
import { SignedOut, ClerkProvider } from "@clerk/clerk-react";
2
​
3
function Page() {
4
return (
5
<ClerkProvider frontendApi="clerk.[your-domain].com">
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
}
Copied!
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.
Clerk React
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 frontendApi="clerk.[your-domain].com">
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
}
Copied!
Props
This component accepts no props, apart from child components that will conditionally render, only when there's no signed in user.
Name
Description
children
JSX.Element
Pass any component or components and they will be rendered only if no user is signed in.
​
Copy link