Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<SignedIn>

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.

Usage

app.tsx
import "@/styles/globals.css"; import { ClerkProvider, RedirectToSignIn, SignedIn, } from "@clerk/nextjs"; import { AppProps } from "next/app"; function MyApp({ Component, pageProps }: AppProps) { return ( <ClerkProvider {...pageProps}> <SignedIn> <div>You are signed in</div> </SignedIn> <div>Always visible</div> </ClerkProvider> ); } export default MyApp;

Usage with React Router

Below is an example of how to use <SignedIn> with React Router. The <SignedIn> component can be used as a child of a <Route /> component to render content only to signed in users.

app.tsx
import { Routes, Route } from 'react-router-dom'; import { ClerkProvider, SignedIn, } from "@clerk/clerk-react"; function App() { return ( <ClerkProvider publishableKey={`{{pub_key}}`}> <Routes> <Route path="/" element={<div>This page is publicly accessible.</div>} /> <Route path="/private" element={ <SignedIn> <div>This content is accessible only to signed in users.</div> </SignedIn> } /> </Routes> </ClerkProvider> ); }

Last updated on February 13, 2024

What did you think of this content?

Clerk © 2024