`<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.

app/layout.tsx
import React from "react";
import { ClerkProvider } from "@clerk/nextjs";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Next.js 13 with Clerk</title>
      </head>
      <ClerkProvider>
        <body>{children}</body>
      </ClerkProvider>
    </html>
  );
}

_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";
import { ClerkProvider } from "@clerk/clerk-react";
import App from "./App";
 
const publishableKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;
 
ReactDOM.render(
  <React.StrictMode>
    <ClerkProvider publishableKey={publishableKey}>
      <App/>
    </ClerkProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Other meta-frameworks, like Remix and Gatsby, have wrappers around <ClerkProvider /> to make their integrations tighter.

Props

Name	Type	Description
`publishableKey`	`string`	Clerk publishable key for your instance. This can be found in your Clerk Dashboard.
`frontendApi`	`string`	The frontend API host for your instance. This can be found in your Clerk Dashboard.
`navigate?`	`(to: string) => Promise<unknown> \| void`	A function which takes the destination path as an argument and performs a "push" navigation.
`clerkJSVariant?`	`string`	If your web application uses only Control components you can set this value to headless and load a minimal ClerkJS bundle for optimal page performance.
`supportEmail?`	`string`	Optional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.
`localization?`	`object`	Optional object to localize your Components. Will only affect Clerk Components and not Account Portal pages.
`appearance?`	`object`	Optional object to customize your Components. Will only affect Clerk Components and not Account Portal pages.
`allowedRedirectOrigins?`	`Array<string \| RegExp>`	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.
`afterSignInUrl`	`string`	Full URL or path to navigate after successful sign in.
`afterSignUpUrl`	`string`	Full URL or path to navigate after successful sign up.