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!

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;
  }
};

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

🗝 Clase #14: Manejo de la autenticación desde el cliente 14/20 🗝

 
Con un token empezamos a manejar la capa de autenticación y de autorización desde el lado del backen, pero del lado de los clientes es diferente, lo hacen a través de una interfaz creada por Angular, React o Vue que se conectan a la API y manejan las sesiones, cuando se hace login, nos envía toda la información relacionada con el usuario: nombre, email, datos de fechas, incluso un avatar y lo más importante el token, todo esto se debe almacenar para tener mas accesos.
 

Client Session (Browser): ♨

 
Las fases o etapas a considerar desde el punto de vista de la sesión del cliente, es decir desde el Browser o la app (aplicaciones móviles) son las siguientes:
 

• Un estado de login: una vez qu se hace el login y es exitoso debemos guardar en algún estado la información proveniente del usuario, como los token son stealers, es decir que no tienen un estado fijo se debe guardar en un LocalStorage o cookie.
   
• Cookies o LocalStorage: el mejor lugar para guardar el token podría ser una cookie (que es mejor que un LocalStorage), cada vez que se hace un request (una petición), es decir se quiere por ejemplo consultar categorías, se quiere crear una orden, se quiere editar un producto, etc, se debe enviar el token por cada petición.
   
• Enviar en el header: Existe en Angular una manera que se pueda interceptar el token por medio de un header y no sea necesario enviar el token cada vez que se haga una petición.
   
• Refresh token: Los token deben tener una duración, es decir un tiempo de expiración, esto se ve relejado por ejemplo en las sesiones bancarias en donde después de un tiempo de consulta, se expira la sesión y se sale, sin embargo en otras sesiones no relacionadas con el área bancaria puede crear malestar al usuario que lo estén sacando por ejemplo cada 15 minutos, para evitar esto se encuentra los Refresh token, que es un segundo token que se genera al hacer login que al expirar el primero, el segundo lo sustituye sin necesidad de salir de la sesión (el frontend lo solicita).
   
• Validar permisos: Al tener el token se puede validar permisos e indicarle al backend qué tipo de perfil es y verificar si está autorizado a visualizar o consultar cierta información restringida a la mayoría de usuarios.
   

Manejo de la autenticación desde el cliente

En el login nos mandan el token, este debemos guardarlo porque lo enviaremos en todas las peticiones.

Podemos guardar el token en Cookies (lo más recomendado) o en LocalStorage (no es la mejor práctica).

Es muy usado en bancos el ‘refresh token’ por medidas de seguridad, por ejemplo, cada 15 minutos expira el token y sacamos al usuario de la sesión y debe de vovler a hacer login.