Expo应用集成Firebase无密码邮箱认证跳转后无法鉴权报内部错误

核心报错原因 #

1. 调用auth.signInWithEmailLink(email, url)时传入的email参数无效/未正确持久化：Firebase要求无密码登录时传入的邮箱必须和发送验证链接时的邮箱完全一致，当前代码没有将用户输入的邮箱做持久化存储，当用户点击邮件跳转回应用时（尤其是应用被后台杀死后重新唤醒），email变量上下文丢失、为空值，直接调用接口就会触发内部错误。
2. Firebase控制台未添加Expo开发环境的域名授权：当前跳转用的exp://10.0.0.27:19000这类本地开发地址，默认不在Firebase认证的授权域名列表里，会被系统拦截。
3. 次要触发原因：Linking事件监听未做清理，重复触发导致同一个一次性oobCode被多次调用验证，也会触发报错。

修复方案 #

• 新增邮箱持久化逻辑，用户提交邮箱发送验证链接时，将邮箱存入本地持久化存储：

import AsyncStorage from '@react-native-async-storage/async-storage';

const sendSignInLinkToEmail = (email) => {
  return auth
    .sendSignInLinkToEmail(email, {
      handleCodeInApp: true,
      url: proxyUrl,
    })
    .then(() => {
      // 持久化存储登录邮箱
      AsyncStorage.setItem('signInEmail', email);
      return true;
    });
};

• 跳转验证时优先从本地存储读取邮箱再调用验证接口：

const handleUrl = async (url) => {
  const isSignInWithEmailLink = auth.isSignInWithEmailLink(url);
  console.log('isSignInWithEmailLink: ', isSignInWithEmailLink, 'url', url);

  if (isSignInWithEmailLink) {
    try {
      // 从本地存储读取发送时存入的邮箱
      const email = await AsyncStorage.getItem('signInEmail');
      if (!email) throw new Error('未找到登录邮箱，请重新发送验证链接');
      await auth.signInWithEmailLink(email, url);
      // 验证成功后清除存储的邮箱
      await AsyncStorage.removeItem('signInEmail');
    } catch (error) {
      console.log('ERROR:', error);
    }
  }
};

• 登录Firebase控制台，进入「Authentication」-「设置」-「授权域」，添加你当前使用的Expo开发IP10.0.0.27，生产环境需额外添加应用对应的包名关联域名。
• 补充useEffect的事件清理逻辑，避免重复监听：

useEffect(() => {
  signInWithEmailLink();
  // 组件卸载时移除所有url监听
  return () => {
    Linking.removeAllListeners('url');
  };
}, []);

内容的提问来源于stack exchange，提问作者Brandon Austin