Sprint 2 — Auth con JWT, rutas privadas y AuthContext
Semanas 3–4: implementa login con JWT, protege rutas en React y centraliza el estado de autenticación en eshop.com.
Módulo 1: Autenticación con JWT — flujo completo front ↔ back
Cómo funciona un JWT por dentro, el ciclo completo de login a petición autenticada, y cómo adjuntar el token automáticamente con un interceptor de axios.
Módulo 2: Rutas protegidas en React
El patrón ProtectedRoute con children y allowedRoles, redirección con state.from, cómo evitar el flicker y manejar el estado de autenticación desconocido al recargar la app.
Módulo 3: Estado global de autenticación con Context + useState
Cuándo usar estado global, cómo construir AuthContext con useState, el patrón provider + custom hook, y por qué separar contextos evita re-renders innecesarios. useReducer como mejora avanzada.
Clase Semana 3 — Formulario de login y primera ruta privada
Live coding: formulario controlado con email/password, llamada a POST /api/auth/login, decisión de almacenamiento del token y componente ProtectedRoute básico.
Clase Semana 4 — AuthContext, rutas protegidas completas y logout
Refactor hacia AuthContext: hidratación inicial con loading:true, hook useAuth, rutas Mi cuenta y Checkout protegidas, y flujo completo registro → login → área privada → logout.
Drills Sprint 2 Tanda 1
Practica JWT, almacenamiento de tokens y interceptores de axios en eshop.com
Drills Sprint 2 Tanda 2
Practica rutas privadas, AuthContext, useState y logout en eshop.com
Sesión de Práctica Sprint 2: Flujo completo de Auth en eshop.com
Construcción guiada en vivo: login → token → rutas privadas → perfil → logout
Entregable Sprint 2: Integración de Auth completa en eshop.com
Abre un PR contra el repo eshop: implementa login con JWT, AuthContext con useState y ProtectedRoute con logout seguro.