javascript 48 lines · 8 steps

JWT session cookies in a Next.js Route Handler

A POST signs a JWT into an httpOnly cookie and a GET verifies it to return the current user.

Explained by highlit
Next.js Intermediate authentication jwt cookies route-handlers session-management
1import { cookies } from 'next/headers';
2import { NextResponse } from 'next/server';
3import { SignJWT, jwtVerify } from 'jose';
4 
5const secret = new TextEncoder().encode(process.env.AUTH_SECRET);
6 
7export async function POST(request) {
8 const { email, password } = await request.json();
9 
10 const user = await authenticate(email, password);
11 if (!user) {
12 return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 });
13 }
14 
15 const token = await new SignJWT({ sub: user.id, role: user.role })
16 .setProtectedHeader({ alg: 'HS256' })
17 .setIssuedAt()
18 .setExpirationTime('7d')
19 .sign(secret);
20 
21 const cookieStore = await cookies();
22 cookieStore.set('session', token, {
23 httpOnly: true,
24 secure: process.env.NODE_ENV === 'production',
25 sameSite: 'lax',
26 path: '/',
27 maxAge: 60 * 60 * 24 * 7,
28 });
29 
30 return NextResponse.json({ id: user.id, email: user.email });
31}
32 
33export async function GET() {
34 const cookieStore = await cookies();
35 const token = cookieStore.get('session')?.value;
36 
37 if (!token) {
38 return NextResponse.json({ user: null }, { status: 401 });
39 }
40 
41 try {
42 const { payload } = await jwtVerify(token, secret);
43 return NextResponse.json({ user: { id: payload.sub, role: payload.role } });
44 } catch {
45 cookieStore.delete('session');
46 return NextResponse.json({ user: null }, { status: 401 });
47 }
48}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Storing a signed JWT in an httpOnly cookie keeps the session token out of reach of client-side JavaScript.
  2. 2Encoding the secret once and reusing it for both signing and verifying keeps the symmetric HS256 flow consistent.
  3. 3Verification failures should clear the bad cookie so a corrupt or expired token doesn't linger on the client.

Related explainers

javascript 
async function mapWithConcurrency(items, limit, worker) {
  const results = new Array(items.length);
  let nextIndex = 0;
 

Bounded-concurrency async map in JavaScript

concurrency async-await promises
Intermediate 7 steps
javascript 
const RETRIABLE_STATUS = new Set([408, 429, 500, 502, 503, 504]);
 
function sleep(ms, signal) {
  return new Promise((resolve, reject) => {

Retrying fetch with exponential backoff

retry exponential-backoff abort-signal
Advanced 8 steps
javascript 
const express = require('express');
const Stripe = require('stripe');
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

Verifying Stripe webhooks in Express

webhooks signature-verification raw-body
Intermediate 7 steps
rust 
use axum::{
    extract::FromRef,
    http::StatusCode,
    response::{IntoResponse, Redirect},

Signed cookie sessions in Axum

sessions cookies authentication
Intermediate 8 steps
python 
import time
from dataclasses import dataclass, field
 
from fastapi import Depends, FastAPI, HTTPException, Request, status

Token-bucket rate limiting in FastAPI

rate-limiting token-bucket dependency-injection
Advanced 10 steps
javascript 
'use server'
 
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

How a Next.js Server Action updates a post

server-actions authorization validation
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

JWT session cookies in a Next.js Route Handler — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code