Como migrei a autenticação do meu SaaS de localStorage para HTTP-Only Cookies

"Guardar JWT no localStorage é conveniente, mas perigoso contra ataques XSS. Veja o passo a passo de como resolvi isso de forma limpa usando jose e Middlewares no Next.js."

A autenticação via localStorage é uma das escolhas mais comuns no desenvolvimento frontend inicial. No entanto, ela apresenta uma vulnerabilidade crítica: qualquer script malicioso injetado via XSS (Cross-Site Scripting) possui acesso direto ao objeto localStorage do leitor, permitindo o roubo silencioso de tokens de acesso.

Para resolver essa falha no EstoquePRO, migrei a estratégia para HTTP-Only Cookies. Com essa abordagem, o JavaScript do navegador fica fisicamente impedido de ler o cookie do token, mitigando 100% dos ataques de exfiltração de credenciais via XSS.

Abaixo está a implementação prática do nosso middleware no Next.js App Router para verificação segura do token JWT em cada requisição:

middleware.ts

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

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET || 'secret-chave-segura');

export async function middleware(request: NextRequest) {
  // 1. Extrai o token do cookie HTTP-Only seguro
  const token = request.cookies.get('auth_token')?.value;

  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  try {
    // 2. Valida o token de forma assíncrona com a lib 'jose'
    const { payload } = await jwtVerify(token, JWT_SECRET);
    
    // Injeta o ID do usuário verificado nos headers da requisição
    const requestHeaders = new Headers(request.headers);
    requestHeaders.set('x-user-id', payload.sub as string);

    return NextResponse.next({
      request: {
        headers: requestHeaders,
      },
    });
  } catch (error) {
    // Token inválido ou expirado
    return NextResponse.redirect(new URL('/login?error=expired', request.url));
  }
}

export const config = {
  matcher: ['/dashboard/:path*', '/api/protected/:path*'],
};

Abiner Costa

Desenvolvedor backend focado em arquitetura distribuída, Go, TypeScript e ecossistema Linux. Escrevendo sobre código prático e sistemas.