JJWT Decoder
Fullstack

JWT Authentication in Next.js: Complete Guide

Next.js is a React framework for production that provides server-side rendering, static site generation, and API routes. JWT tokens are commonly used in Next.js apps for authentication via middleware, API routes, and server components. This guide walks you through everything you need to implement robust JWT authentication in Next.js, from choosing the right library to writing production-ready code.

In This Guide

JWT Authentication Code Example

Below is a practical code example showing how to implement JWT authentication in Next.js using jose. This snippet demonstrates the core pattern you will use in most applications:

Next.js — JWT Examplejose
import { jwtVerify } from 'jose';

export async function middleware(request) {
  const token = request.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect('/login');
  
  try {
    const secret = new TextEncoder().encode(process.env.JWT_SECRET);
    const { payload } = await jwtVerify(token, secret);
    request.nextauth = { user: payload };
  } catch {
    return NextResponse.redirect('/login');
  }
}

This example shows the essential JWT workflow in Next.js. In production, make sure to store secrets in environment variables, use HTTPS, and implement proper error handling for token expiration and revocation.

How to Set Up JWT in Next.js

Follow these steps to get JWT authentication working in your Next.js project. Each step builds on the previous one, so we recommend following them in order:

  1. 1

    Install jose: npm install jose

  2. 2

    Create middleware.ts in your project root

  3. 3

    Add JWT verification in the middleware

  4. 4

    Use getServerSession() in server components

  5. 5

    Protect API routes with token validation

Key Features of JWT Auth in Next.js

When you implement JWT authentication in Next.js, you gain access to several powerful capabilities that make your application more secure and scalable:

Middleware-based auth protection
Server component token verification
API route JWT handling
Edge runtime compatible

Why Use JWT Authentication in Next.js?

Next.js is widely used for building modern web applications and APIs, and JWT has become the de facto standard for stateless authentication. By combining Next.js with JWT, you get a scalable authentication system that does not require server-side session storage.

JWT tokens are self-contained, meaning they carry all the information needed to identify a user and their permissions. This makes them ideal for microservice architectures, mobile backends, and single-page applications built with Next.js. Each request includes the token, so your server can verify identity without a database lookup.

The jose library makes it straightforward to implement JWT in Next.js. You can generate tokens on login, verify them on each request, and handle token refresh to keep users authenticated without interruption. Combined with proper security practices — such as short expiration times, refresh token rotation, and secure storage — JWT provides a robust foundation for any authentication system.

Best Practices for JWT in Next.js

When implementing JWT authentication in Next.js, follow these best practices to keep your application secure:

  • Use strong secrets: Always use a long, random secret key for signing tokens. Store it in environment variables, never in source code.
  • Set short expiration times: Access tokens should expire quickly (15–30 minutes). Use refresh tokens for longer sessions.
  • Validate on every request: Always verify the token signature and check expiration before granting access to protected resources.
  • Use HTTPS: JWT tokens sent over plain HTTP can be intercepted. Always use HTTPS in production to protect tokens in transit.
  • Handle token refresh: Implement a refresh token flow so users are not logged out when their access token expires. Rotate refresh tokens to prevent replay attacks.
  • Do not store sensitive data in tokens: JWT payloads are Base64-encoded, not encrypted. Avoid putting passwords or other sensitive information in claims.

Decode & Inspect JWT Tokens Instantly

Use our free online JWT Decoder to inspect any token — view the header, payload, claims, and expiration status right in your browser. No sign-up required.

Try JWT Decoder Pro →