Autenticación de usuarios con Django REST Framework y ReactJS

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.