Conditionally render content only when there's no signed in user.
<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.
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.
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.
This component accepts no props, apart from child components that will conditionally render, only when there's no signed in user.
Pass any component or components and they will be rendered only if no user is signed in.