SignedIn, SignedOut

The SignedIn component renders if the user is signed in, while the SignedOut component renders if the user is signed out.

import { SignedIn, SignedOut } from "@clerk/clerk-react";

const SignInStatus = () => (

<div>

<SignedIn>The user is signed in.</SignedIn>

<SignedOut>The user is signed out.</SignedOut>

</div>

);

More precisely, these components reference the session property on the Clerk context to determine whether to render.

• When session is a Session object, the SignedIn component will render.
• When session is null, the SignedOut component will render.
• When session is undefined, neither component will render. This indicates that Clerk is still loading or that session is in the process of changing.