How to display error message on the mern app

[rishipurwar007]

I’m trying to display an error message when a user tries to sign in with an unregistered user but I’m not able to get that error message on the frontend(reactjs) that I am sending from my backend(nodejs, express, MongoDB).

I am using redux to handle the state of the react app.

user login form onSubmit code:

   const onSubmit = (data) => {
    if (isLogin) {
      dispatch(signin(data, history));
    } else {
      dispatch(signup(data, history));
    }
  };

actions creators for auth

import * as api from "../api";

export const signin = (formData, history) => async (dispatch) => {
  try {
    // login the user
    const { data } = await api.signIn(formData);
    dispatch({ type: "AUTH", data });
    history.push("/");
  } catch (error) {
    console.log(error);
    dispatch({ type: "ERROR", data: error.response.data.message });
  }
};

export const signup = (formData, history) => async (dispatch) => {
  try {
    // sign up the user
    const { data } = await api.signUp(formData);
    dispatch({ type: "AUTH", data });
    history.push("/");
  } catch (error) {
    console.log(error);
  }
};

reducers for auth:

const authReducer = (state = { authData: null }, action) => {
  switch (action.type) {
    case "AUTH":
      localStorage.setItem("profile", JSON.stringify({ ...action?.data }));
      return { state, authData: action?.data };
    case "LOGOUT":
      localStorage.clear();
      return { state, authData: null };
    case "ERROR":
      return { state, authData: action?.data };
    default:
      return state;
  }
};

export default authReducer;

Backend sign in code

const signin = async (req, res) => {
  const { email, password } = req.body;
  try {
    const existingUser = await User.findOne({ email });
    if (!existingUser)
      return res.status(404).json({ message: "User doesn't exist." });

    const isPasswordCorrect = await bcrypt.compare(
      password,
      existingUser.password
    );
    if (!isPasswordCorrect)
      res.status(404).json({ message: "Invalid Credentials" });

    const token = jwt.sign(
      { email: existingUser.email, id: existingUser._id },
      "test",
      { expiresIn: "1h" }
    );
    res.status(200).json({ result: existingUser, token });
  } catch (error) {
    res.status(500).json({ message: "Something went wrong" });
  }
};

Anyone, please help me with this.

Screenshots of the error response in Postman: