> ## 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.
# Client API Overview
> Client-side authentication utilities for Auth0 Next.js SDK
The client API provides React hooks, components, and utilities for implementing Auth0 authentication in Next.js client components and pages.
## Installation
```bash theme={null}
npm install @auth0/nextjs-auth0
```
## Available Exports
The client API is available from the main package export:
```typescript theme={null}
import {
useUser,
getAccessToken,
Auth0Provider,
withPageAuthRequired
} from '@auth0/nextjs-auth0';
```
## Core Features
### Hooks
React hook to access the authenticated user's profile and session state
### Helpers
Fetch access tokens for calling external APIs from client components
Higher-order component to protect client-side rendered pages
### Providers
Context provider for optimizing user data fetching with SWR
## Quick Start
### 1. Wrap Your App with Auth0Provider
For optimal performance, wrap your application with `Auth0Provider` in your root layout:
```tsx app/layout.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}
);
}
```
### 2. Access User Data
Use the `useUser` hook in any client component:
```tsx app/profile/page.tsx theme={null}
"use client";
import { useUser } from '@auth0/nextjs-auth0';
export default function Profile() {
const { user, isLoading, error } = useUser();
if (isLoading) return
Loading...
;
if (error) return
Error: {error.message}
;
if (!user) return
Not authenticated
;
return (
Welcome, {user.name}!
);
}
```
### 3. Fetch Access Tokens
Call external APIs with access tokens:
```tsx app/components/data-fetcher.tsx theme={null}
"use client";
import { getAccessToken } from '@auth0/nextjs-auth0';
export default function DataFetcher() {
async function fetchData() {
try {
const token = await getAccessToken();
const response = await fetch('https://api.example.com/data', {
headers: {
Authorization: `Bearer ${token}`
}
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Failed to fetch data:', error);
}
}
return ;
}
```
### 4. Protect Client Pages
Use `withPageAuthRequired` to protect client-side rendered pages:
```tsx app/dashboard/page.tsx theme={null}
"use client";
import { withPageAuthRequired } from '@auth0/nextjs-auth0';
function Dashboard({ user }) {
return (
Dashboard
Welcome, {user.name}!
);
}
export default withPageAuthRequired(Dashboard);
```
## Client vs Server API
The Auth0 Next.js SDK provides both client-side and server-side APIs:
| Feature | Client API | Server API |
| ------------------- | ----------------------------------------------- | ----------------------------------------- |
| **Import Path** | `@auth0/nextjs-auth0` | `@auth0/nextjs-auth0/server` |
| **Use Case** | Client components, browser | Server components, API routes, middleware |
| **User Access** | `useUser()` hook | `getSession()` method |
| **Token Fetching** | `getAccessToken()` (calls `/auth/access-token`) | `getAccessToken()` (direct token access) |
| **Page Protection** | `withPageAuthRequired` (CSR) | `withPageAuthRequired` (SSR) |
## Environment Variables
You can customize the API routes used by client utilities:
```bash .env.local theme={null}
# Default: /auth/profile
NEXT_PUBLIC_PROFILE_ROUTE=/api/auth/profile
# Default: /auth/access-token
NEXT_PUBLIC_ACCESS_TOKEN_ROUTE=/api/auth/access-token
# Default: /auth/login
NEXT_PUBLIC_LOGIN_ROUTE=/api/auth/login
```
## TypeScript Support
All client exports include full TypeScript type definitions:
```typescript theme={null}
import type { User, WithPageAuthRequiredOptions } from '@auth0/nextjs-auth0';
```
## Next Steps
Learn how to access user data in client components
Fetch tokens for calling external APIs
Secure client-side rendered pages
Explore server-side authentication utilities