Avançado FE

Autenticação — Fluxos e Padrões

JWT vs Session, refresh token rotation, proteção de rotas no Next.js Middleware, e OAuth/SSO.

Definição

JWT (stateless): token assinado com informações do usuário, sem consulta ao banco para validar. Session (stateful): ID de sessão no cookie, dados no banco. OAuth/SSO: delegar autenticação para Google, GitHub, etc. No Next.js, Middleware protege rotas no edge antes de renderizar — sem flash de conteúdo para rotas protegidas.

Problema → Solução

Problema

JWT em localStorage (vulnerável a XSS). Token sem expiração ou sem refresh. Rota protegida verificada só no cliente (usuário vê flash do conteúdo antes do redirect). Sem rotação de refresh token.

Solução

JWT em HttpOnly cookie (protegido de XSS). Access token curto (15min) + refresh token longo (7 dias) com rotação. Proteção de rota no Middleware do Next.js (server-side, sem flash). NextAuth.js abstrai toda essa complexidade.

Dica de entrevista

Tip

Use NextAuth.js / Auth.js para autenticação em Next.js. Implementar JWT + refresh rotation do zero é complexo e sujeito a erros de segurança. NextAuth já suporta 50+ providers OAuth, JWT, sessions e banco.

Código

// middleware.ts — proteção de rota no edge
import { NextResponse } from 'next/server'
import { getToken } from 'next-auth/jwt'

export async function middleware(req) {
  const token = await getToken({ req })
  const isProtected = req.nextUrl.pathname.startsWith('/dashboard')

  if (isProtected && !token) {
    return NextResponse.redirect(new URL('/login', req.url))
  }
  if (req.nextUrl.pathname === '/login' && token) {
    return NextResponse.redirect(new URL('/dashboard', req.url))
  }
  return NextResponse.next()
}

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

// NextAuth.js config básico
export const authOptions = {
  providers: [
    GoogleProvider({ clientId, clientSecret }),
    CredentialsProvider({ /* email + senha */ }),
  ],
  session: { strategy: 'jwt' },
  callbacks: {
    jwt: async ({ token, user }) => {
      if (user) token.role = user.role
      return token
    }
  }
}

Perguntas de entrevista

Q.JWT vs Session: qual usar?▾

A.JWT: stateless, escala sem banco, bom para microservices. Desvantagem: impossível revogar antes da expiração sem blocklist. Session: stateful, revogação imediata, simples para monólitos. Para apps com logout verdadeiro, sessions são mais seguras.

Q.Como proteger rotas no Next.js App Router?▾

A.Middleware.ts na raiz lê o cookie/token e redireciona se não autenticado — roda no edge, antes de qualquer render, sem flash de conteúdo. É a abordagem correta. Verificar no layout.tsx (Server Component) também funciona mas é mais lento.

Q.O que é refresh token rotation?▾

A.A cada uso do refresh token, um novo é emitido e o antigo invalidado. Se um refresh token for roubado e usado, a próxima rotação legítima detecta que o token foi consumido e invalida a sessão — proteção contra token theft.

Termos relacionados

60/122← →