<ClerkProvider>
The <ClerkProvider>
component wraps your React application to provide active session and user context to Clerk's hooks and other components.
Usage
The <ClerkProvider>
component must be added to your React entrypoint.
The <ClerkProvider>
component needs to access headers to authenticate correctly. This means anything wrapped by the provider will be opted into dynamic rendering at request time. If you have static-optimized or ISR pages that you would prefer not to be opted into dynamic rendering, make sure they are not wrapped by <ClerkProvider>
.
This is easiest to accomplish by ensuring that <ClerkProvider>
is added further down the tree to wrap route groups that explicitly need authentication instead of having the provider wrap your application root as recommended above. For example, if your project includes a set of landing/marketing pages as well as a dashboard that requires sign in, you would create separate (marketing) and (dashboard) route groups. Adding <ClerkProvider>
to the (dashboard)/layout.jsx
layout file will ensure that only those routes are opted into dynamic rendering, allowing the marketing routes to be statically optimized.
- Name
publishableKey
- Type
string
- Description
The Clerk publishable key for your instance. This can be found in your Clerk Dashboard on the API Keys page.
- Name
routerPush?
- Type
(to: string) => Promise<unknown> | void
- Description
A function which takes the destination path as an argument and performs a "push" navigation.
- Name
routerReplace?
- Type
(to: string) => Promise<unknown> | void
- Description
A function which takes the destination path as an argument and performs a "replace" navigation.
- Name
clerkJSUrl?
- Type
string
- Description
Define the URL that
@clerk/clerk-react
should hot-load@clerk/clerk-js
from.
- Name
clerkJSVariant?
- Type
string
- Description
If your web application only uses Control components, you can set this value to
headless
and load a minimal ClerkJS bundle for optimal page performance.
- Name
clerkJSVersion?
- Type
string
- Description
Define the npm version for
@clerk/clerk-js
.
- Name
supportEmail?
- Type
string
- Description
Optional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.
- Name
appearance?
- Type
Appearance | undefined
- Description
Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
- Name
localization
- Type
Localization | undefined
- Description
Optional object to localize your components. Will only affect Clerk Components and not Account Portal pages.
- Name
allowedRedirectOrigins?
- Type
Array<string | RegExp>
- Description
Optional array of domains used to validate against the query param of an auth redirect. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning passed to the console.
- Name
signInForceRedirectUrl?
- Type
string
- Description
If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.
- Name
signUpForceRedirectUrl?
- Type
string
- Description
If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.
- Name
signInFallbackRedirectUrl?
- Type
string
- Description
The fallback URL to redirect to after the user signs in, if there's no
redirect_url
in the path already. Defaults to/
. It's recommended to use the environment variable instead.
- Name
signUpFallbackRedirectUrl?
- Type
string
- Description
The fallback URL to redirect to after the user signs up, if there's no
redirect_url
in the path already. Defaults to/
. It's recommended to use the environment variable instead.
| isSatellite?
| boolean \| ((url: URL) => boolean)
| This option defines that the application is a satellite application. |
| domain?
| string \| ((url: URL) => boolean)
| This option sets the domain of the satellite application. If your application is a satellite application, this option is required. |
| signInUrl
| string
| This URL will be used for any redirects that might happen and needs to point to your primary application. This option is optional for production instances and required for development instances. It's recommended to use the environment variable instead. |
| telemetry?
| false \| { disabled?: boolean; debug?: boolean } \| undefined
| Controls whether or not Clerk will collect telemetry data. |