A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

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 3

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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鈥

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

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