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

---

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

The <SignedOut> component offers authentication checks as a cross-cutting concern. Any child nodes wrapped by a <SignedOut> component will be rendered only if there's no User signed in to your application.

Example

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

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

</If>

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

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

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

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

</If>

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

<SignedOut>
  <div>You are signed out.</div>
</SignedOut>
<p>This content is always visible.</p>

</If> <If sdk="expo"> ```tsx {{ filename: 'app/index.tsx' }} import { SignedOut } from '@clerk/clerk-expo' import { Text, View } from 'react-native'

export default function Screen() { return ( <View> <SignedOut> <Text>You are signed out.</Text> </SignedOut> <Text>This content is always visible.</Text> </View> ) }

</If>

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

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

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

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

</If>

<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/index.tsx' }}
import { SignedOut } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

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

function Home() {
  return (
    <div>
      <SignedOut>
        <p>You are signed out.</p>
      </SignedOut>
      <p>This content is always visible.</p>
    </div>
  )
}

</If> <If sdk="vue"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> import { SignedOut } from '@clerk/vue' </script> <template> <SignedOut> <div>You are signed out.</div> </SignedOut> <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> <SignedOut> <div>You are signed out.</div> </SignedOut> <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>

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