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.