Clerk Context Provider
import { ClerkProvider } from '@auth/clerk'- ClerkProvider.tsx
Universal Implementation of Clerk’s Provider. Specifically designed for unifying the Provider from @clerk/nextjs and @clerk/clerk-expo into a simple universal import that works seamlessly across both Next.js and React Native environments.
It’s required to power the many hooks and components from @auth/clerk or it’s underlying packages.
Usage in Expo
Wrap your app with the ClerkProvider at the root level, before any other context providers.
import { ClerkProvider } from '@auth/clerk'
export default function ExpoRootLayout({ children }: { children: React.ReactNode }) {
// ...
return (
<ClerkProvider>
<UniversalAppProviders>
{children}
</UniversalAppProviders>
</ClerkProvider>
)
}Token Storage
On iOS and Android, we leverage expo-secure-store to securely store Clerk’s session tokens. This ensures that user sessions remain persistent and secure across app restarts.
Usage in Next.js
In Next.js, we suggest wrapping your app with ClerkProvider in the ServerRootLayout component. This ensures that the provider is set up correctly for both server-side and client-side rendering.
import { ClerkProvider } from '@auth/clerk'
import Document from './Document'
import NextClientRootLayout from './NextClientRootLayout'
export default function NextServerRootLayout({ children }: { children: React.ReactNode }) {
// ...
return (
<Document>
<ClerkProvider
afterSignOutUrl="/api/auth/sign-out?redirectUrl=/"
appearance= {{ ... }}
>
<NextClientRootLayout>
{children}
</NextClientRootLayout>
</ClerkProvider>
</Document>
)
}