<SignedIn>

Conditionally render content only when a user is signed in.

Overview

The <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.

Usage

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.

1
import { SignedIn, 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.
9
        </div>
10
        <SignedIn>
11
          <div>
12
            This content is visible only to 
13
            signed in users.
14
          </div>
15
        </SignedIn>
16
      </section>
17
    </ClerkProvider>
18
  );
19
}

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 <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.

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 a user is signed in.

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