<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.tsximport "@/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;
app.tsximport { SignedIn, ClerkProvider } from "@clerk/clerk-react"; function Page() { return ( <ClerkProvider publishableKey={`{{pub_key}}`}> <section> <div> This content is always visible. </div> <SignedIn> <div> This content is visible only to signed in users. </div> </SignedIn> </section> </ClerkProvider> ); }
routes/index.tsximport { SignedIn, UserButton, } from "@clerk/remix"; export default function Index() { return ( <div> <SignedIn> <h1>Index route</h1> <p>You are signed in!</p> <UserButton /> </SignedIn> </div> ); }
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.tsximport { 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