<ClerkProvider>
The <ClerkProvider>
component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components.
The recommended approach is to wrap your entire app with <ClerkProvider>
at the entry point to make authentication globally accessible. If you only need authentication for specific routes or pieces of your application, render <ClerkProvider>
deeper in the component tree. This allows you to implement Clerk's functionality precisely where required without impacting the rest of your app.
Usage
import React from 'react'
import { ClerkProvider } from '@clerk/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
)
}
import { ClerkProvider } from '@clerk/nextjs'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClerkProvider {...pageProps}>
<Component {...pageProps} />
</ClerkProvider>
)
}
export default MyApp
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ClerkProvider } from '@clerk/clerk-react'
// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!PUBLISHABLE_KEY) {
throw new Error('Add your Clerk Publishable Key to the .env file')
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
<App />
</ClerkProvider>
</React.StrictMode>,
)
import { ClerkProvider } from '@clerk/clerk-expo'
import { Slot } from 'expo-router'
export default function Layout() {
return (
<ClerkProvider>
<Slot />
</ClerkProvider>
)
}
// Other imports
import { ClerkProvider, SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/react-router'
export default function App({ loaderData }: Route.ComponentProps) {
return (
<ClerkProvider
loaderData={loaderData}
signUpFallbackRedirectUrl="/"
signInFallbackRedirectUrl="/"
>
<header className="flex items-center justify-center py-8 px-4">
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<main>
<Outlet />
</main>
</ClerkProvider>
)
}
// Rest of the root.tsx code
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { Meta, Scripts } from '@tanstack/react-start'
import * as React from 'react'
import { ClerkProvider } from '@clerk/tanstack-react-start'
export const Route = createRootRoute({
component: () => {
return (
<RootDocument>
<Outlet />
</RootDocument>
)
},
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html>
<head>
<Meta />
</head>
<body>
{children}
<Scripts />
</body>
</html>
</ClerkProvider>
)
}
- Name
-
afterMultiSessionSingleSignOutUrl?
- Type
null | string
- Description
The full URL or path to navigate to after signing out the current user is complete. This option applies to multi-session applications.
- Name
-
appearance?
- Type
Appearance
- Description
Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
- Name
-
clerkJSVariant?
- Type
"" | "headless"
- 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
-
experimental?
- Type
Autocomplete
<{ commerce: boolean; persistClient: boolean; rethrowOfflineNetworkErrors: boolean; }
,Record
<string
,any
>>- Description
Enable experimental flags to gain access to new features. These flags are not guaranteed to be stable and may change drastically in between patch or minor versions.
- Name
-
initialState?
- Type
Serializable
<{ actor: undefined | { [x: string]: unknown; sub: string; }; factorVerificationAge: [number, number]; organization: undefined | OrganizationResource; orgId: undefined | string; orgPermissions: undefined | string[]; orgRole: undefined | string; orgSlug: undefined | string; session: undefined | SessionResource; sessionClaims: JwtPayload; sessionId: undefined | string; sessionStatus: SessionStatusClaim; user: undefined | UserResource; userId: undefined | string; }
>- Description
Provide an initial state of the Clerk client during server-side rendering. You don't need to set this value yourself unless you're developing an SDK.
- Name
-
localization?
- Type
DeepPartial
<Localization>- Description
Optional object to localize your components. Will only affect Clerk Components and not Account Portal pages.
- Name
-
nonce?
- Type
string
- Description
This nonce value will be passed through to the
@clerk/clerk-js
script tag. Use it to implement a strict-dynamic CSP. Requires thedynamic
prop to also be set.
- Name
-
publishableKey
- Type
string
- Description
The Clerk Publishable Key for your instance. This can be found on the API keys page in the Clerk Dashboard.
- Name
-
sdkMetadata?
- Type
{ environment: string; name: string; version: string; }
- Description
Contains information about the SDK that the host application is using. You don't need to set this value yourself unless you're developing an SDK.
- Name
sdkMetadata.environment?
- Type
string
- Description
Typically this will be the
NODE_ENV
that the SDK is currently running in.
- Name
sdkMetadata.name
- Type
string
- Description
The npm package name of the SDK.
- Name
sdkMetadata.version
- Type
string
- Description
The npm package version of the SDK.
- Name
-
selectInitialSession?
- Type
(client) => null | SignedInSessionResource
- Description
By default, the last signed-in session is used during client initialization. This option allows you to override that behavior, e.g. by selecting a specific session.
- Name
-
signInFallbackRedirectUrl?
- Type
null | string
- Description
The fallback URL to redirect to after the user signs in, if there's no
redirect_url
in the path already. It's recommended to use the environment variable instead. Defaults to'/'
.
- Name
-
signInForceRedirectUrl?
- Type
null | string
- Description
This URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.
- Name
-
signInUrl?
- Type
string
- Description
This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances. It is required to be set for a satellite application in a development instance. It's recommended to use the environment variable instead.
- Name
-
signUpFallbackRedirectUrl?
- Type
null | string
- Description
The fallback URL to redirect to after the user signs up, if there's no
redirect_url
in the path already. It's recommended to use the environment variable instead. Defaults to'/'
.
- Name
-
signUpForceRedirectUrl?
- Type
null | string
- Description
This URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.
- Name
-
signUpUrl?
- Type
string
- Description
This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances but must be set for a satellite application in a development instance. It's recommended to use the environment variable instead.
- Name
-
supportEmail?
- Type
string
- Description
Optional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.
- Name
-
telemetry?
- Type
false | { debug: boolean; disabled: boolean; }
- Description
Controls whether or not Clerk will collect telemetry data. If set to
debug
, telemetry events are only logged to the console and not sent to Clerk.
- Name
-
touchSession?
- Type
boolean
- Description
By default, the Clerk Frontend API
touch
endpoint is called during page focus to keep the last active session alive. This option allows you to disable this behavior.
- Name
-
waitlistUrl?
- Type
string
- Description
The full URL or path to the waitlist page. If
undefined
, will redirect to the Account Portal waitlist page.
- Name
dynamic
- Type
boolean
- Description
Indicates whether or not Clerk should make dynamic auth data available based on the current request. Defaults to
false
. Opts the application into dynamic rendering whentrue
. For more information, see Next.js rendering modes and Clerk.
- Name
syncHost
- Type
string
- Description
To enable, pass the URL of the web application that the extension will sync the authentication state from. See the dedicated guide for more information.
Feedback
Last updated on