> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/auth0/nextjs-auth0/llms.txt
> Use this file to discover all available pages before exploring further.
# Auth0Provider
> React context provider for Auth0 authentication
`Auth0Provider` is a React component that provides Auth0 authentication context to your application. It wraps your application and enables the use of client-side hooks like `useUser`.
## Usage
### App Router
Wrap your root layout with `Auth0Provider`:
```tsx theme={null}
import { Auth0Provider } from '@auth0/nextjs-auth0';
import { auth0 } from '@/lib/auth0';
export default async function RootLayout({
children
}: {
children: React.ReactNode;
}) {
const session = await auth0.getSession();
return (
{children}
);
}
```
### Pages Router
Wrap your `_app.tsx` with `Auth0Provider`:
```tsx theme={null}
import { Auth0Provider } from '@auth0/nextjs-auth0';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return (
);
}
export default MyApp;
```
Then pass the user in `getServerSideProps`:
```tsx theme={null}
import { auth0 } from '@/lib/auth0';
export async function getServerSideProps(context) {
const session = await auth0.getSession(context.req, context.res);
return {
props: {
user: session?.user || null
}
};
}
```
## Signature
```typescript theme={null}
function Auth0Provider({
user,
children
}: {
user?: User;
children: React.ReactNode;
}): React.ReactElement
```
## Props
The authenticated user object from the server-side session. This provides initial user data to avoid a loading state on first render.
If not provided, `useUser()` will fetch the user client-side on mount.
```tsx theme={null}
{children}
```
Your application's component tree.
```tsx theme={null}
```
## User Type
The `User` type contains standard OIDC profile claims:
```typescript theme={null}
interface User {
sub: string; // User ID (required)
name?: string; // Full name
nickname?: string; // Nickname
given_name?: string; // First name
family_name?: string; // Last name
picture?: string; // Profile picture URL
email?: string; // Email address
email_verified?: boolean; // Email verification status
org_id?: string; // Organization ID (if using Auth0 Organizations)
[key: string]: any; // Additional custom claims
}
```
## How It Works
Under the hood, `Auth0Provider` uses [SWR](https://swr.vercel.app/) to manage user state:
1. If a `user` prop is provided, it's used as the initial data (no loading state)
2. The `useUser()` hook fetches from `/auth/profile` and caches the result
3. All `useUser()` calls across your app share the same cached user data
4. The cache automatically revalidates when the window regains focus or network reconnects
## Configuration
The profile endpoint can be customized using the `NEXT_PUBLIC_PROFILE_ROUTE` environment variable:
```bash theme={null}
NEXT_PUBLIC_PROFILE_ROUTE=/api/custom-profile
```
## Example: Complete Setup
### 1. Create Auth0 Client Instance
```typescript theme={null}
// lib/auth0.ts
import { Auth0Client } from '@auth0/nextjs-auth0/server';
export const auth0 = new Auth0Client({
domain: process.env.AUTH0_DOMAIN!,
clientId: process.env.AUTH0_CLIENT_ID!,
clientSecret: process.env.AUTH0_CLIENT_SECRET!,
secret: process.env.AUTH0_SECRET!,
appBaseUrl: process.env.APP_BASE_URL!
});
```
### 2. Wrap App with Provider (App Router)
```tsx theme={null}
// app/layout.tsx
import { Auth0Provider } from '@auth0/nextjs-auth0';
import { auth0 } from '@/lib/auth0';
export default async function RootLayout({
children
}: {
children: React.ReactNode;
}) {
const session = await auth0.getSession();
return (
{children}
);
}
```
### 3. Use in Components
```tsx theme={null}
// components/UserMenu.tsx
'use client';
import { useUser } from '@auth0/nextjs-auth0';
export function UserMenu() {
const { user, isLoading } = useUser();
if (isLoading) return
);
}
```
## Notes
* The `Auth0Provider` component must be marked with `"use client"` or used in a client component
* Passing the `user` prop from server-side prevents a loading flash on initial render
* The provider automatically handles caching and revalidation of user data
* You only need one `Auth0Provider` at the root of your application