Guardado del token en una cookie para mantener la sesión

Para usar menos librerías, pueden usar el fetch que es el API por defecto.
Para hacer el POST a la peticion quedaría así

const options = {
      method: 'POST',
      headers: {
        accept: '*/*',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    };
    const response = await fetch(endPoints.auth.login, options).then((res) => res.json());
    const { access_token } = response;

Y para hacer el GET sería así

      const options = {
        method: 'GET',
        headers: {
          authorization: `Bearer ${access_token}`,
        },
      };

      const data = await fetch(endPoints.auth.profile, options).then((res) => res.json());```

Clase #14: Guardado del token en una cookie para mantener la sesión 14/31 📥

Autenticación Bearer:

La autenticación de Bearer (también llamada autenticación de token ) es un esquema de autenticación HTTP que involucra tokens de seguridad llamados tokens de portador. El nombre “Autenticación de portador” puede entenderse como “dar acceso al portador de este token”. El token portador es una cadena críptica, generalmente generada por el servidor en respuesta a una solicitud de inicio de sesión. El cliente debe enviar este token en el header Authorization al realizar solicitudes a recursos protegidos. Fuente: aquí

Continuando el Proyecto: 🔨

 
Ya tenemos la lógica para tener la cookie guardada, el siguiente paso es obtener la información correspondiente al usuario enviado con el método POST al logear el email y el password. Para ello usamos el método GET de la sección auth de la API: (enlace: aquí). Por medio del header: Authorization permite que el token almacenado tenga autorización y obtenga la información del usuario del profile solicitado.
 
En el archivo useAuth.js de la ruta src/hooks en la lógica del if para el access_token, se añade la constante token. Usamos axios para validar que el token tenga autorización para obtener el profile.
El código queda:

//Lee un access token que regresa desde la información del servidor
const {data: access_token} = await axios.post(endPoints.auth.login, { email, password}, options);
//console.log(access_token); //Nos permite ver la información retornada
if(access_token){
	const token = access_token.access_token; //requerido para el acceso a la información
	Cookie.set('token', token, {expires: 5});
	/*expires permite que después de un tiempo definido podamos eliminar
	la información almacenada y pueda volver a logear*/
	//Se envía la información necesaria para que pueda definir el valor por defecto
	axios.defaults.headers.Authorization = `Bearer ${token}`;
	//Vamos a llamar el recurso con el profile
	const {data: user} = await axios.get(endPoints.auth.profile);
	console.log(user);
	setUser(user);
}

 
Guardamos y ejecutamos en la consola npm run dev
 
Si ingresamos un usuario válido como admin@mail.com y el password: admin123 al dar Sign In en el Inspector de web, en Consola debe salir el mensaje Login success y Network en profile sale el estado 200 “OK”
 
Si ingresamos un usuario invalido, el estado que se obtiene es 401 “Unauthorized”

En este momento el 90% de mi codigo son comentarios :`)

bueno por aca dejo algunos cambios que deben hacerle a axios

if (access_token) {
      Cookie.set('token', access_token, { expires: 5 });
      console.log(access_token);
      axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
      const { data: user } = await axios.get(endPoints.auth.profile);
      console.log(user);
      setUser(user);
    }
  };

¿En que momento se utilizan la cookie?

const token = access_token.access_token
Cookie.set('token', token, {expires: 5})
axios.defaults.headers.Authorization = `Bearer ${token}`;

Se asigna el valor, pero nunca se lee su contenido

Escribo en aporte, porque en la sección de preguntas no deja escribir bien. ya borre varias preguntas porque me las deja mochas o cortadas

Tengo problemas con el login, el error 401. Pueden actualizar o arreglar la API, gracias.

Creo que el dominio https://api.escuelajs.co/ esta vencido, no tengo acceso a la API ni a la documentacion, el lunes estaba trabajando en ella y todo funcionaba bien, pero hoy volvi a probar mi otra pagina que habia hecho y ya no esta funcionando, creo que esperare un rato para seguir con el curso en lo que se arregla esto…

En mi caso logré resolver el error de Unauthorized de la siguiente manera:

if (access_token) {
      Cookie.set('token', access_token.access_token, { expires: 5 });
      const token = access_token.access_token;
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
      const { data: user } = await axios.get(endPoints.auth.profile);
      setUser(user);
    }

Debuguendo encontré que el atributo Authorization antes se veía de esta manera en la consola:

Authorization: Bearer token=aeinwiunweuwrw......

Justamente la variable token se estaba pasando como un string con todas las propiedades de Cookie.set(), cuando en realidad solo necesitabamos el contenido del token, de esta manera:

Authorization: Bearer aeinwiunweuwrw......

Entonces creando una constante token de la manera a continuación permitía hacer eso:

const token = access_token.access_token;

Finalmente, también se cambió la forma de configurar Authorization de esta forma, pasando por common:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Espero haya sido de ayuda 😄👋.

Serías más eficiente si en el Backend mandamos un objeto con el token y ahí mismo el perfil del usuario para no tener que hacer doble petición al servidor y la base de datos. Así del lado frontend solo en una línea de código le agregaríamos el perfil con setUser.
Quedaría así.
Lado del Backend (servidor):

res.status(200).json({
	token: access_token, 
	profile: payload
})

Lado del Frontend (cliente):

setUser(data.profile);