<SignedOut>
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.
Usage
import '@/styles/globals.css'
import { ClerkProvider, RedirectToSignIn, SignedOut } from '@clerk/nextjs'
import { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClerkProvider {...pageProps}>
<SignedOut>
<p>You are signed out.</p>
</SignedOut>
<p>This content is always visible.</p>
</ClerkProvider>
)
}
export default MyApp
import { SignedOut, 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.local file')
}
function Page() {
return (
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<SignedOut>
<p>You are signed out.</p>
</SignedOut>
<p>This content is always visible.</p>
</ClerkProvider>
)
}
import { Routes, Route } from 'react-router'
import { ClerkProvider, SignedOut } from '@clerk/clerk-react'
function App() {
return (
<ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
<Routes>
<Route path="/" element={<p>This page is publicly accessible.</p>} />
<Route
path="/public"
element={
<SignedOut>
<p>You are signed out.</p>
</SignedOut>
}
/>
</Routes>
</ClerkProvider>
)
}
---
import { SignedOut } from '@clerk/astro/components'
---
<SignedOut>
<div>You are signed out</div>
</SignedOut>
<p>This content is always visible.</p>
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>
)
}
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>
)
}
import { SignedOut } from '@clerk/tanstack-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>
)
}
<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>
Feedback
Last updated on