Skip to main content
Docs

<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

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
app/routes/__root.tsx
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>
  )
}

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.

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on