Async/Await returning undefined in contextApi

Question

I'm making a login structure with Context, and inside my AuthProvider the asynchronous function still returning undefined. I'm trying the professor login, and the axios return the response of the api, but in the AuthProvider the const data still undefined. I would be so grateful if you could help me. Thanks anyway. My AuthProvider:

import { useState } from "react";
import { useApi } from "../../hooks/useApi";
import { User } from "../../types/User";
import { AuthContext } from "./AuthContext";

export const AuthProvider = ({ children }: { children: JSX.Element }) => {
  const [user, setUser] = useState<User | null>(null);
  const api = useApi();

  const login = async (email: string, password: string, userType: string) => {
    const data = await api.login(email, password, userType);
    console.log(data);

    if (userType === "professor") {
      console.log("data");
      if (data?.admin && data.token) {
        setUser({
          name: data?.admin.name,
          email: data?.admin.email,
          id: data?.admin.id,
          userType: userType,
        });
        return true;
      }
    } else if (userType === "student") {
      if (data?.student && data.token) {
        setUser({
          name: data.student.name,
          email: data.student.email,
          id: data.student.id,
          userType: userType,
        });
      }
      return true;
    }

    return false;
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

My useApi:

import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
});

export const useApi = () => ({
  login: async (email: string, password: string, userType: string) => {
    if (userType === "professor") {
      const options = {
        method: "POST",
        url: process.env.REACT_APP_BASE_URL + "/adm/admin/login",
        headers: { "content-type": "application/json" },
        data: {
          email: email,
          password: password,
        },
      };

      axios
        .request(options)
        .then((response) => {
          console.log(response.data);
          return response.data;
        })
        .catch(function (error) {
          console.error(error);
        });
    } else if (userType === "student") {
      const response = await api.post("/aluno/student/login", {
        email,
        password,
      });
      return response.data;
    }
  },
});

What do you see if you ```console.log(email, password, userType)``` before you call login on the useApi object? — Jelmer, Jan 09 '23 at 15:41

Sergey Sosunov · Accepted Answer · 2023-01-09T17:01:35.920

2

For professor login part of your code - the axios request is not awaited and axios call itself is not returned as a promise, so data from it is lost, basically. So, just add a return to it.

return axios
  .request(options)
  .then((response) => {
    console.log(response.data);
    return response.data;
  })
  .catch(function (error) {
    console.error(error);
  });

Or

const responseData = await axios
  .request(options)
  .then((response) => {
    console.log(response.data);
    return response.data;
  })
  .catch(function (error) {
    console.error(error);
  });
return responseData;

Note: Additional issue was due to <form> html tag itself, onClick was attached to the button inside of the form, so when clicked - page was just reloaded.

Related: <form onSubmit={e => e.preventDefault()}>

edited Jan 09 '23 at 17:01

answered Jan 09 '23 at 15:39

Sergey Sosunov

4,124
2
11
15

I tried both, but still not working. I tried that and console.log(responseData) but dont show anything on the console – Henrique Sathler Jan 09 '23 at 15:45
It returns: teste@gmail.com password professor – Henrique Sathler Jan 09 '23 at 15:51
If I put axios inside a const or a return, it returns nothing in the console. But when axios is executed alone, it returns the response or the error in the console. – Henrique Sathler Jan 09 '23 at 15:56
I've saved hahaha, i have a tic, that aftar almost every change i click shift+alt+f (to format with prettier) and cntrl + s after that – Henrique Sathler Jan 09 '23 at 15:59
Do you want the all code? I can share the github – Henrique Sathler Jan 09 '23 at 16:00
https://github.com/sathlerhe/tikal-teste – Henrique Sathler Jan 09 '23 at 16:02
Thank you for the help. I will just try to figure out whats happening here. Thanks :) – Henrique Sathler Jan 09 '23 at 16:25
I put the function inside the onSubmit, but when i call const res = await axios and return axios it still return undefined – Henrique Sathler Jan 09 '23 at 16:43
1

I taked of the
and put the function insite the onClick on the button. and using the const res = await axios. It returned. Thank you
– Henrique Sathler Jan 09 '23 at 16:47

score 0 · Answer 2 · answered Jan 09 '23 at 15:39

I think you are just missing a return in front of your axios.request() call. The if (userType === "professor") branch is not returning anything aka undefined.

In the then() arrow function you are returning the data but this data is not again returned by the api.login() function.

Async/Await returning undefined in contextApi

2 Answers2