Client API Overview

The client API provides React hooks, components, and utilities for implementing Auth0 authentication in Next.js client components and pages.

Installation

npm install @auth0/nextjs-auth0

Available Exports

The client API is available from the main package export:

import {
  useUser,
  getAccessToken,
  Auth0Provider,
  withPageAuthRequired
} from '@auth0/nextjs-auth0';

Core Features

Hooks

useUser

React hook to access the authenticated user’s profile and session state

Helpers

getAccessToken

Fetch access tokens for calling external APIs from client components

withPageAuthRequired

Higher-order component to protect client-side rendered pages

Providers

Auth0Provider

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:

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 (
    <html lang="en">
      <body>
        <Auth0Provider user={session?.user}>
          {children}
        </Auth0Provider>
      </body>
    </html>
  );
}

2. Access User Data

Use the useUser hook in any client component:

app/profile/page.tsx

"use client";

import { useUser } from '@auth0/nextjs-auth0';

export default function Profile() {
  const { user, isLoading, error } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>Not authenticated</div>;

  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <img src={user.picture} alt={user.name} />
    </div>
  );
}

3. Fetch Access Tokens

Call external APIs with access tokens:

app/components/data-fetcher.tsx

"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 <button onClick={fetchData}>Fetch Data</button>;
}

4. Protect Client Pages

Use withPageAuthRequired to protect client-side rendered pages:

app/dashboard/page.tsx

"use client";

import { withPageAuthRequired } from '@auth0/nextjs-auth0';

function Dashboard({ user }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome, {user.name}!</p>
    </div>
  );
}

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:

.env.local

# 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:

import type { User, WithPageAuthRequiredOptions } from '@auth0/nextjs-auth0';

Next Steps

useUser Hook

Learn how to access user data in client components

Get Access Tokens

Fetch tokens for calling external APIs

Protect Pages

Secure client-side rendered pages

Server API

Explore server-side authentication utilities

Get Started

Core Concepts

Client API

Server API

Guides

Advanced Features

Migration

Resources

Installation

Available Exports

Core Features

Hooks

useUser

Helpers

getAccessToken

withPageAuthRequired

Providers

Auth0Provider

Quick Start

1. Wrap Your App with Auth0Provider

2. Access User Data

3. Fetch Access Tokens

4. Protect Client Pages

Client vs Server API

Environment Variables

TypeScript Support

Next Steps

useUser Hook

Get Access Tokens

Protect Pages

Server API

​Installation

​Available Exports

​Core Features

​Hooks

useUser

​Helpers

getAccessToken

withPageAuthRequired

​Providers

Auth0Provider

​Quick Start

​1. Wrap Your App with Auth0Provider

​2. Access User Data

​3. Fetch Access Tokens

​4. Protect Client Pages

​Client vs Server API

​Environment Variables

​TypeScript Support

​Next Steps

useUser Hook

Get Access Tokens

Protect Pages

Server API

Installation

Available Exports

Core Features

Hooks

Helpers

Providers

Quick Start

1. Wrap Your App with Auth0Provider

2. Access User Data

3. Fetch Access Tokens

4. Protect Client Pages

Client vs Server API

Environment Variables

TypeScript Support

Next Steps