¿Qué es el flujo de autenticación?

El flujo de autenticación es el proceso de confirmar la identidad de un usuario y administrar su acceso a ciertas partes de una aplicación. Cuando trabajas con una aplicación web (como un sitio de redes sociales), esto implica verificar si el usuario es quien dice ser (iniciar sesión) y luego darle acceso a ciertas funciones.

¿Cómo funciona en React?

En React, cuando quieres manejar la autenticación del usuario, generalmente interactúas con un servidor backend que maneja el trabajo pesado. Así es como funciona normalmente:

1. Puntos finales de registro e inicio de sesión

• Punto final de registro: Cuando un nuevo usuario se registra, envía sus datos (como nombre de usuario, correo electrónico, contraseña) al servidor. Luego, el servidor crea una cuenta para ellos.
• Punto final de inicio de sesión: Cuando un usuario existente inicia sesión, envía su nombre de usuario y contraseña al servidor. El servidor comprueba si estos datos son correctos.

2. Tokens: token de acceso y token de actualización

Después de iniciar sesión correctamente, el servidor devuelve dos tokens importantes:

• Token de acceso:

  • Esto es como un pase a corto plazo que permite al usuario acceder a ciertas funciones de la aplicación. Suele tener una vida útil corta (en este caso, 5 minutos).
  • Cada vez que el usuario realiza una solicitud (como ver su perfil o publicar algo), este token se envía al servidor para demostrar que ha iniciado sesión.

• Actualizar token:

  • Esto es como un pase de respaldo que se usa cuando el token de acceso caduca. Es más duradero.
  • Cuando el token de acceso caduca (después de 5 minutos), en lugar de hacer que el usuario inicie sesión nuevamente, la aplicación puede usar el token de actualización para obtener un nuevo token de acceso.

3. Almacenamiento de tokens en el navegador

Una vez que el usuario inicia sesión y recibe estos tokens, la aplicación debe almacenarlos en algún lugar del dispositivo del usuario. Aquí es donde entra en juego localStorage:

• localStorage: Esta es una característica de los navegadores web que le permite almacenar datos (como los tokens) en el navegador del usuario.
  • Método setItem(): Esto se utiliza para almacenar datos. Por ejemplo, almacena el token de acceso y el token de actualización con algo como localStorage.setItem('accessToken', tokenValue).
  • Método getItem(): Esto se utiliza para recuperar datos almacenados. Por ejemplo, obtienes el token de acceso almacenado con algo como localStorage.getItem('accessToken').

4. Realizar solicitudes con el token de acceso

Cada vez que el usuario hace algo que requiere interacción con el servidor (como publicar un estado o ver sus mensajes), la aplicación envía una solicitud al servidor con el token de acceso adjunto en el encabezado de autorización. Esto le indica al servidor que el usuario ha iniciado sesión y tiene permiso para realizar la acción.

5. Manejo de tokens caducados

• Caducidad del token de acceso: Si el servidor responde con un error 401, significa que el token de acceso ha caducado. Luego, la aplicación utilizará el token de actualización para solicitar un nuevo token de acceso.

• Caducidad del token de actualización: Si el token de actualización también ha caducado (lo que puede suceder después de mucho tiempo), el servidor responderá nuevamente con un error 401. En este punto, la aplicación redirigirá al usuario a la página de inicio de sesión y le pedirá que inicie sesión nuevamente para obtener tokens nuevos.

6. Reenviar la solicitud fallida

Una vez que la aplicación obtenga un nuevo token de acceso usando el token de actualización, reenviará la solicitud original que falló debido al token vencido. De esta forma, el usuario no experimenta ninguna interrupción.

Resumen

• Flujo de autenticación: Así es como la aplicación confirma quién eres y te da acceso a funciones.
• Token de acceso: Una clave a corto plazo para acceder a los recursos de la aplicación. Caduca rápidamente.
• Token de actualización: Una clave de respaldo a largo plazo para obtener un nuevo token de acceso cuando el anterior caduque.
• localStorage: La forma en que el navegador almacena estos tokens en el dispositivo del usuario.
• Encabezado de autorización: Donde se incluye el token de acceso en las solicitudes al servidor.
• Error 401: Una señal de que el token ha caducado y que la aplicación debe tomar medidas (ya sea actualizar el token o pedirle al usuario que inicie sesión nuevamente).

Este flujo garantiza que el usuario pueda permanecer conectado y usar la aplicación de forma segura sin tener que volver a ingresar sus credenciales todo el tiempo.