Authenticated application UI
Show a dashboard, profile, or other application area only after authentication.
Clerk · Component
SignedIn
SignedIn conditionally renders its children for users who are signed in. Use it beneath ClerkProvider to show authenticated-only UI.
How it works
SignedIn is a conditional wrapper. It renders its child content when Clerk determines that the user is signed in, and renders nothing for signed-out users. Place it inside ClerkProvider so Clerk can supply authentication state.
Syntax
<SignedIn>...</SignedIn>Parameters
| Name | Type | Description |
|---|---|---|
children | ReactNode | React child elements rendered only when the user is signed in. |
Returns
React element containing the children for signed-in users; otherwise no rendered child content.
Key points
- Wrap any UI that should appear only for authenticated users in SignedIn.
- Its children become available to signed-in users and are omitted for signed-out users.
- Use SignedIn to control access to authenticated UI, while keeping actual data protection on the server.
Example: Render signed-in content
import { ClerkProvider, SignedIn } from '@clerk/clerk-react'
export default function App() {
return (
<ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
<SignedIn>
<main>Dashboard</main>
</SignedIn>
</ClerkProvider>
)
}Renders the dashboard only when the current user is signed in.
When to use it
User account controls
Display account controls such as sign-out actions to authenticated users.
Authentication-state switching
Pair authenticated content with SignedOut content to provide different UI for each state.
Interview questions
QWhat does the SignedIn component do?
SignedIn is a conditional wrapper that renders its children only when Clerk reports that the user is signed in. When the user is signed out, those children are not rendered.
Follow-up: How would you render the alternative state? Use SignedOut alongside SignedIn, with each wrapper containing the content for its corresponding authentication state.
QWhere should SignedIn be used?
It must be rendered under ClerkProvider, which supplies authentication state to Clerk components. This lets SignedIn determine whether its child tree should be rendered.
Follow-up: What should protect sensitive data? Enforce authorization on the server or API, because hiding or omitting UI does not secure data access.
QWhen would you choose SignedIn?
SignedIn is useful for showing authenticated-only interface elements such as a dashboard or account controls. It changes the rendered UI according to the current sign-in status.
Follow-up: How can the same UI support both states? Render signed-in content inside SignedIn and signed-out content inside SignedOut, or use an authentication-state hook when more control is needed.
Related
ClerkProviderSignedOutSignInButtonSignOutButtonuseUser