Wrong authentication Login in ReactJS - reactjs

Question

I am trying to do a Login page. So I have also protected route which is an admin page. So the first page is Login and if the user is successfully logged in, it should be redirect to '/admin'. For this, my Login component is:
import React, { useState, useEffect } from "react";
import Axios from "axios";
import useForm from "../components/LoginForm/useForm";
import validate from "components/LoginForm/validate";
import redtruck from "../assets/img/red-truck.png";
import auth from "../Authentication/auth";
import { withRouter } from "react-router";
const Login = ({ submitForm, history }) => {
const [isSubmitted, setIsSubmitted] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [login, setLogin] = useState(false);
async function submitForm() {
setIsSubmitted(true);
try {
await fetchLogin(values.email, values.password);
auth.login(() => {
history.push("/admin");
});
} catch (e) {
console.log("wrong pass");
}
}
const { handleChange, values, handleSubmit, errors } = useForm(
submitForm,
validate
);
useEffect(() => {
if (localStorage.getItem("user-info")) {
submitForm();
}
}, []);
const fetchLogin = async (email, password) => {
try {
setLoading(true);
const res = await Axios({
method: "POST",
url: `url`,
headers: {
},
data: {
user_email: email,
user_password: password,
},
});
if (res.status === 200) {
setLogin(true);
localStorage.setItem("user-info", JSON.stringify(res.data));
}
setLoading(false);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
return (
<>
<div>
<div className="form-container">
<div className="form-content-left">
<img className="form-img" src={redtruck} alt="spaceship" />
</div>
<div className="form-content-right">
<h1>SIGN IN</h1>
<form className="form" onSubmit={handleSubmit}>
<div className="form-inputs">
<label htmlFor="email" className="form-label">
Email address
</label>
<input
id="signin-email"
type="email"
name="email"
placeholder="Enter email"
className="form-input"
value={values.email}
onChange={handleChange}
/>
{errors.email && <p>{errors.email}</p>}
</div>
<div className="form-inputs">
<label htmlFor="password" className="form-label">
Password
</label>
<input
id="signin-password"
type="password"
name="password"
placeholder="Password"
className="form-input"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
{login ? "" : <p>The password or the email is wrong</p>}
</div>
<button
variant="primary"
type="submit"
className="form-input-btn"
>
LOGIN
</button>
</form>
</div>
</div>
</div>
</>
);
};
export default withRouter(Login);
So, my problem is even though the password or the email is wrong, it is still redirecting to '/admin'. So, I dont want it to redirect to the page '/admin' when the credentials are wrong but also I want to show error message if the password or email is wrong. If you could give me any suggestion on this, I will be really glad.
Thanks...

Answer 1

You should only use the onSubmit callback from the form.
At the moment, you are calling the handleSubmit and loginButton functions when the user clicks login. Remove the loginButton callback and execute your logic in the onSubmit callback from the form. Also be sure to event.preventDefault() at the beginning of the form callback.
If your button has type="submit", it will submit the form automatically.
The submitForm function should looks something like this:
async function submitForm() {
setIsSubmitted(true);
try {
await fetchLogin();
auth.login(() => {
history.push("/admin");
});
} catch (e) {
// User is not logged
}
}
And just throw in the fetchLogin function if the login fails

Answer 2

You should either use loginButton() or submitForm() to handle the login.

Answer 3

Use e.preventDefault() default like this to prevent auto submit. Use the Button Click to Submit the form.
You can use Button Click Event and Remove form submit.
<button
variant="primary"
type="submit"
className="form-input-btn"
onClick={handleLoginSubmit}
>
LOGIN
</button>
const handleLoginSubmit = async (event) => {
event.preventDefault();
setIsSubmitted(true);
try {
await fetchLogin(values.email, values.password);
auth.login(() => {
history.push("/admin");
});
} catch (e) {
console.log("wrong pass");
}
}