POLITICA DE COOKIES

Q2BSTUDIO.COM utiliza cookies técnicas, analíticas, de sesión y de publicidad con la finalidad de prestar un mejor servicio. No obstante, necesitamos su consentimiento explícito para poder utilizarlas. Así mismo puede cambiar la configuración de las cookies u obtener más información aquí .

Construí 2FA (TOTP) listo para producción en Node.js + Angular - Así es cómo

Construyendo 2FA (TOTP) en Node.js + Angular

Publicado el 19/11/2025

¿Te has preguntado cómo funcionan aplicaciones como Google Authenticator? Aquí tienes una guía completa y traducida sobre cómo implementar 2FA TOTP listo para producción en Node.js y Angular, con explicaciones prácticas, decisiones de diseño y recomendaciones de seguridad pensadas para entornos reales.

Resumen de lo que construirás: un sistema 2FA en backend usando Speakeasy y JWT, frontend en Angular que genera y muestra códigos QR, integración sin fricciones con el flujo de autenticación existente y medidas de producción como tokens temporales y versionado de tokens para invalidar sesiones.

Stack recomendado: Node.js 20, Angular 20, Speakeasy 2.0, PostgreSQL 16. También aplicamos prácticas de seguridad y despliegue que encajan con servicios cloud como AWS y Azure y con integraciones de inteligencia de negocio como Power BI.

Recorrido del usuario: habilitar 2FA desde perfil, backend genera secreto TOTP y otpauth URL, frontend muestra QR para escanear en Google Authenticator u otra app, usuario verifica con código de 6 dígitos y la 2FA queda activa. Al iniciar sesión, si el correo y contraseña son correctos y el usuario tiene 2FA activada, se emite un token temporal de corta vida para la etapa preautenticada; el usuario ingresa el código desde su app y entonces el backend emite los tokens de sesión completos.

Decisiones de diseño clave que refuerzan la seguridad: tokens 2FA temporales con expiración de 5 minutos para evitar replay attacks, cookie separada para el estado prelogin que aísla la sesión completa, y token version que se incrementa al cambiar la configuración 2FA para invalidar refresh tokens antiguos en todos los dispositivos.

Esquema de base de datos sugerido: añade campos al modelo de usuario para twoFactorEnabled boolean, twoFactorSecret para el secreto en base32 y tokenVersion entero. El motivo de tokenVersion es forzar la reautenticación y anular refresh tokens antiguos cuando se habilita o deshabilita 2FA.

JWT y token temporal: crea un JWT especial para el estado preautenticado con un claim que identifique su tipo como twofa y que incluya una nonce única. La nonce evita reutilizaciones del token aun dentro de la ventana de validez corta, mitigando repeticiones maliciosas.

Flujo backend esencial sin mostrar código: endpoint para generar secreto TOTP y otpauth URL, endpoint para consultar estado 2FA del usuario, endpoint para habilitar 2FA verificando el código TOTP y guardando el secreto cifrado o protegido, endpoint para deshabilitar 2FA incrementando tokenVersion, y endpoint crítico para verificar el código durante el login que valida el token temporal, verifica el TOTP con ventana de tolerancia y emite cookies de access y refresh completas, limpiando la cookie temporal.

Detalles operativos: usa speakeasy.totp.verify con window igual a 1 para tolerar un desfase de 30 segundos entre servidor y cliente. Si encuentras sincronización de reloj frecuente en tu base de usuarios puedes aumentar la ventana a 2, pero con prudencia para no disminuir la seguridad.

Integración con el login: tras validar contraseña, si el usuario tiene 2FA activada genera nonce, firma un twofa token de muy corta vida, guarda ese token en una cookie httpOnly con path y maxAge de 5 minutos y responde al cliente indicando requires2FA true. El frontend debe redirigir a una pantalla de verificación de 2FA que leerá la cookie temporal y enviará el código al endpoint de verificación.

Frontend Angular: servicio de autenticación que envía peticiones con withCredentials para poder usar cookies httpOnly. Métodos para iniciar setup, confirmar habilitación con secreto y token, consultar estado, deshabilitar 2FA y verificar el código durante login. Página de verificación con formulario reactivo que acepta 6 dígitos y usa autocomplete one-time-code para mejorar la experiencia en iOS y Android.

Setup de perfil y QR: al iniciar setup el backend devuelve secret y otpauth URL. El frontend genera un QR a partir de otpauth URL para que el usuario lo escanee. También mostramos el secreto en texto para ingreso manual. Recomendado instalar una librería QR adecuada en Angular para renderizado rápido.

Checklist de pruebas: habilitar 2FA desde perfil y verificar que la QR se muestra y el código escaneado funciona, probar flujo de login con 2FA y sin 2FA, probar tokens temporales expiran tras 5 minutos, probar desfases de tiempo y ajustar window si hace falta, y probar que al habilitar o deshabilitar 2FA los refresh tokens antiguos quedan invalidados por tokenVersion.

Problemas comunes y soluciones: si aparece error invalid 2FA code revisa sincronización de reloj y considera window mayor; si expira la sesión temporal reduce fricción con un flujo de reenvío o extiende ligeramente el timeout con cuidado; si el QR no aparece revisa la importación del componente QR y que otpauth URL tenga formato otpauth://totp/.

Checklist de producción adicional: aplicar rate limiting en endpoints de verificación para evitar fuerza bruta, audit logging de eventos 2FA, generar y almacenar 10 códigos de respaldo de un solo uso cuando se habilita 2FA, cifrar twoFactorSecret en reposo preferiblemente con AES-256 y una llave a nivel de aplicación, y forzar 2FA en cuentas privilegiadas. Para proteger infraestructuras y cumplir normativas puedes apoyarte en servicios cloud bien configurados.

Recomendaciones de despliegue y cumplimiento: configura cookies secure y sameSite según dominios y entorno, habilita HTTPS obligatorio, monitoriza intentos fallidos y bloqueo temporal, y documenta la política de retención y cifrado de secretos para auditoría.

Sobre Q2BSTUDIO: somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones seguras y escalables. Ofrecemos servicios integrales que incluyen desarrollo de aplicaciones a medida, inteligencia artificial aplicada a negocios, ciberseguridad y pentesting, y migración y operación en servicios cloud aws y azure. Si necesitas un proyecto de software a medida o una aplicación multiplataforma visita nuestra página de desarrollo de aplicaciones y software a medida usando el enlace aplicaciones y software a medida en Q2BSTUDIO.

También proporcionamos servicios especializados en ciberseguridad y pruebas de penetración para proteger implementaciones críticas como sistemas de autenticación y gestión de secretos. Conoce más sobre nuestras capacidades de seguridad en servicios de ciberseguridad y pentesting.

Palabras clave y valores añadidos: este enfoque cubre aspectos importantes para proyectos que requieren aplicaciones a medida, software a medida, inteligencia artificial aplicada, ia para empresas, agentes IA, servicios de inteligencia de negocio y power bi, así como estrategias en servicios cloud aws y azure. Implementamos integraciones con pipelines de datos, análisis con Power BI y arquitecturas seguras orientadas a empresas.

Resumen final: con esta guía tienes la hoja de ruta para un 2FA TOTP robusto y producido para producción que combina Speakeasy, JWT con tokens temporales y versionado, y una UX en Angular con QR para facilitar la adopción. Si prefieres que Q2BSTUDIO implemente o audite este sistema por ti, te ayudamos a integrar 2FA dentro de una plataforma completa que incluye IA para empresas, automatización de procesos y business intelligence.

Contacto: si quieres que te ayudemos a diseñar o auditar un sistema de autenticación seguro y a medida contacta con nuestro equipo en Q2BSTUDIO y potencia tus soluciones con mejores prácticas de ciberseguridad, servicios cloud y análisis avanzado.

Fin del artículo, inicio de la diversión
Construyendo software juntos

Dando vida a tus ideas desde 2008

Diseñamos aplicaciones móviles y de escritorio innovadoras que cumplen con tus requisitos específicos y mejoran la eficiencia operativa.
Más info
Cuéntanos tu visión
Sea cual sea el alcance, podemos convertir tu idea en realidad. Envíanosla y charlemos sobre tu proyecto o una colaboración futura.
Contáctanos
artículos destacados
Live Chat
Enviado correctamente.

Gracias por confiar en Q2BStudio