Autenticação com Cookies HttpOnly – React/Next + NestJS
Sobre o Projeto
- Tipo: Módulo de Autenticação com Cookies HttpOnly
- Stack Principal: Next.js, React, NestJS, PostgreSQL, JWT Cookies
- Autor: Diêgo Ferreira
- Padrão de UI: Atomic Design (Atoms → Molecules → Organisms)
Objetivo
Criar um módulo completo de autenticação com React/Next no Client-Side, consumindo o módulo de autenticação da API que construí em NestJS e utilizando JWT em Cookies HttpOnly para segurança real contra XSS. O foco é demonstrar domínio de componentização (Atomic Design), arquitetura limpa, formulários controlados, integração com backend real e preparo para futuras migrações para SSR/Server Actions.
Ferramentas & Tecnologias
Next.js 15, React 19, TypeScript, NestJS, JWT, Cookies HttpOnly, PostgreSQL, Prisma ORM, Tailwind CSS 4, Atomic Design, Zod/React Hook Form, Axios/Fetch
Arquitetura, Segurança e Componentização
Autenticação com Cookies HttpOnly: o login envia email e senha para a API NestJS, que devolve um JWT dentro de um cookie HttpOnly, Secure e SameSite. O cookie não pode ser acessado via JavaScript, protegendo o usuário contra ataques XSS.
Client-Side Architecture: toda lógica de autenticação acontece em Organisms (fluxo, requisições, estados), deixando a UI limpa nas Molecules e Atoms. Nenhum token é salvo em localStorage ou sessionStorage.
Preparado para SSR/Server Actions: a arquitetura permite migração futura para Server Actions sem reescrever UI, apenas movendo a lógica de autenticação do Organism para a camada de servidor.
Design System baseado em Atomic Design: formulários, inputs, labels, botões e superfícies construídos como Atoms e Molecules reutilizáveis, permitindo rápida evolução do fluxo (login, recovery, reset).
Integração real com API: login, refresh, validações e retorno estruturado seguindo melhores práticas REST, com estados loading/error e fallback UI.
Segurança aprimorada: JWT somente no cookie HttpOnly, prevenção contra XSS, maior compatibilidade com SSR, e base estruturada para implementar rotas protegidas server-side futuramente.