Manejo de la autenticación desde el cliente

Nos falto el ejemplo practico para implementar un refresh token 😦

Consideraciones a tener en cuenta:

Al hacer un login en la API nos da la información del usuario, pero también envían el token. Lo más importante es guardar el token porque debe enviarse en todas las peticiones.

• En el cliente deberíamos tener un estado de login, es decir, una vez hecho un login exitoso se debería guardar un estado de sesión iniciada en el frontend.
• Deberíamos guardar el estado (el token) en algún lugar, se recomienda una cookie. También se puede en LocalStorage, pero no es la mejor practica.
• Cada vez que se envíe una petición (request) se debería enviar el token. Si se manejan librerías para hacer requests (ej. axios), hay formas de interceptar la petición y poner el token en el header.
• El token debería tener una expiración, se recomienda que expire en 15-20 minutos, se puede implementar una técnica de refresh token. La API nos puede dar un access token y otro token aparte (refresh token) que nos servirá para generar un nuevo token cuando el access token ya expiró. Se recomienda estar haciendo requests continuamente para no salir de la sesión.
• Se pueden validar permisos, con el token se puede preguntar al backend qué tipo de perfil es, aunque para más seguridad sería mejor hacer un request para obtener el perfil del usuario para no guardar nada en algún lugar.

Hola devs!! acá led dejo un artículo súper práctico para la implementación de los refresh token -> click aquí
HAPPY CODING!

Como que esto debió haber sido parte del curso en lugar de nomás mencionarlo, no? 😐

Acá un ejemplo de cómo se podría implementar el refresh-token desde el cliente, (no es del proyecto que estamos haciendo en este curso pero puede ser útil para entender la lógica):

1. Función para refrescar el token: En este caso solo se hace un get al endpoint /api/session/refresh, el refresh-token es enviado automáticamente como una cookie al servidor gracias al withCredentials: true utilizando axios.

export const RefreshTokenService = async (): Promise<boolean> => {
  try {
    await axios.get(`${GLOBALS.API_HOST}/api/session/refresh`, {
      withCredentials: true,
    });

    return true;
  } catch (err) {
    return false;
  }
};

1. En las funciones que utilizan el access-token, validar si la petición retorna un código de estado 403, o el que se haya definido cuando el access-token está vencido o no es válido:

// En este caso es una función para añadir un producto a los favoritos a partir de su id. 
// El parametro it es un contador de los intentos que sirve para intentar refrescar el 
// access token una sola vez.
export const AddToFavoritesService = async (it: number, id: string): Promise<boolean> => {
  // Si luego de intentar refrescar el access-token sigue fallando, retorna false como 
  // indicador de que no se pudo realizar.
  if (it > 2) return false;

  try {
  // Intenta añadir a favoritos
    const payload = { id };
    const response = await axios.post(`${GLOBALS.API_HOST}/api/user/favorites`, payload, {
      withCredentials: true,
    });

    return response.status === 200 ? true : false;
  } catch (err) {
  // Si el servidor response algo diferente a 200 (OK) axios lo tomará como error
  // Por lo que entrará a este catch
    if (axios.isAxiosError(err)) {
     // El código de estado 403 es el que nos indica en este caso que el access-token
     // está vencido o no es válido
      if (err.response?.status === 403) {
       // Ejecutamos la función para refrescar el token
        await RefreshTokenService();
       // Hacemos una llamada recursiva a la función de añadir a favoritos para intentar
       // de nuevo, pero aumentamos en uno el contador de iteraciones para poner el límite.
        return await AddToFavoritesService(++it, id);
      }
      return false;
    }
    return false;
  }
};