[英]Firebase Passwordless Email Authentication Error in Expo App
I am setting up passwordless Auth in my Expo app using the Firebase SDK.我正在使用 Firebase SDK 在我的 Expo 应用程序中设置无密码身份验证。 I've gotten to the point where emails are being sent to the user's desired address with a redirect link back to the app.
我已经到了将电子邮件发送到用户所需地址并带有返回应用程序的重定向链接的地步。 When the user clicks the link, they are indeed redirected but they are not being authenticated.
当用户点击链接时,他们确实被重定向,但他们没有被认证。 I am receiving a generic error in the console :
我在控制台中收到一个通用错误:
ERROR: [Error: An internal error has occurred.]
But I know that my credentials are passing through properly as I have logged them out when the function runs:但是我知道我的凭据正在正确传递,因为我在函数运行时已将它们注销:
isSignInWithEmailLink:true, url: exp://10.0.0.27:19000?apiKey=AIzaSyAmpd5DdsjOb-MNfVH3MgF1Gn2nT3TBcnY&oobCode=7FJTfBjM28gkn6GfBSAdgAk7wOegg9k4D5poVcylhSYAAAF8BO5gHQ&mode=signIn&lang=en
I am calling useEffect on this function:我在这个函数上调用 useEffect :
useEffect(() => {
signInWithEmailLink();
}, []);
Send Link To Email (WORKING)发送链接到电子邮件(工作)
const sendSignInLinkToEmail = (email) => {
return auth
.sendSignInLinkToEmail(email, {
handleCodeInApp: true,
url: proxyUrl,
})
.then(() => {
return true;
});
};
User clicks on a link from the email to redirect to the app to Authenticate (NOT WORKING)用户单击电子邮件中的链接以重定向到应用程序以进行身份验证(不工作)
const signInWithEmailLink = async () => {
const url = await Linking.getInitialURL();
if (url) {
handleUrl(url);
}
Linking.addEventListener('url', ({ url }) => {
handleUrl(url);
});
};
(RETURNING ERROR) (返回错误)
const handleUrl = async (url) => {
const isSignInWithEmailLink = auth.isSignInWithEmailLink(url);
console.log('isSignInWithEmailLink: ', isSignInWithEmailLink, 'url', url);
if (isSignInWithEmailLink) {
try {
await auth.signInWithEmailLink(email, url);
} catch (error) {
console.log('ERROR:', error);
}
}
};
You should use the onAuthStateChanged
within useEffect
rather than try and log the user in at that point in time.您应该在
onAuthStateChanged
中使用useEffect
而不是在那个时间点尝试让用户登录。 useEffect
is used when you need your page to re-render based on changes.当您需要根据更改重新呈现页面时,将使用
useEffect
。
For example:例如:
useEffect(() => {
// onAuthStateChanged returns an unsubscriber
const unsubscribeAuth = auth.onAuthStateChanged(async authenticatedUser => {
try {
await (authenticatedUser ? setUser(authenticatedUser) : setUser(null));
setIsLoading(false);
} catch (error) {
console.log(error);
}
});
// unsubscribe auth listener on unmount
return unsubscribeAuth;
}, []);
You should invoke the user sign in method through other means such as a button to sign in, or validate user credentials at some other point within your app.您应该通过其他方式调用用户登录方法,例如登录按钮,或在您的应用程序中的某个其他点验证用户凭据。
custom function:自定义功能:
const onLogin = async () => {
try {
if (email !== '' && password !== '') {
await auth.signInWithEmailAndPassword(email, password);
}
} catch (error) {
setLoginError(error.message);
}
};
Source: https://blog.jscrambler.com/how-to-integrate-firebase-authentication-with-an-expo-app来源: https : //blog.jscrambler.com/how-to-integrate-firebase-authentication-with-an-expo-app
useEffect
hook.useEffect
钩子中。 I've code my code working looking like this:我已经编码我的代码工作看起来像这样:
const handleGetInitialURL = async () => {
const url = await Linking.getInitialURL()
if (url) {
handleSignInUrl(url)
}
}
const handleDeepLink = (event: Linking.EventType) => {
handleSignInUrl(event.url)
}
useEffect(() => {
handleGetInitialURL()
Linking.addEventListener('url', handleDeepLink)
return () => {
Linking.removeEventListener('url', handleDeepLink)
}
}, [])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.