Global authentication context
Wrap the application entry point so authentication state is available to Clerk hooks and components throughout the component tree.
Clerk · Type Alias
ClerkProviderProps
ClerkProviderProps is the props type accepted by ClerkProvider. It configures Clerk's application-wide authentication context, redirects, appearance, navigation, and integration-specific behavior.
How it works
ClerkProviderProps describes the props accepted by ClerkProvider. The provider supplies session and user context to Clerk hooks and components, and its options configure redirects, appearance, routing, navigation, satellite domains, proxying, and other application behavior.
Syntax
type ClerkProviderProps = { ... }Parameters
| Name | Type | Description |
|---|---|---|
props | ClerkProviderProps | Optional provider configuration, including appearance, redirect destinations, allowed origins, routing, navigation, satellite, and proxy settings. |
Returns
A React provider component that supplies Clerk session and user context to descendant hooks and components.
Key points
- ClerkProvider is the integration boundary that connects Clerk to a React application.
- Descendant Clerk hooks and components receive session and user context from the provider.
- Place the provider at the application entry point to make authentication globally available.
- The appearance prop supplies styling configuration for Clerk Components.
- afterSignOutUrl controls the destination after a successful sign-out.
- allowedRedirectOrigins restricts which domains may receive user-provided redirects.
- signInFallbackRedirectUrl is used only when the incoming path lacks redirect_url.
Common mistakes
- Redirect origins must be allowlisted; otherwise Clerk falls back to its default and logs a warning.
- Satellite applications must provide the satellite domain configuration.
- Applications behind a reverse proxy must configure the proxy URL.
Example: Configure ClerkProvider
import { ClerkProvider } from '@clerk/react'
export function App() {
return (
<ClerkProvider
signInFallbackRedirectUrl="/dashboard"
signUpFallbackRedirectUrl="/dashboard"
>
<MainApp />
</ClerkProvider>
)
}Wrap the application at its entry point and configure fallback destinations for sign-in and sign-up.
When to use it
Authentication redirects
Set fallback destinations for sign-in, sign-up, or sign-out when no more specific redirect is present.
Global Clerk appearance
Apply shared styling to Clerk Components from the provider.
Router integration
Configure custom push and replace navigation behavior for an integrated router.
Interview questions
QWhat is ClerkProviderProps used for?
ClerkProviderProps is the props type for ClerkProvider. ClerkProvider should normally wrap the entire application at its entry point so Clerk hooks and components can access session and user context.
Follow-up: Why wrap the whole application instead of only protected routes? A global provider makes authentication context available consistently throughout the application.
QHow do ClerkProvider redirect props behave?
The redirect fallback props are used when a sign-in or sign-up URL does not already contain a redirect_url. Clerk recommends environment variables instead when possible.
Follow-up: What happens when a redirect origin is not allowed? Clerk treats the redirect as unsafe, uses the default redirect, and logs a console warning.
QWhat other categories of behavior can ClerkProviderProps configure?
The provider accepts an appearance object for styling Clerk Components, but that styling does not affect Account Portal pages. It also supports navigation-related configuration such as routerPush and routerReplace.
Follow-up: How did Core 2 change custom navigation? The former navigate prop was replaced by separate routerPush and routerReplace props so push and replace behavior can be customized independently.
Related
ClerkProviderappearanceafterSignOutUrlallowedRedirectOriginsrouterPushrouterReplacesignInFallbackRedirectUrlsignUpFallbackRedirectUrl