Básicamente tengo mi AuthContext, con mi reductor, acciones y apicalls.

Reductor de autenticación:

 case "LOGIN_FAILURE": return { user: null, isFetching: false, error: true, };

Acciones de autenticación:

 export const loginFailure = () => ({ type:"LOGIN_FAILURE",

});

Llamadas API:

 export const login = async (user, dispatch) => { dispatch(loginStart()); try { const res = await axios.post("/auth/login", user); dispatch(loginSuccess(res.data)); } catch (err) { dispatch(loginFailure()); }

};

y la llamada real en mi api:

 router.post("/login", async (req, res) => { try { const user = await User.findOne({ email: req.body.email }); !user && res.status(401).json("Wrong password or username!"); const bytes = CryptoJS.AES.decrypt(user.password, process.env.SECRET_KEY); const originalPassword = bytes.toString(CryptoJS.enc.Utf8); originalPassword !== req.body.password && res.status(401).json("Wrong password or username!"); const accessToken = jwt.sign( { id: user._id, isAdmin: user.isAdmin }, process.env.SECRET_KEY, { expiresIn: "5d" } ); const { password, ...info } = user._doc; res.status(200).json({ ...info, accessToken }); } catch (err) { res.status(500).json(); } });

y en mi componente:

 const handleLogin = (e) => { if(email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g)){ login({email, password}, dispatch); e.preventDefault(); history.push("/"); } };

Todo funciona maravillosamente. Ahora, cuando ingreso las credenciales de inicio de sesión incorrectas, obviamente no sucede nada. En la consola de Chrome, en Red -> Respuesta, obtengo mi "Nombre de usuario o contraseña incorrectos". Pero, ¿cómo obtengo la respuesta 401 para mostrarla en mi componente, de modo que pueda mostrarla sobre mi botón de inicio de sesión SI ingreso las credenciales de inicio de sesión incorrectas?