`<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;

app.tsx
import { SignedIn, ClerkProvider } from "@clerk/clerk-react";
 
function Page() {
  return (
    <ClerkProvider publishableKey="pk_test_••••••••••••••••••••••••••••••••••">
      <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.tsx
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.

app.tsx
import { Routes, Route } from 'react-router-dom';
import {
  ClerkProvider,
  SignedIn,
} from "@clerk/clerk-react";
 
function App() {
  return (
      <ClerkProvider publishableKey="pk_test_••••••••••••••••••••••••••••••••••">
        <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>
  );
}