Expo App 中的 Firebase 无密码电子邮件身份验证错误

Posted 2023-02-19

【中文标题】Expo App 中的 Firebase 无密码电子邮件身份验证错误

【英文标题】：Firebase Passwordless Email Authentication Error in Expo App

【发布时间】：2021-11-14 13:25:29

【问题描述】：

我正在使用 Firebase SDK 在我的 Expo 应用中设置无密码身份验证。我已经到了将电子邮件发送到用户所需地址的地步，并带有返回应用程序的重定向链接。当用户点击链接时，他们确实被重定向但他们没有被认证。我在控制台中收到一般错误：

ERROR: [Error: An internal error has occurred.]

但我知道我的凭据正在正确传递，因为我在函数运行时已将它们注销：

isSignInWithEmailLink:true, url: exp://10.0.0.27:19000?apiKey=AIzaSyAmpd5DdsjOb-MNfVH3MgF1Gn2nT3TBcnY&oobCode=7FJTfBjM28gkn6GfBSAdgAk7wOegg9k4D5poVcylhSYAAAF8BO5gHQ&mode=signIn&lang=en

我在这个函数上调用useEffect：

useEffect(() => 
  signInWithEmailLink();
, []);

发送链接到电子邮件（工作中）

const sendSignInLinkToEmail = (email) => 
  return auth
    .sendSignInLinkToEmail(email, 
      handleCodeInApp: true,
      url: proxyUrl,
    )
    .then(() => 
      return true;
    );
;

用户单击电子邮件中的链接以重定向到应用程序以进行身份​​验证（不工作）

const signInWithEmailLink = async () => 
  const url = await Linking.getInitialURL();
  if (url) 
    handleUrl(url);
  

  Linking.addEventListener('url', ( url ) => 
    handleUrl(url);
  );
;

（返回错误）

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);
    
  
;

【问题讨论】：

你设法让它工作了吗？我正在尝试做同样的事情

【参考方案1】：

您应该在useEffect 中使用onAuthStateChanged，而不是尝试在该时间点让用户登录。 useEffect 用于当您需要根据更改重新渲染页面时。

例如：

  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;
  , []);

您应该通过其他方式调用用户登录方法，例如用于登录的按钮，或在您的应用中的某个其他位置验证用户凭据。

自定义函数：

  const onLogin = async () => 
    try 
      if (email !== '' && password !== '') 
        await auth.signInWithEmailAndPassword(email, password);
      
     catch (error) 
      setLoginError(error.message);
    
  ;

来源：https://blog.jscrambler.com/how-to-integrate-firebase-authentication-with-an-expo-app

【讨论】：

谢谢我已经有了这个

身份验证是一个异步进程，您的 useEffect 中不能有异步进程 - 您正在从 useEffect 调用登录，这不是它的设计目的，这也可能导致元素无法登录而不是从身份验证的refresh_token重新实例化现有用户@

【参考方案2】：

您是否在 Firebase 控制台中启用了电子邮件登录？ 您是否将电子邮件存储在 localStorage 中？它在您的逻辑中看起来未定义。 你的听众应该在useEffect钩子里。

我的代码如下所示：

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)
  
, [])