Integrando seguridad con backend local y nube

Frontend III - Semana 3 (Sumativa)

Descripción

Aplicación React con autenticación local que permite registrar usuarios, iniciar sesión contra un servidor Express y acceder a una vista protegida usando tokens JWT almacenados en el navegador. Además, se suma autenticación externa con GitHub que coexiste con el login local.

Estructura

• frontend/: aplicación React + Vite + React Router.
• backend/: API local con Express, JWT y almacenamiento en JSON.

Funcionalidades

• Registro de usuario con email y contraseña (validación de campos y formato).
• Inicio de sesión contra backend local y obtención de token JWT.
• Inicio de sesión externo con GitHub (OAuth) sin reemplazar el flujo local.
• Almacenamiento del token en localStorage (o sessionStorage).
• Ruta protegida que muestra un mensaje de bienvenida y datos de sesión.
• Cierre de sesión que limpia token y datos locales.

El registro solicita nombre, apellido, correo y contraseña.

Flujo de uso

1. Crear cuenta en /register; si el registro es exitoso se redirige a /login.
2. Iniciar sesión en /login; al éxito se guarda el token y se redirige a /protected.
3. Cerrar sesión desde la vista protegida para limpiar datos y volver al login.

Autenticación externa (GitHub)

Variables de entorno requeridas en el backend:

• GITHUB_CLIENT_ID
• GITHUB_CLIENT_SECRET
• GITHUB_CALLBACK_URL (ej: http://localhost:4000/api/oauth/github/callback)
• FRONTEND_URL (ej: http://localhost:5173)
• CORS_ORIGINS (opcional, lista separada por comas; por defecto usa FRONTEND_URL)

Flujo:

1. En /login haz clic en “Continuar con GitHub”.
2. GitHub redirige a /oauth/callback en el frontend.
3. Se guarda el token JWT con proveedor github y se muestra en /protected.

Tecnologías

• React + Vite + React Router
• Node.js + Express + JWT + bcryptjs (backend local)
• Fetch API
• CSS

Instalación y ejecución

Requisitos previos: Node.js 18+ (se usa fetch nativo en el backend).

# instala dependencias de frontend y backend (workspaces)
npm install

# Servidor backend local (puerto 4000)
npm start -w backend
# (también puedes usar: npm run server)

# Frontend (Vite)
npm run dev

Configuración de API

Los servicios están en frontend/src/services/authService.js y apuntan a http://localhost:4000/api (puede sobrescribirse con VITE_API_URL en frontend/.env). Endpoints disponibles:

• POST /api/register
• POST /api/login
• POST /api/logout

Los usuarios se guardan en backend/data/users.json.

Estructura relevante

• frontend/src/pages/Register.jsx: formulario de registro.
• frontend/src/pages/Login.jsx: login con email/contraseña y guardado de token.
• frontend/src/pages/Protected.jsx: vista protegida y cierre de sesión.
• frontend/src/components/ProtectedRoute.jsx: control de acceso por token.
• frontend/src/utils/auth.js: manejo de almacenamiento local y de sesión.