[英]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.我正在尝试使用 firebase 添加 firebase 电子邮件密码身份验证并响应 firebase 挂钩。 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>
);
};
Try this out instead of the if statement,试试这个而不是 if 语句,
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
.以下是
React Firebase Hooks
的文档。 You can find about displaying error message there.您可以在此处找到有关显示错误消息的信息。
https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth#useauthstate https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth#useauthstate
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.