Este proyecto ofrece un sistema completo de autenticación de usuarios para email y contraseña y también para inicios de sesión sociales como Google y GitHub. Incluye verificación de correo para cuentas nuevas y usa tokens seguros para gestionar sesiones entre frontend y backend. Todo el enfoque prioriza ciberseguridad, privacidad y escalabilidad, incorporando prácticas modernas como PKCE y cookies HttpOnly para el refresh token.
En Q2BSTUDIO desarrollamos aplicaciones a medida y plataformas seguras de autenticación para empresas. Si necesitas un backend robusto y un frontend moderno, podemos construirlo de extremo a extremo con integración de inteligencia artificial, servicios cloud y analítica. Descubre cómo abordamos proyectos de software a medida visitando nuestro enfoque en desarrollo de aplicaciones y software multiplataforma, o refuerza la seguridad de tus productos con nuestras soluciones de ciberseguridad y pentesting.
Indice de contenidos
1 Modelos de datos de usuario y cuentas
2 Flujo de autenticación en backend
3 Integración con proveedores de login social
4 Sistema de verificación de correo
5 Seguridad PKCE Proof Key for Code Exchange
6 Capa de comunicación API en frontend
7 Gestión del estado de autenticación en frontend
1 Modelos de datos de usuario y cuentas
El diseño de modelos captura de forma clara el perfil del usuario y sus vínculos con proveedores externos.
Modelo User identidad central
Extiende el modelo base de Django, hace único el email y añade el indicador email_verified. Esto permite garantizar que no existan correos duplicados y distinguir usuarios con email confirmado.
Modelo SocialAccount conexión con proveedores
Relaciona un usuario interno con la identidad entregada por el proveedor social mediante dos campos clave provider y provider_uid. También puede guardar metadatos en un campo JSON y asegura unicidad por proveedor e identificador remoto.
Modelo EmailVerificationToken confirmación de identidad
Guarda de forma temporal un token único asociado a un usuario, con fecha de creación y bandera de uso. Sirve para verificar el correo y evitar reutilizaciones.
2 Flujo de autenticación en backend
Registro
Endpoint api auth register método POST. El cliente envía username email y password. Se valida y persiste el usuario con la contraseña hasheada, se crea un token de verificación y se envía un correo con el enlace de confirmación.
Login
Endpoint api auth login método POST. Se autentican credenciales email y password. Si son válidas, se emiten dos tokens JWT un access token de corta duración y un refresh token de mayor duración. El refresh se almacena en cookie HttpOnly para mitigar ataques del lado cliente.
Gestión de sesión con tokens
Access token se manda en la mayoría de peticiones a recursos protegidos. Caduca pronto por seguridad.
Refresh token se conserva en cookie HttpOnly y permite solicitar un nuevo access token cuando este caduque.
Refresco de access token
Endpoint api auth token refresh método POST. El servidor lee el refresh token desde la cookie HttpOnly y devuelve un nuevo access token.
Acceso a recursos protegidos
Endpoint típico api auth me método GET. El cliente envía el header Authorization con Bearer y el access token vigente. El servidor responde con el perfil del usuario y proveedores vinculados.
Logout
Endpoint api auth logout método POST. Se ordena al navegador eliminar la cookie con el refresh token, invalidando la sesión persistente.
Resumen de endpoints principales
api auth register POST crea cuenta
api auth verify email GET verifica email con token
api auth login POST emite access y refresh
api auth token refresh POST renueva access con cookie
api auth me GET devuelve perfil del usuario autenticado
api auth logout POST elimina cookie de refresh
api auth social provider POST procesa login social
3 Integración con proveedores de login social
Proveedores soportados
Google GitHub Facebook LinkedIn y otros. Cada uno expone su propio flujo de verificación y APIs de perfil.
OAuth 2.0
Es el estándar de autorización que utilizamos para delegar la identidad en el proveedor. No es el usuario entregando su contraseña a nuestra app, sino el proveedor confirmando su identidad mediante tokens.
Authorization Code Flow
El usuario otorga permisos en la web del proveedor. El proveedor redirige a nuestra aplicación con un código temporal. Nuestro backend intercambia ese código por tokens del proveedor y consulta el perfil del usuario.
Vinculación con nuestro sistema
Tras obtener los datos del proveedor se obtiene el identificador único y el email. Se busca una SocialAccount existente, o se crea una nueva y se asocia a un User. Si llega un correo confiable desde el proveedor, se marca email_verified como verdadero.
Emisión de tokens propios
Una vez identificado el usuario en nuestra base de datos, emitimos nuestros JWT access y refresh y devolvemos el refresh en cookie HttpOnly con atributos de seguridad adecuados.
Configuración sensible
Los secretos de cliente y claves se cargan desde archivos de configuración o variables de entorno. Es crítico registrar correctamente el redirect uri en cada proveedor para que el intercambio de código funcione.
4 Sistema de verificación de correo
Token único
Al registrarse se genera un token único por usuario y se guarda con fecha y estado de uso.
Correo de verificación
Se envía un email con un enlace del tipo api auth verify email token igual al token generado. Al visitar el enlace, el backend valida que el token exista, que no esté usado, lo marca como usado y cambia el campo email_verified del usuario a verdadero.
5 Seguridad PKCE Proof Key for Code Exchange
PKCE añade una verificación extra al Authorization Code Flow. El frontend crea un code verifier secreto y un code challenge derivado. En el primer salto se envía solo el challenge. En el intercambio de código, el backend presenta el verifier al proveedor, que valida que coincide con el challenge original. Así se reduce el riesgo de robo de código en clientes públicos como SPA.
Flujo resumido
El frontend genera code verifier y code challenge y guarda el verifier de forma temporal asociada a un estado.
El proveedor redirige a nuestra app con un código temporal. El frontend envía al backend el código y el code verifier.
Nuestro backend añade el code verifier al intercambio con el proveedor. Al validarse, obtenemos tokens del proveedor y seguimos con la identificación del usuario.
Soporte de PKCE por proveedor
Google sí recomendado en SPA
GitHub sí
LinkedIn sí
Facebook habitualmente no requerido por defecto en flujos web clásicos
6 Capa de comunicación API en frontend
Se implementa una pequeña librería de utilidades para peticiones fetch centralizadas con base URL y credenciales include para enviar cookies. Se exponen funciones sencillas para GET y POST, manejo de cabeceras y parseo de respuestas.
Ejemplos de uso
Login se hace con POST a api auth login enviando email y password, y se guarda el access token y el usuario en el estado global.
Registro se hace con POST a api auth register enviando username email y password, y se informa al usuario de que debe verificar su correo.
Refresco de token se llama con POST a api auth token refresh sin cuerpo, confiando en la cookie HttpOnly enviada automáticamente por el navegador.
Logout se llama con POST a api auth logout para que el backend elimine la cookie de refresh.
7 Gestión del estado de autenticación en frontend
Se usa Redux Toolkit como única fuente de verdad sobre la sesión. Un slice de autenticación almacena access token, usuario y estados de carga. Las acciones asincrónicas gestionan login, refresh, comprobación de sesión y logout. Los componentes consultan el estado con selectores y disparan acciones con dispatch. Rutas protegidas consultan el estado para decidir acceso o redirección al login.
Buenas prácticas de seguridad
Usar cookies HttpOnly y SameSite adecuadas para refresh token y reducir el riesgo de exfiltración por JavaScript.
Configurar tiempos de vida cortos para el access token.
Aplicar validaciones estrictas de entrada y tratamiento seguro de errores para no filtrar información sensible.
Forzar HTTPS en producción y habilitar secure en cookies.
Rotar secretos y gestionar credenciales en almacenes seguros.
Conclusión
Con Django REST Framework y React se puede construir un sistema de autenticación moderno que combine email y contraseña, login social, verificación de correo y gestión robusta de sesiones con JWT y PKCE. Este diseño equilibra seguridad, experiencia de usuario y escalabilidad en entornos de producción. Si buscas llevar esta solución a tu organización con IA para empresas, servicios cloud AWS y Azure, automatización de procesos o inteligencia de negocio con Power BI, en Q2BSTUDIO podemos ayudarte a crear software a medida y agentes IA alineados con tus objetivos.
Repositorio de código
Proyecto Complete User Authentication en GitHub
Si te interesan soluciones avanzadas basadas en inteligencia artificial y automatización, visita nuestra página de inteligencia artificial para empresas y conoce cómo potenciamos productos digitales con modelos modernos, agentes IA y analítica aplicada.