How to Add JWT Authentication to Next.js App Router (2026)

• Where to store JWTs safely (and what not to do)
• Verifying JWTs in middleware.ts to protect routes at the edge
• Accessing JWT claims inside Server Components
• How Authgear's Next.js SDK can handle all of this for you if you'd rather skip the boilerplate

// ❌ DO NOT do this — localStorage is readable by any JavaScript on your page,
// including malicious third-party scripts injected via XSS.
localStorage.setItem('token', jwt);

// ✅ Instead, set the cookie server-side in a Route Handler or Server Action:
// (see the login handler below)
  

Warning: Storing JWTs in localStorage exposes them to Cross-Site Scripting (XSS) attacks. Any JavaScript running on your page — including a compromised npm package — can read localStorage and steal the token. An httpOnly cookie is invisible to JavaScript entirely, which removes that attack surface.

// app/api/login/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { SignJWT } from 'jose';

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!);

export async function POST(req: NextRequest) {
  const { email, password } = await req.json();

  // Replace this with your real user-lookup + password-check logic
  const user = await verifyCredentials(email, password);
  if (!user) {
    return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 });
  }

  // Mint a JWT that expires in 24 hours
  const token = await new SignJWT({ sub: user.id, email: user.email, role: user.role })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('24h')
    .sign(JWT_SECRET);

  const response = NextResponse.json({ success: true });

  // Set the cookie — httpOnly means JavaScript cannot read it
  response.cookies.set('token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    path: '/',
    maxAge: 60 * 60 * 24, // 24 hours in seconds
  });

  return response;
}

// Stub — replace with your actual DB lookup
async function verifyCredentials(email: string, password: string) {
  // e.g. query your database and compare hashed passwords
  return null;
}
  

Important: Next.js middleware runs in the Edge Runtime, which does not support Node.js's crypto module. The jsonwebtoken package will throw at runtime in middleware. Use jose instead — it is a pure Web Crypto API implementation that works in the Edge Runtime, Service Workers, and browsers.

// middleware.ts (place this in the root of your project, next to package.json)
import { NextRequest, NextResponse } from 'next/server';
import { jwtVerify } from 'jose';

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!);

// Routes that require the user to be logged in
const PROTECTED_PATHS = ['/dashboard', '/settings', '/profile'];

export async function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;

  // Check if the current path needs protection
  const isProtected = PROTECTED_PATHS.some((path) => pathname.startsWith(path));
  if (!isProtected) {
    return NextResponse.next();
  }

  // Read the JWT from the httpOnly cookie
  const token = req.cookies.get('token')?.value;

  if (!token) {
    // No token — redirect to login
    const loginUrl = new URL('/login', req.url);
    loginUrl.searchParams.set('redirect', pathname);
    return NextResponse.redirect(loginUrl);
  }

  try {
    // Verify signature and expiry in one step
    const { payload } = await jwtVerify(token, JWT_SECRET);

    // Forward claims as request headers so Server Components can read them
    const requestHeaders = new Headers(req.headers);
    requestHeaders.set('x-user-id', String(payload.sub));
    requestHeaders.set('x-user-email', String(payload.email ?? ''));
    requestHeaders.set('x-user-role', String(payload.role ?? ''));

    return NextResponse.next({ request: { headers: requestHeaders } });
  } catch (err) {
    // Token is expired or tampered — clear the cookie and redirect
    const response = NextResponse.redirect(new URL('/login', req.url));
    response.cookies.delete('token');
    return response;
  }
}

// Tell Next.js which paths this middleware should run on
export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*', '/profile/:path*'],
};
  

• jwtVerify from jose checks both the signature and the expiration claim (exp) in a single call. If either fails, it throws.
• Forwarding claims as request headers (x-user-id, etc.) lets Server Components and Route Handlers read user info without re-verifying the token on every render.
• The config.matcher array limits where the middleware runs — no overhead on public pages or marketing routes.

// app/dashboard/page.tsx
import { headers } from 'next/headers';

export default async function DashboardPage() {
  const headersList = await headers();
  const userId = headersList.get('x-user-id');
  const userEmail = headersList.get('x-user-email');
  const userRole = headersList.get('x-user-role');

  if (!userId) {
    // Middleware should have caught this, but a defensive check never hurts
    return <p>Not authenticated.</p>;
  }

  return (
    <main>
      <h1>Welcome back!</h1>
      <p>Logged in as {userEmail} (role: {userRole})</p>
    </main>
  );
}
  

// lib/auth.ts — a shared server-only helper
import { cookies } from 'next/headers';
import { jwtVerify, type JWTPayload } from 'jose';

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!);

export interface AuthUser extends JWTPayload {
  sub: string;
  email: string;
  role: string;
}

export async function getCurrentUser(): Promise<AuthUser | null> {
  const cookieStore = await cookies();
  const token = cookieStore.get('token')?.value;
  if (!token) return null;

  try {
    const { payload } = await jwtVerify(token, JWT_SECRET);
    return payload as AuthUser;
  } catch {
    return null;
  }
}
  

// app/profile/page.tsx
import { getCurrentUser } from '@/lib/auth';
import { redirect } from 'next/navigation';

export default async function ProfilePage() {
  const user = await getCurrentUser();
  if (!user) redirect('/login');

  return <p>Hello, {user.email}!</p>;
}