║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '<SignedIn>' description: Conditionally render content only when a user is signed in. sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue

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.

Example

<If sdk="nextjs"> ```tsx {{ filename: 'app/page.tsx' }} import { SignedIn } from '@clerk/nextjs'

export default function Page() { return ( <> <SignedIn> <div>You are signed in.</div> </SignedIn> <p>This content is always visible.</p> </> ) }

</If>

<If sdk="react">
```tsx {{ filename: 'routes/index.tsx' }}
import { SignedIn } from '@clerk/clerk-react'

export default function Page() {
  return (
    <>
      <SignedIn>
        <div>You are signed in.</div>
      </SignedIn>
      <p>This content is always visible.</p>
    </>
  )
}

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/home.tsx' }} import { SignedIn } from '@clerk/react-router'

export default function Home() { return ( <> <SignedIn> <div>You are signed in.</div> </SignedIn> <p>This content is always visible.</p> </> ) }

</If>

<If sdk="astro">
```astro {{ filename: 'index.astro' }}
---
import { SignedIn } from '@clerk/astro/components'
---

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

</If> <If sdk="expo"> ```tsx {{ filename: '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> ) }

</If>

<If sdk="chrome-extension">
```jsx {{ filename: 'src/routes/home.tsx' }}
import { SignedIn } from '@clerk/chrome-extension'

export default function Home() {
  return (
    <>
      <SignedIn>
        <p>You are signed in.</p>
      </SignedIn>
      <p>This content is always visible.</p>
    </>
  )
}

</If> <If sdk="remix"> ```tsx {{ filename: 'app/routes/_index.tsx' }} import { SignedIn } from '@clerk/remix'

export default function Index() { return ( <div> <SignedIn> <p>You are signed in.</p> </SignedIn> <p>This content is always visible.</p> </div> ) }

</If>

<If sdk="tanstack-react-start">
```tsx {{ filename: '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>This content is always visible.</p>
    </div>
  )
}

</If> <If sdk="vue"> ```vue {{ filename: '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> ``` </If> <If sdk="nuxt"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> // Components are automatically imported </script> <template> <SignedIn> <div>You are signed in.</div> </SignedIn> <p>This content is always visible.</p> </template> ``` </If>

Properties

<Properties> - `treatPendingAsSignedOut?` - `boolean`

A boolean that indicates whether to treat pending sessions as signed out. Defaults to true. </Properties>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║