How to pass on my error messages on my Login page - reactjs

Question

I have a handleLogin function in an auth.js file, I would like to retrieve the errors received in the .catch and transmit them in my Alert.js file in order to display the errors in an alert in Login.js...
This is my handleLogin function on auth.js
export const handleLogin = async ({ email, password }) => {
const user = await ooth.authenticate('local', 'login', {
username: email,
password: password,
}).catch(e => {
alert(e.message)
});
await navigate(`/app/profile`);
if (user) {
return setUser({
id: user._id,
username: `jovaan`,
name: `Jovan`,
email: user.local.email,
avatar: `3`,
telephone: `0788962157`,
bio: `I'm a front-end dev`
})
}
return false
}
My Alert.js
import React from "react";
import { Alert } from "shards-react";
export default class DismissibleAlert extends React.Component {
constructor(props) {
super(props);
this.dismiss = this.dismiss.bind(this);
this.state = { visible: true, message: "Message par défaut" };
}
render() {
return (
<Alert dismissible={this.dismiss} open={this.state.visible} theme="success">
{this.message()}
</Alert>
);
}
dismiss() {
this.setState({ visible: false });
}
message() {
return this.state.message
}
}
I imported my Alert.js into my Login page, so I currently have the default message

Answer 1

You will need to somehow pass the results of the failed login via props wherever you have the <DismissableAlert /> in your code, which I'm presuming would be at /login or similar. My guess would be to do something like this, by passing the error via the 'state' option that navigate provides:
const error = null;
const user = await ooth.authenticate('local', 'login', {
username: email,
password: password,
}).catch(e => {
error = e
console.err(e.message)
});
if(error) {
await navigate(`/login`, {
state: { error: error },
});
}
Then in your LoginPage component (or whatever it is called), you should then have access to the result of the error as props that you can then pass down to the Alert:
render() {
const {error} = this.props
return(
<div>
<LoginForm />
{error &&
<DismissibleAlert message={error.message} />
}
</div>
)
}
Or something along those lines, depending on your components. I notice you have a default message in the DismissableAlert, so this is just an example to show that you could pass the error in to use it to show a relevant message.