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

Usando nuestro useAuth para cargar la informaci贸n del usuario

15/31
Recursos

Aportes 8

Preguntas 6

Ordenar por:

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

o inicia sesi贸n.

La API ya fue modificada y ahora cuenta con un avatar 馃榿, en lugar del llamado a esa URL para la imagen pueden escribir dentro de imageUrl:

auth?.user?.avatar

Y ya les sale el avatar del 鈥渦suario鈥

Clase #15: Usando nuestro useAuth para cargar la informaci贸n del usuario 15/31 馃摛


Continuando con el proyecto: 馃敤


Queremos que al logearnos aparezca el dashboard (otra interfaz) con los datos del usuario como nombre, email, rol. Para ello vamos al archivo LoginPage.js de la ruta src/components en la cabecera del c贸digo, se importa useRouter, 茅ste hook nos permite movernos a una interfaz despu茅s de tener un login exitoso:

import { useRouter } from 'next/router';


Dentro de la funci贸n LoginPage() donde inicialmente se declaran las constantes, se crea router para usar el recurso de useRouter:

const router = useRouter();


En auth.signIn, cambiamos el mensaje de 鈥淟ogin success鈥 y con router.push nos redirige a la p谩gina que queremos, en este caso al dashboard:

auth.signIn(email,password).then(() => {
	//console.log('Login success');
	router.push ('/dashboard'); //Una vez iniciado sesi贸n vamos a llevar el usuario a la siguiente interfaz
},


Vamos al archivo Header.js de la ruta src/components, aqu铆 vamos a editar la l贸gica para que la informaci贸n que viene del custom Context nos permita agregar al componente y mostrarlo en pantalla.

Se agrega (donde est谩n los imports) el useAuth para acceder a la informaci贸n:

import { useAuth } from '@hooks/useAuth';


Dentro de la funci贸n Header() al inicio se crea la constante auth que se usar谩 el recurso de useAuth.

Tambi茅n cortamos la estructura de userData y la agregamos en Header(), para la informaci贸n del usuario debemos usar sus atributos como name, email e imagen se accede con auth?.user?.seguido-del-atributo.

En la clase el profesor usa la url que nos brinda ui-avatars para obtener im谩genes creadas por el servicio (enlace: aqu铆), se copia la url del m茅todo GET y listo: https://ui-avatars.com/api/?name=John+Doe se cambia el name para que sea din谩mico seg煤n el usuario autenticado.

Para conocer los atributos del usuario, al revisar la API (enlace: aqu铆), al final en la secci贸n desplegable: CreateUserDto, aparecen el name, email, password, role y avatar:


As铆 que podemos acceder al avatar directamente sin la url de ui-avatars con imageUrl: auth?.user?.avatar,

El c贸digo queda:

export default function Header() {
	const auth = useAuth();

	const userData = {
		name: auth?.user?.name,
		email: auth?.user?.email,
		//imageUrl: `https://ui-avatars.com/api?name=${auth?.user?.name}`,
		imageUrl: auth?.user?.avatar,
		//role: auth?.user?.role,
	};


Guardamos y ejecutamos npm run dev

En la p谩gina al tener login exitoso nos redirige al dashboard pero sale una imagen por defecto, un nombre distinto al que logeamos y un role distinto, 茅sto se debe a que si revisamos el archivo index.js de la ruta src/pages/dashboard los datos por defecto de la interfaz dashboard es:

const people = [
	{
		name: 'Jane Cooper',
		title: 'Regional Paradigm Technician',
		department: 'Optimization',
		role: 'Admin',
		email: '[email protected]',
		image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
	},
];

No se si vendra mas adelante en el curso, pero modifique un poco el hook de useAuth para que tome el token desde las cookies y obtenga al usuario y pueda ser usado sin necesidad de tener que hacer el login cada que querramos identificar a nuestro usuario. Aca el resultado:

// Libraries
import { useState, useContext, createContext, useEffect, useCallback } from 'react';
import cookie from 'js-cookie';
import axios from 'axios';

// Services
import endPoints from '@services/api/index';

const AuthContext = createContext();

const useAuthProvider = () => {
  const [user, setUser] = useState(null);

  /**
   * Function to get the user from the API with the token stored in the cookies
   */
  const fetchUser = useCallback(async () => {
    try {
      const token = cookie.get('token');

      if (token) {
        axios.defaults.headers.Authorization = `Bearer ${token}`;
        const { data: user } = await axios.get(endPoints.auth.profile);

        setUser(user);
      }
    } catch (error) {
      setUser(null);
    }
  }, []);

  const signIn = async (email, password) => {
    try {
      const options = {
        Headers: {
          accept: '*/*',
          'Content-Type': 'application/json',
        },
      };

      const { data: access_token } = await axios.post(endPoints.auth.login, { email, password }, options);

      if (access_token) {
        const token = access_token.access_token;
        cookie.set('token', token, { expires: 5 });
      }

      await fetchUser();
    } catch (error) {
      setUser(null);
    }
  };

  useEffect(fetchUser, [fetchUser]);

  return { user, signIn };
};

export const AuthProvider = ({ children }) => {
  const auth = useAuthProvider();

  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
};

export const useAuth = () => {
  return useContext(AuthContext);
};

Hola.
驴Alguien tuvo problema renderizando la imagen del avatar?
Al parecer hay un componente 鈥淚mage鈥 propio de next que nos pide una configuraci贸n especial en el doc de next.config.js, pero aunque segu铆 las recomendaciones de la documentaci贸n, no pude renderizar la imagen del avatar ni desde la API ni desde la url que nos recomienda Omar. 驴Saben a qu茅 se deba?

Que curiosos son los retos ya ten铆a lo de esta clase hecho desde la clase pasada con el reto que hab铆a puesto Oscar

que genial y a la vez que triste, yo hab铆a hecho lo mismo pero de otra forma xD

  const submitHandler = (event) => {
    event.preventDefault();
    const email = emailRef.current.value;
    const password = passwordRef.current.value;
    console.log(email, password);

    auth
      .signIn(email, password)
      .then(() => {
        console.log('Login sucess');
        let actualUrl = window.location.origin;
        let redireccion = actualUrl + '/dashboard';
        window.location.assign(redireccion, 'dashboard');
      })
      .catch((error) => {
        if (error.response?.status === 401) {
          alert('Usuario o contrase帽a incorrectos');
        }
      });
  };

Vamos melo, sisa, sisa!

Les comparto el c贸digo con el user en Typescript:

interface AppContextInterface {
  user: { id: number; email: string; password: string; name: string; role: string; avatar: string; creationAt: Date; updatedAt: Date };
  signIn: Function;
}