Conditionally render content only when a user is signed in.
<SignedIn/> component offers authentication checks as a cross-cutting concern.
Any children components wrapped by a
<SignedIn/> component will be rendered only if there's a User with an active Session signed in your application. In that sense, the
<SignedIn/> component provides a safe context where the current
User object will be available.
This is a component that controls the rendering flow. It acts as a guard; any content that you place inside a
<SignedIn/> component will be protected from unauthenticated users.
Make sure you've followed the installation guide for Clerk React before running the snippets below.
A common scenario for using the
<SignedIn/> component, is having an application with content that anybody can access and content that can only be accessed by authenticated users. For example, you might have a page that displays general-knowledge content, but provides additional information to members. The page should be publicly accessible, but part of the content should be visible only to signed in users.
You can use the
<SignedIn/> to guard the members-only section of your page.
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
<SignedIn/> component might help with the above scenario. Notice how we also use the <ClerkProvider/>, <SignedOut/> 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 a user is signed in.
Pass any component or components and they will be rendered only if a user is signed in