Skip to main content
Docs

<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.

Caution

This component only visually hides its children when the current user is not authenticated. The contents of its children remain accessible via the browser's source code even if the user fails the authentication check. Do not use this component to hide sensitive information that should be completely inaccessible to unauthorized users. For truly sensitive data, perform authorization checks on the server before sending the data to the client.

Properties

  • Name
    treatPendingAsSignedOut?
    Type
    boolean
    Description

    A boolean that indicates whether to treat as signed out. Defaults to true.

Usage

app/page.tsx
import React from 'react'
import { ClerkProvider, SignedIn } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <header>
            <SignedIn>
              <div>You are signed in</div>
            </SignedIn>
            <p>This content is always visible.</p>
          </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}
app.tsx
import '@/styles/globals.css'
import { ClerkProvider, 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>
      <p>This content is always visible.</p>
    </ClerkProvider>
  )
}

export default MyApp
app.tsx
import { SignedIn, ClerkProvider } from '@clerk/clerk-react'

// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env file')
}

function Page() {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <SignedIn>
        <div>This content is visible only to signed in users.</div>
      </SignedIn>
      <p>This content is always visible.</p>
    </ClerkProvider>
  )
}

Usage with React Router

app.tsx
import { Routes, Route } from 'react-router'
import { ClerkProvider, SignedIn } from '@clerk/clerk-react'

// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env file')
}

function App() {
  return (
    <ClerkProvider publishableKey={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>
  )
}
index.astro
---
import { SignedIn } from '@clerk/astro/components'
---

<SignedIn>
  <div>You are signed in</div>
</SignedIn>
<p>This content is always visible.</p>
app/index.tsx
import { SignedIn } from '@clerk/clerk-expo'
import { Text, View } from 'react-native'

export default function Screen() {
  return (
    <View>
      <SignedIn>
        <Text>You are signed in</Text>
      </SignedIn>
      <Text>This content is always visible.</Text>
    </View>
  )
}
routes/index.tsx
import { SignedIn, UserButton } from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <p>You are signed in</p>
      </SignedIn>
      <p>Always visible</p>
    </div>
  )
}
app/routes/index.tsx
import { SignedIn } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return (
    <div>
      <SignedIn>
        <p>You are signed in</p>
      </SignedIn>
      <p>Always visible</p>
    </div>
  )
}
App.vue
<script setup lang="ts">
import { SignedIn } from '@clerk/vue'
</script>

<template>
  <SignedIn>
    <div>You are signed in</div>
  </SignedIn>
  <p>This content is always visible.</p>
</template>

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on