[英]React Firebase is not returning error message even after giving wrong input
I am using React Firebase hook to log in to my website.我正在使用 React Firebase 挂钩登录我的网站。 when trying to log in with the wrong email or password in the login form, an error message will be returned from the React firebase hook.当尝试在登录表单中使用错误的电子邮件或密码登录时,将从 React Firebase 挂钩返回错误消息。 But even after giving the wrong input, an error message is not returning但即使在输入错误后,错误消息也不会返回
const Login = () => {
const [signInWithEmailAndPassword, error] =
useSignInWithEmailAndPassword(auth);
const location = useLocation();
const navigate = useNavigate();
const from = location?.state?.from?.pathname || '/';
if (error) {
return (
<div>
<p>Error: {error.message}</p>
</div>
);
}
const handleLogIn = (e) => {
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
signInWithEmailAndPassword(email, password)
e.target.reset();
navigate(from, { replace: true })
}
The signInWithEmailAndPassword
appears to be an async
function and your code isn't waiting for the returned Promise to resolve. signInWithEmailAndPassword
似乎是一个async
函数,您的代码没有等待返回的 Promise 解决。 I'm guessing you are seeing the navigate("/");
我猜你看到的是navigate("/");
called and the app is navigating to the home page.调用并且应用程序正在导航到主页。
const handleLogIn = (e) => {
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
signInWithEmailAndPassword(email, password); // <-- no waiting for promise
e.target.reset();
navigate(from, { replace: true }); // <-- navigate away
};
useSignInWithEmailAndPassword 使用SignInWithEmailAndPassword
export default (auth: Auth): EmailAndPasswordActionHook => { const [error, setError] = useState<AuthError>(); const [loggedInUser, setLoggedInUser] = useState<UserCredential>(); const [loading, setLoading] = useState<boolean>(false); const signInWithEmailAndPassword = async ( email: string, password: string ) => { setLoading(true); setError(undefined); try { const user = await firebaseSignInWithEmailAndPassword( auth, email, password ); setLoggedInUser(user); } catch (err) { setError(err as AuthError); } finally { setLoading(false); } }; const resArray: EmailAndPasswordActionHook = [ signInWithEmailAndPassword, loggedInUser, loading, error, ]; return useMemo<EmailAndPasswordActionHook>(() => resArray, resArray); };
The handleLogin
handler should probably wait for the Promise to settle so any errors can be returned by the hook. handleLogin
处理程序可能应该等待 Promise 解决,以便挂钩可以返回任何错误。 It turns out though that signInWithEmailAndPassword
also doesn't return any resolve/rejected values, so there's no way to know the authentication was successful from within the handleLogIn
callback function, the component will need to use the hook's returned loading
and loggedInUser
states to determine if it is safe to navigate.事实证明,虽然signInWithEmailAndPassword
也没有返回任何解析/拒绝值,因此无法从handleLogIn
回调函数中知道身份验证是否成功,组件将需要使用钩子返回的loading
和loggedInUser
状态来确定是否导航是安全的。
Example:例子:
const Login = () => {
const [
signInWithEmailAndPassword,
loggedInUser,
loading,
error,
] = useSignInWithEmailAndPassword(auth);
const location = useLocation();
const navigate = useNavigate();
const from = location?.state?.from?.pathname || '/';
useEffect(() => {
if (!loading && loggedInUser) {
navigate(from, { replace: true });
}, [loggedInUser, loading, navigate, from]);
if (error) {
return (
<div>
<p>Error: {error.message}</p>
</div>
);
}
const handleLogIn = (e) => {
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
signInWithEmailAndPassword(email, password)
e.target.reset();
}
...
You are using signInWithEmailAndPassword
hook incorrectly.您错误地使用signInWithEmailAndPassword
挂钩。 signInWithEmailAndPassword
returns an array & 3th index is of error message. signInWithEmailAndPassword
返回一个数组,第三个索引是错误消息。
You can follow this: https://github.com/CSFrequency/react-firebase-hooks/blob/master/auth/README.md#usesigninwithemailandpassword你可以按照这个: https ://github.com/CSFrequency/react-firebase-hooks/blob/master/auth/README.md#usesigninwithemailandpassword
const [
signInWithEmailAndPassword,
user,
loading,
error,
] = useSignInWithEmailAndPassword(auth);
Since, useSignInWithEmailAndPassword
returns an Array, We need to extract/destructure the value from respective index.由于useSignInWithEmailAndPassword
返回一个数组,我们需要从各个索引中提取/解构该值。
Apart from that, You must also use loading
to display whether firebase is still authorizing the request or not (Loading State).除此之外,您还必须使用loading
来显示 firebase 是否仍在授权请求(加载状态)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.