Skip to main content
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:
FeatureClient APIServer API
Import Path@auth0/nextjs-auth0@auth0/nextjs-auth0/server
Use CaseClient components, browserServer components, API routes, middleware
User AccessuseUser() hookgetSession() method
Token FetchinggetAccessToken() (calls /auth/access-token)getAccessToken() (direct token access)
Page ProtectionwithPageAuthRequired (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

Build docs developers (and LLMs) love

Get started for freeTalk to us