¡Hola! Mi nombre es Emiliano y este es mi primer proyecto en hackathons. Este proyecto fue desarrollado para el hackathon Data HackFest 2025 de MLH, como parte de mi aprendizaje utilice GitHub Copilot para desarrollar el codigo de manera eficiente, limpia, rapida e incluso implementando funciones que en un pasado no conocia.

LoginSeguro es una aplicación web moderna que implementa autenticación segura usando Auth0. Este proyecto me sirvio para aprender el cómo integrar Auth0 en una aplicación web para proporcionar un sistema de autenticación robusto y confiable.

Auth0 ha sido parte de muchas páginas de autenticación durante mucho tiempo, así que quería aprender sobre esta tecnología e implementarla en un pequeño proyecto.

• 🔐 Autenticación Segura: Implementación completa de Auth0 SPA (Single Page Application)
• 🎨 Diseño Moderno: Interfaz atractiva con efectos glass-morphism y gradientes
• 📱 Responsive Design: Funciona perfectamente en todos los dispositivos
• ⚡ Acceso Rápido: Inicio de sesión y cierre de sesión en segundos
• 🌍 Universal: Accesible desde cualquier navegador moderno
• ✨ Animaciones Suaves: Transiciones y efectos visuales atractivos

• HTML5: Estructura semántica moderna
• CSS3: Estilos avanzados con gradientes, backdrop-filter y animaciones
• JavaScript (ES2017+): Funcionalidad async/await para Auth0
• Auth0 SPA SDK: Sistema de autenticación profesional
• Font Awesome: Iconografía moderna
• Google Fonts: Tipografía Inter para una apariencia profesional

Auth0/
├── index.html          # Página principal con estructura HTML
├── style.css           # Estilos CSS modernos y responsive
├── script.js           # Lógica de autenticación con Auth0
└── README.md           # Documentación del proyecto

1. Clonar o descargar el proyecto
2. Configurar Auth0:
   • Crear una cuenta en Auth0
   • Configurar una nueva aplicación SPA
   • Actualizar domain y client_id en script.js
3. Ejecutar:
   • Abrir index.html en un servidor local
   • O usar Live Server extension en VS Code

auth0 = await createAuth0Client({
  domain: "tu-dominio.auth0.com",
  client_id: "tu-client-id"
});

• ✅ Inicio de sesión con redirección
• ✅ Cierre de sesión seguro
• ✅ Manejo de callbacks de Auth0
• ✅ Verificación de estado de autenticación
• ✅ Obtención de información del usuario

• ✅ Diseño responsive para móviles y desktop
• ✅ Efectos hover y animaciones
• ✅ Feedback visual del estado de autenticación
• ✅ Perfil de usuario con avatar
• ✅ Sección de características destacadas

• Implementación completa del flujo de Auth0
• Manejo seguro de tokens y callbacks
• Protección contra ataques comunes

• Interfaz intuitiva y moderna
• Transiciones suaves entre estados
• Diseño centrado en la accesibilidad

• Estructura organizada y comentada
• Uso de async/await para mejor legibilidad
• Separación clara de responsabilidades

1. Integración de Auth0: Cómo configurar y usar Auth0 SPA SDK
2. Manejo de Estados: Gestión de estados de autenticación
3. Async/Await: Programación asíncrona moderna
4. CSS Moderno: Técnicas avanzadas como backdrop-filter y gradientes
5. Responsive Design: Creación de interfaces adaptables

El proyecto utiliza un esquema de colores moderno con:

• Gradientes vibrantes (rojo a negro)
• Efectos glass-morphism
• Tipografía Inter para profesionalismo
• Iconos Font Awesome para claridad visual

• Agregar perfil de usuario expandido
• Implementar roles y permisos
• Agregar dashboard de usuario
• Implementar notificaciones
• Agregar modo oscuro/claro

Este es mi primer proyecto en hackathons, ¡cualquier feedback o sugerencia es bienvenida!

Este proyecto es de código abierto y está disponible bajo la licencia MIT.

Emiliano - Primer proyecto en hackathons

⭐ ¡Dale una estrella si te gustó el proyecto! ⭐