如何使用firebase/auth在react-native(Expo)中实现邮箱验证后无需落地页自动登录

问题本质 #

onAuthStateChanged 仅在用户登录、登出状态切换时触发，邮箱验证是服务端状态变更，客户端本地缓存的用户信息不会自动同步，因此不会触发该事件。

最优解决方案 #

使用 continueLink + 深度链接实现实时跳转验证，完全不需要额外落地页，完美适配Expo环境： #

1. 配置App深度链接

先在Expo项目的app.json中配置自定义scheme，用于唤起你的App：

{
  "expo": {
    "scheme": "yourapp" // 替换为你自己的应用标识，比如mychat、noteapp等
  }
}

2. 修改验证邮件发送逻辑

给sendEmailVerification传入actionCodeSettings配置，指定验证完成后跳回你的App：

export const signUp = async (username: string, email: string, password: string) => {
    try {
        const auth = getAuth();
        if (email && password && username) {
            // 注册
            const userCredential = await createUserWithEmailAndPassword(auth, email, password);
            // 保存用户名到Firestore
            await setUserName(userCredential, username);
            // 配置验证邮件跳转参数
            const actionCodeSettings = {
              url: 'yourapp://verify-email', // 替换为你上一步配置的scheme+自定义路径
              handleCodeInApp: true,
              // 按需填写iOS/安卓包名，避免跳转到应用商店
              iOS: { bundleId: 'com.yourapp.ios' },
              android: { 
                packageName: 'com.yourapp.android',
                installApp: true,
                minimumVersion: '1'
              }
            };
            // 发送带跳转配置的验证邮件
            await sendEmailVerification(userCredential.user, actionCodeSettings);
            return true;
        }
    } catch (error) {
        onError(error);
    }
};

3. 监听App回跳事件完成验证

在你全局处理Auth状态的组件中，添加深度链接监听，用户点击验证链接跳回App时自动完成状态同步：

import { Linking } from 'react-native';
import { getAuth, applyActionCode } from 'firebase/auth';

// 放在你的根组件或者Auth上下文组件中
useEffect(() => {
  const handleDeepLink = async (event) => {
    const link = event.url;
    const auth = getAuth();
    // 只处理邮箱验证的回跳链接
    if (link.includes('verify-email') && auth.currentUser) {
      // 提取链接中的验证参数
      const oobCode = new URL(link).searchParams.get('oobCode');
      if (!oobCode) return;
      try {
        // 提交验证code到Firebase
        await applyActionCode(auth, oobCode);
        // 刷新本地用户信息，同步最新的emailVerified状态
        await auth.currentUser.reload();
        // 手动更新用户状态，完成自动登录
        if (auth.currentUser.emailVerified) {
          setUser(auth.currentUser);
        }
      } catch (err) {
        console.log('邮箱验证失败：', err);
      }
    }
  };

  const linkSubscription = Linking.addEventListener('url', handleDeepLink);
  return () => linkSubscription.remove();
}, []);

轻量化备选方案 #

如果暂时不想配置深度链接，可以替换轮询方案为App切前台时主动刷新状态，只会在用户验证完邮箱切回App时触发一次，无多余请求，延迟极低：

import { AppState } from 'react-native';

useEffect(() => {
  const auth = getAuth();
  const handleAppStateChange = (state) => {
    // App从后台切回前台、且当前用户未验证时，刷新状态
    if (state === 'active' && auth.currentUser && !auth.currentUser.emailVerified) {
      auth.currentUser.reload().then(() => {
        if (auth.currentUser.emailVerified) {
          setUser(auth.currentUser);
        }
      });
    }
  };
  const appStateSubscription = AppState.addEventListener('change', handleAppStateChange);
  return () => appStateSubscription.remove();
}, []);

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