---> Login App

Sistema de autenticación completo con JWT almacenado en cookies httpOnly. Backend construido con Node.js/Express/MongoDB y frontend con React/Vite/Tailwind CSS.

---> Componentes

Autenticación completa:

• Registro de usuarios con validación

• Login con credenciales

• JWT en cookies httpOnly (mayor seguridad que localStorage)

• Cierre de sesión

  

Gestión de perfil:

• Visualización de datos del usuario
• Actualización de información

UX/UI:

• Modo oscuro persistente
• Notificaciones toast elegantes
• Formularios con validación en tiempo real
• Carga optimizada con suspense
• Rutas protegidas con redirección automática

---> Stack Tecnológico

Backend

• Runtime: Node.js 18+
• Framework: Express.js 4.18
• Base de Datos: MongoDB (Mongoose 7.3)
• Autenticación:
• JSON Web Tokens (jsonwebtoken 9.0)
• bcryptjs 2.4 (hash de contraseñas)
• Seguridad:
• helmet 7.1 (headers HTTP seguros)
• express-rate-limit 7.4 (protección DDoS)
• CORS configurado
• express-validator 7.2 (validación de entrada)

Utilidades:

• cookie-parser 1.4
• dotenv 16.3

Frontend

• Framework: React 18.2
• Build Tool: Vite 7.1
• Routing: React Router DOM 6.20
• Estilos: Tailwind CSS 3.3

Formularios:

• react-hook-form 7.53
• zod 3.23 (validación de esquemas)
• @hookform/resolvers 3.9 UI/UX:
• Sonner 1.5 (notificaciones toast)
• Dark mode integrado
• Diseño responsive
• HTTP Client: axios 1.6 + fetch API
• DevOps & Deployment
• Backend: Render (Free tier)
• Frontend: Vercel
• Base de Datos: MongoDB Atlas
• CI/CD: Auto-deploy desde GitHub

--> Requisitos

- Node.js 18+ - MongoDB Atlas (o URI compatible)

Configuración

• Copia .env.example a .env en la raíz y completa valores:

PORT=3000 MONGODB_URI=... JWT_SECRET=... JWT_EXPIRE=24h COOKIE_EXPIRE=24 CLIENT_ORIGIN=http://localhost:5173

Instala dependencias backend y frontend:

npm run install:all

Levanta backend y frontend en paralelo: npm run dev

• Backend: http://localhost:3000
• Frontend: http://localhost:5173
• Proxy Vite reenvía /api/* al backend.

Seguridad

• Cookies httpOnly, sameSite=lax, secure en producción.
• helmet y express-rate-limit configurados.
• CORS parametrizable con CLIENT_ORIGIN.

Sugerencias pendientes:

• Validación de entrada (p.ej. express-validator).
• CSRF si se mantienen cookies en producción.

Preparar MongoDB Atlas:

• Accede a MongoDB Atlas → Network Access
• Agregar IP: 0.0.0.0/0 (permitir todas las IPs)
• Copia tu MONGODB_URI

Subir a GitHub

• git init
• git add .
• git commit -m "Initial commit"
• git branch -M main
• git remote add origin https://github.com/j0se0101/Login-app/
• git push -u origin main