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

【问题标题】：Firebase Passwordless Email Authentication Error in Expo AppExpo App 中的 Firebase 无密码电子邮件身份验证错误
【发布时间】：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);
    }
  }
};

【问题讨论】：

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

标签： reactjs firebase react-native firebase-authentication expo

【解决方案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)
  }
}, [])

【讨论】：