'How can I show error message when user email and password doesn't matched
I'm trying to add firebase email-password authentication using firebase and react firebase hooks. I want to show an error message when user try to sign in and the user email and password doesn't matched.
const [user] = useAuthState(auth);
const [signInWithEmailAndPassword, error] = useSignInWithEmailAndPassword(auth);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const getEmail = (event) => {
setEmail(event.target.value);
};
const getPassword = (event) => {
setPassword(event.target.value);
};
if (error) {
setEmail("");
setPassword("");
}
return (
<div className="form-area">
<input
onBlur={getEmail}
type="email"
placeholder="Your Email"
/>
<input
onBlur={getPassword}
type="password"
placeholder="Password"
required
/>
<input
onClick={() => signInWithEmailAndPassword(email, password)}
type="submit"
value="Log In"
/>
</div>
);
};
Solution 1:[1]
Try this out instead of the if statement,
const [user] = useAuthState(auth);
const [signInWithEmailAndPassword, user, loading, error] =
useSignInWithEmailAndPassword(auth);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const getEmail = (event) => {
setEmail(event.target.value);
};
const getPassword = (event) => {
setPassword(event.target.value);
};
return (
<div className="form-area">
<input
onBlur={getEmail}
type="email"
placeholder="Your Email"
/>
<input
onBlur={getPassword}
type="password"
placeholder="Password"
required
/>
{error?.message ? (
<p
className="text-danger"
style={{
fontSize: "12px",
fontWeight: "bolder",
textAlign: "left",
}}
>
Wrong password. Try again!
</p>
) : (
""
)}
<input
onClick={() => signInWithEmailAndPassword(email, password)}
type="submit"
value="Log In"
/>
</div>
);
};
Following is the documentation of React Firebase Hooks
. You can find about displaying error message there.
https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth#useauthstate
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |