<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
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;import { SignedIn, ClerkProvider } from "@clerk/clerk-react";
function Page() {
return (
<ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
<section>
<div>
This content is always visible.
</div>
<SignedIn>
<div>
This content is visible only to
signed in users.
</div>
</SignedIn>
</section>
</ClerkProvider>
);
}import {
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.
import { Routes, Route } from 'react-router-dom';
import {
ClerkProvider,
SignedIn,
} from "@clerk/clerk-react";
function App() {
return (
<ClerkProvider publishableKey={`YOUR_PUBLISHABLE_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>
);
}