Pantallas de Autenticación y Middleware de Sesiones
Investigación
Práctica
Login, registro y rutas protegidas con middleware de Next.js.
Entregables
- Pantallas de auth y middleware
Dónde vive en el producto
Arquitectura de Autenticación & Control de Acceso
Implementación integral de pantallas de acceso seguro y middleware de sesiones en Next.js. El middleware intercepta cada solicitud en la capa Edge antes de renderizar la página, protegiendo las rutas privadas mediante cookies HttpOnly.
Consola de Prueba del Middleware en Vivo
Si das clic en /dashboard sin estar autenticado, el middleware te interceptará y te enviará automáticamente a /login?reason=unauthorized.
Diagrama de Intercepción del Middleware (`src/middleware.ts`)
El navegador solicita una ruta (ej. /dashboard o /perfil).
El middleware lee request.cookies.get('dopamink_session') y verifica expiración sin tocar la base de datos central.
• Si no hay sesión válida: NextResponse.redirect('/login?redirect=...').
• Si ya está autenticado y visita /login: redirige a /dashboard.
El middleware adjunta cabeceras como X-Frame-Options: DENY, X-Content-Type-Options: nosniff y X-ComMarket-Session-Status.
Ficha Técnica de Diseño (Figma Design Tokens & Componentes)
Datos para armar o justificar las pantallas de Figma solicitadas en el Taller 3#C2410C#B45309#FAF8F5#1C1917Como las pantallas ya están programadas y funcionales en código, puedes capturar las vistas de /login, /registro y /dashboard y colocarlas en tu archivo de Figma como los frames finales de alta fidelidad, o usar el plugin "html.to.design" con la URL local.