Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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

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

Props

NameTypeDescription
publishableKeystringClerk publishable key for your instance. This can be found in your Clerk Dashboard.
frontendApistringThe frontend API host for your instance. This can be found in your Clerk Dashboard.
navigate?(to: string) => Promise<unknown> | voidA function which takes the destination path as an argument and performs a "push" navigation.
clerkJSVariant?stringIf 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?stringOptional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.
localization?objectOptional object to localize your Components. Will only affect Clerk Components and not Account Portal pages.
appearance?objectOptional 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.
afterSignInUrlstringFull URL or path to navigate after successful sign in.
afterSignUpUrlstringFull URL or path to navigate after successful sign up.

What did you think of this content?

Clerk © 2023