āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/clerk-provider ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ClerkProvider>'
description: The <ClerkProvider> component provides session and user context to Clerk's hooks and components.
sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-startThe <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.
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
)
}
```
```tsx {{ filename: '_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
```
// 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>, )
</If>
<If sdk="expo">
```tsx {{ filename: 'app/_layout.tsx' }}
import { ClerkProvider } from '@clerk/clerk-expo'
import { Slot } from 'expo-router'
export default function Layout() {
return (
<ClerkProvider>
<Slot />
</ClerkProvider>
)
}
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
</If>
<If sdk="chrome-extension">
```jsx {{ filename: 'src/routes/index.tsx' }}
import {
ClerkProvider,
SignedIn,
SignedOut,
UserButton,
SignInButton,
} from '@clerk/chrome-extension'
const PUBLISHABLE_KEY = process.env.PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY
const EXTENSION_URL = chrome.runtime.getURL('.')
if (!PUBLISHABLE_KEY) {
throw new Error('Please add the PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY to the .env.development file')
}
export default function Index() {
return (
<ClerkProvider
publishableKey={PUBLISHABLE_KEY}
afterSignOutUrl={`${EXTENSION_URL}/popup.html`}
signInFallbackRedirectUrl={`${EXTENSION_URL}/popup.html`}
signUpFallbackRedirectUrl={`${EXTENSION_URL}/popup.html`}
>
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
</ClerkProvider>
)
}
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> ) }
</If>
<Typedoc src="clerk-react/clerk-provider-props" />
## SDK-specific properties
### Next.js
<Properties>
- `dynamic`
- `boolean`
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](/docs/guides/development/rendering-modes).
</Properties>
### Chrome Extension
<Properties>
- `syncHost`
- `string`
To enable, pass the URL of the web application that the extension will sync the authentication state from. See the [dedicated guide](/docs/guides/sessions/sync-host) for more information.
</Properties>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā