<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.tsximport 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.tsximport { 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.tsximport 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") );
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. |