Control Components
Components that manage authentication behaviors, control content visibility, handle loading states, and manage redirects.
<SignedIn> & <SignedOut>
Conditionally render content based on authentication status.
👋 Welcome, visitor!
This content only shows when not authenticated.
<ClerkLoaded> & <ClerkLoading>
Control content based on Clerk's loading state.
Clerk is loading...
<ClerkDegraded>
Shows content when Clerk is in a degraded state.
This component only renders when Clerk detects degraded performance or connectivity issues.
<ClerkFailed>
Shows content when Clerk fails to load or encounters critical errors.
This component only renders when Clerk completely fails to load or encounters critical errors.
<Protect>
Protect content with role-based or permission-based access control.
🚫 Access denied - Please sign in
Button Components
Unstyled button components for custom authentication flows.
Redirect Components
Components that programmatically redirect users to specific pages.
Current Authentication Status
Authentication State
Available Actions
About Clerk Control Components
Control components manage authentication-related behaviors in your application. They handle content visibility, loading states, and redirects based on user authentication status.
Conditional Rendering
- • <SignedIn> - Show content when authenticated
- • <SignedOut> - Show content when not authenticated
- • <Protect> - Role/permission-based protection
State Management
- • <ClerkLoaded> - Show content when Clerk is ready
- • <ClerkLoading> - Show loading states
- • <ClerkDegraded> - Show content when service is degraded
- • <ClerkFailed> - Show content when service fails
- • Redirect components for navigation control