No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

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

14/31
Recursos

Aportes 9

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia 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 鈥淎utenticaci贸n de portador鈥 puede entenderse como 鈥渄ar 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 鈥淥K鈥

Si ingresamos un usuario invalido, el estado que se obtiene es 401 鈥淯nauthorized鈥

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