Auth0 is the enterprise-grade choice for authentication when you need advanced customisation, compliance certifications, or global scalability beyond what Clerk offers. The Next.js SDK handles session management, route protection, and token handling. This guide covers the complete setup.
Install and Configure
npm install @auth0/nextjs-auth0# .env.local
AUTH0_SECRET='use [openssl rand -hex 32] to generate'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN.auth0.com'
AUTH0_CLIENT_ID='your-client-id'
AUTH0_CLIENT_SECRET='your-client-secret'Add the Auth0 Route Handler
// app/api/auth/[auth0]/route.ts
import { handleAuth } from '@auth0/nextjs-auth0';
export const GET = handleAuth();This single route handles /api/auth/login, /api/auth/logout, /api/auth/callback, and /api/auth/me automatically.
Wrap App with Auth0Provider
// app/layout.tsx
import { UserProvider } from '@auth0/nextjs-auth0/client';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<UserProvider>{children}</UserProvider>
</body>
</html>
);
}Login and Logout Links
// Client component
'use client';
import { useUser } from '@auth0/nextjs-auth0/client';
export function AuthButton() {
const { user, isLoading } = useUser();
if (isLoading) return <span>Loading...</span>;
if (user) {
return (
<div>
<span>{user.name}</span>
<a href="/api/auth/logout">Logout</a>
</div>
);
}
return <a href="/api/auth/login">Login</a>;
}Protect Server Components
// app/dashboard/page.tsx
import { getSession } from '@auth0/nextjs-auth0';
import { redirect } from 'next/navigation';
export default async function Dashboard() {
const session = await getSession();
if (!session) redirect('/api/auth/login');
return <div>Welcome, {session.user.name}</div>;
}Protect API Routes
// app/api/documents/route.ts
import { getSession } from '@auth0/nextjs-auth0';
export async function GET() {
const session = await getSession();
if (!session) {
return Response.json({ error: 'Unauthorized' }, { status: 401 });
}
const docs = await getDocumentsForUser(session.user.sub);
return Response.json(docs);
}Getting the Access Token for Downstream API Calls
// When your Next.js app calls another API on behalf of the user
import { getAccessToken } from '@auth0/nextjs-auth0';
export async function POST(req: Request) {
const { accessToken } = await getAccessToken({
scopes: ['read:documents', 'write:documents'],
});
// Call your own API or a third-party API with the user's token
const response = await fetch('https://api.yourservice.com/data', {
headers: { Authorization: `Bearer ${accessToken}` },
});
return Response.json(await response.json());
}Clerk vs Auth0: When to Choose Auth0
| Factor | Choose Clerk | Choose Auth0 |
|---|---|---|
| Setup speed | Faster (5 min) | Slower (20-30 min) |
| Next.js integration | Purpose-built | Good but more config |
| Enterprise SSO | Yes (SAML) | Yes (SAML + more protocols) |
| Compliance certs | SOC 2 | SOC 2, ISO 27001, HIPAA, PCI DSS |
| Actions / customisation | Limited | Extensive (Actions, Rules, Hooks) |
| Pricing at scale | Scales well | Gets expensive at 50k+ MAU |
| Metadata | Value |
|---|---|
| Title | Auth0 Setup for Next.js: Complete Guide from Installation to Protected API Routes |
| Tool | Auth0 |
| Primary SEO keyword | auth0 next.js setup |
| Secondary keywords | auth0 nextjs-auth0, auth0 app router, auth0 protect routes, auth0 session |
| Estimated read time | 8 minutes |
| Research date | 2026-04-14 |