Usando nuestro useAuth para cargar la información del usuario

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 “usuario”

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 “Login 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 “Image” 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;
}