`<ClerkProvider>`

Usage
Properties
SDK-specific properties
1. Next.js
2. Chrome Extension

Available in other SDKs

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

Next.js

React

Expo

React Router

Tanstack React Start

App Router

Pages Router

app/layout.tsx

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>
  )
}

_app.tsx

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

index.tsx

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>,
)

app/_layout.tsx

import { ClerkProvider } from '@clerk/clerk-expo'
import { Slot } from 'expo-router'

export default function Layout() {
  return (
    <ClerkProvider>
      <Slot />
    </ClerkProvider>
  )
}

app/root.tsx

// 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

src/routes/__root.tsx

  import * as React from 'react'
  import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-router'
+ 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>
            <HeadContent />
          </head>
          <body>
            {children}
            <Scripts />
          </body>
        </html>
+     </ClerkProvider>
    )
  }

Properties

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
~~afterSignInUrl?~~
Type
null | string
Description
Deprecated. Use fallbackRedirectUrl or forceRedirectUrl instead.
Name
afterSignOutUrl?
Type
null | string
Description
Full URL or path to navigate to after successful sign out.
Name
~~afterSignUpUrl?~~
Type
null | string
Description
Deprecated. Use fallbackRedirectUrl or forceRedirectUrl instead.
Name
allowedRedirectOrigins?
Type
(string | RegExp)[]
Description
An optional array of domains to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console.
Name
allowedRedirectProtocols?
Type
string[]
Description
An optional array of protocols to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console.
Name
appearance?
Type
Appearance
Description
Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
Name
clerkJSUrl?
Type
string
Description
The URL that @clerk/clerk-js should be hot-loaded from.
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
clerkJSVersion?
Type
string
Description
The npm version for @clerk/clerk-js.
Name
domain?
Type
string | (url) => string
Description
Required if your application is a satellite application. Sets the domain of the satellite application.
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
isSatellite?
Type
boolean | (url) => boolean
Description
A boolean that indicates whether the application is a satellite application.
Name
localization?
Type
DeepPartial<Localization>
Description
Optional object to localize your components. Will only affect Clerk Components and not Account Portal pages.
Name
newSubscriptionRedirectUrl?
Type
null | string
Description
The URL to navigate to after the user completes the checkout and clicks the "Continue" button.
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 the dynamic prop to also be set.
Name
proxyUrl?
Type
string | (url) => string | (url) => string
Description
Required for applications that run behind a reverse proxy. The URL that Clerk will proxy requests to. Can be either a relative path (/__clerk) or a full URL (https://<your-domain>/__clerk).
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
~~redirectUrl?~~
Type
null | string
Description
Deprecated. Use fallbackRedirectUrl or forceRedirectUrl instead.
Name
routerPush?
Type
(to, metadata?) => unknown
Description
A function which takes the destination path as an argument and performs a "push" navigation.
Name
routerReplace?
Type
(to, metadata?) => unknown
Description
A function which takes the destination path as an argument and performs a "replace" navigation.
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
standardBrowser?
Type
boolean
Description
By default, ClerkJS is loaded with the assumption that cookies can be set (browser setup). On native platforms this value must be set to false.
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
treatPendingAsSignedOut?
Type
boolean
Description
A boolean that indicates whether pending sessions are considered as signed out or not. Defaults to true.
Name
waitlistUrl?
Type
string
Description
The full URL or path to the waitlist page. If undefined, will redirect to the Account Portal waitlist page.

SDK-specific properties

Next.js

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 when true. For more information, see Next.js rendering modes and Clerk.

Chrome Extension

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.

Edit on GitHub

Last updated on Aug 12, 2025

<ClerkProvider>

Usage

Properties

SDK-specific properties

Next.js

Chrome Extension

Feedback

`<ClerkProvider>`