Next.js JWT Authentication Middleware

Implement JWT-based authentication in Next.js using middleware for route protection, cookie-based token storage, and edge-compatible jose library for token.

Typescript Next Auth Jwt Updated: 2026-01-15

Code

snippet

import { jwtVerify } from 'jose';
import { NextResponse } from 'next/server';

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

export async function middleware(request: Request) {
  const token = request.cookies.get('token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  try {
    const { payload } = await jwtVerify(token, secret);
    const response = NextResponse.next();
    response.headers.set('x-user-id', String(payload.sub));
    return response;
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}