Auth0 Next.js Authentication: A Step-by-Step Setup with the Current SDK, Plans and Common Pitfalls

To add Auth0 authentication to a Next.js app, create an Auth0 application, install @auth0/nextjs-auth0, set the environment variables, create an Auth0Client, add Auth0's middleware (or proxy in Next.js 16) to mount the login routes, then read the session in server components. The current SDK uses App Router patterns and routes such as /auth/login, not the older /api/auth/login.

Key Takeaways

• The SDK's README documents AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_SECRET and an optional APP_BASE_URL.
• Routes are mounted at /auth/login, /auth/logout, /auth/callback, /auth/profile and /auth/access-token.
• In Next.js 15 the README uses middleware.ts. In Next.js 16 it uses proxy.ts, which replaces middleware.
• Auth0's pricing page lists a Free plan with up to 25,000 monthly active users, not the 7,000 quoted in older guides.
• If your code uses handleAuth, UserProvider or /api/auth/*, it follows an older SDK version, so check the migration guides before you copy it.

What is Auth0?

Auth0 is an identity platform that handles sign-up, login, single sign-on, social login, multi-factor authentication and user management so you do not build them yourself. It uses standards such as OAuth 2.0 and OpenID Connect. You send users to Auth0 to sign in, and your app receives a verified session.

What does Auth0 cost?

Source: Auth0 pricing, read in October 2026. The Free plan also lists one custom domain (with card verification), passwordless login, unlimited social connections within system limits, one enterprise connection, five organizations and community support. Prices and limits change, so confirm on the page before you plan.

How do you set up Auth0 for Next.js?

Step 1: Create the Auth0 application

1. Sign up for Auth0 and open the dashboard.
2. Create an application and choose the "Regular Web Application" type.
3. Copy the domain, client ID and client secret.
4. Set the allowed callback URL to http://localhost:3000/auth/callback for local work, and the allowed logout URL to http://localhost:3000. Local development normally uses http, not https. The old version of this post showed https://localhost:3000.
5. Add your production URLs when you deploy.

Step 2: Create a Next.js app and install the SDK

npx create-next-app@latest my-app
cd my-app
npm install @auth0/nextjs-auth0

Step 3: Add environment variables

Create .env.local and never commit it. Generate AUTH0_SECRET with a command such as openssl rand -hex 32.

AUTH0_DOMAIN=your-tenant.us.auth0.com
AUTH0_CLIENT_ID=your_client_id
AUTH0_CLIENT_SECRET=your_client_secret
AUTH0_SECRET=use_a_long_random_value
APP_BASE_URL=http://localhost:3000

Step 4: Create the Auth0 client

// lib/auth0.ts
import { Auth0Client } from "@auth0/nextjs-auth0/server";

export const auth0 = new Auth0Client();

Step 5: Mount the auth routes

For Next.js 15, add middleware that passes requests to the SDK:

// middleware.ts
import type { NextRequest } from "next/server";
import { auth0 } from "./lib/auth0";

export async function middleware(request: NextRequest) {
  return await auth0.middleware(request);
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};

For Next.js 16, the SDK's README uses a proxy.ts file that exports a proxy function in the same way, and says it replaces middleware.ts. Follow the README for your Next.js version.

Step 6: Read the session in a page

// app/page.tsx
import { auth0 } from "@/lib/auth0";

export default async function Home() {
  const session = await auth0.getSession();

  if (!session) {
    return (
      <main>
        <a href="/auth/login?screen_hint=signup">Sign up</a>
        <a href="/auth/login">Log in</a>
      </main>
    );
  }

  return (
    <main>
      <h1>Welcome, {session.user.name}</h1>
      <a href="/auth/logout">Log out</a>
    </main>
  );
}

The code follows the structure of the SDK's README as we read it in October 2026, but we did not run it. Test it in a fresh project and compare with the current README at github.com/auth0/nextjs-auth0.

How do you protect pages and APIs?

• Pages. In a server component, call auth0.getSession() and redirect to /auth/login if there is no session.
• Route handlers. Check the session at the start of each handler and return a 401 response when it is missing.
• Calling APIs. The SDK mounts /auth/access-token and includes methods to get access tokens for APIs you register in Auth0.
• Roles and permissions. Define roles in Auth0, add them to tokens with an Auth0 Action, and check them on the server before you return data. Never rely on hidden buttons alone.

What changed from older SDK versions?

The older column comes from the earlier version of this post and from our knowledge of the previous SDK, not from the current README, which does not describe v3. The README links migration guides, so follow them if you upgrade. The App Router versus Pages Router choice is explained in our guide to Page Router vs App Router in Next.js.

Need help adding secure authentication to your Next.js product? Tell us your stack and requirements, and we will help you scope it. Get your project scoped

What are common pitfalls?

• Wrong callback or logout URL in the Auth0 dashboard, which causes login errors.
• Missing or weak AUTH0_SECRET. Use a long random value and keep it secret.
• Mismatched APP_BASE_URL in production. Set it to your real domain.
• Copying v3 tutorials into a v4 project, or the reverse.
• Using the middleware matcher incorrectly, so auth routes or static files are blocked.
• Checking access only in the UI. Always enforce permissions on the server.
• Committing secrets. Keep .env.local out of git and set variables in your hosting provider.

How do you test and deploy?

1. Test sign-up, login, logout and a protected route locally.
2. Create a separate Auth0 application or tenant for production.
3. Add the production callback and logout URLs.
4. Set all environment variables in your hosting provider.
5. Test the full flow on the deployed site, including failure cases such as denied permissions.
6. Monitor logs and Auth0's dashboard for errors and suspicious activity.

How Appic helps with Next.js and authentication

Appic Softwares has built custom software since 2018, with offices in Jaipur (India), Frisco, Texas (USA) and Munich (Germany), and a 5.0 Clutch rating from 24 verified reviews. We offer Next.js development and web development. Our average rate is about $35 per hour, and projects typically start around $10,000. Appic is a publisher with a commercial interest, so compare quotes.

What changed from the earlier version of this post?

The April 2024 version had a title tag that differed from the H1, used older SDK patterns (handleAuth, UserProvider, /api/auth routes) with no version numbers, used https for localhost, left placeholders in the code, repeated its FAQ, cited the free plan as 7,000 users and had no coverage of production setup, roles or testing. This update follows the current README structure, corrects the callback URLs, updates the free plan limit and adds protection, pitfalls and deployment guidance.

Ready to add secure login to your product? Share your stack and requirements. We will reply with a plan and a cost range. Talk to our team