Una historia de autenticación
Me encanta el diseño de sistemas. Me encanta pensar en las pequeñas decisiones que hacen que el software sea excelente para los usuarios.
Como ingeniero, me importa la seguridad. El software es inútil si no es seguro o si pierde dinero debido a ataques. Quiero construir productos que funcionen siempre.
Recientemente trabajé en la autenticación para una startup de IA. Utilicé Next.js para el frontend. Next.js es ideal para equipos pequeños porque combina el frontend y el backend en una sola base de código.
Durante este proyecto, me enfoqué en cómo almacenar y proteger los tokens de autenticación en el navegador. La solución son las cookies, específicamente las cookies HttpOnly.
¿Por qué usar cookies en lugar de Local Storage?
Local Storage es fácil de usar, pero tiene un riesgo. JavaScript puede leerlo. Esto lo hace vulnerable a ataques de Cross-Site Scripting (XSS). Si un script malicioso se ejecuta en tu sitio, puede robar el token de tu usuario.
Las cookies solucionan esto. Puedes añadir una bandera HttpOnly a una cookie. Esto le dice al navegador: "Envía esta cookie solo a través de solicitudes HTTP. No permitas que JavaScript la toque".
Si un atacante intenta leer la cookie usando JavaScript, no verá nada. La cookie permanece invisible para ellos, pero el navegador la sigue enviando a tu servidor automáticamente.
Para que las cookies sean aún más seguras, utilizo otras dos banderas:
• Secure: Esto asegura que la cookie solo viaje a través de HTTPS. • SameSite=Lax: Esto ayuda a prevenir ataques de Cross-Site Request Forgery (CSRF).
Cómo implementé esto con Next.js:
Quería mantener mi backend (FastAPI) oculto del navegador. Utilicé Next.js como proxy para crear una configuración de servidor a servidor.
- El usuario inicia sesión a través de una Server Action de Next.js.
- La Server Action envía las credenciales a FastAPI.
- FastAPI devuelve un token al servidor de Next.js.
- El servidor de Next.js escribe ese token en una cookie HttpOnly.
- El navegador almacena la cookie pero no puede leerla.
Cuando el usuario necesita datos, el servidor de Next.js lee la cookie y se comunica con el backend por ellos. El token sensible nunca toca el entorno de JavaScript del navegador.
Esta configuración mantiene mi backend aislado y a mis usuarios más seguros.
¿Cómo manejas la autenticación en tus proyectos de Next.js? Me encantaría conocer tu enfoque.