UI Components <SignedIn> <SignedIn>
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.
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 = { ` YOUR_PUBLISHABLE_KEY ` }>
< 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 >
)
}
index.astro ---
import { SignedIn } from '@clerk/astro/components'
---
< SignedIn >
< div >You are signed in</ div >
</ SignedIn >
< div >Always visible</ div >
App.vue < script setup lang = "ts" >
import { SignedIn } from '@clerk/vue'
</ script >
< template >
< SignedIn >
< div >You are signed in</ div >
</ SignedIn >
< div >Always visible</ div >
</ template >
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 >Always visible</ Text >
</ View >
)
}
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'
import { ClerkProvider , SignedIn } from '@clerk/clerk-react'
function App () {
return (
< ClerkProvider publishableKey = { ` YOUR_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 >
)
}
Last updated on Jan 17, 2025