React Native(Expo)监听Firebase用户emailVerified状态方案问询

核心思路是结合Firebase动态链接（处理验证链接唤起App）和Auth状态监听+主动刷新用户信息，替代轮询方案，实现验证状态变更后的实时页面跳转。

实现步骤与代码示例 #

1. 安装依赖 #

npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/dynamic-links

2. 配置Firebase动态链接 #

在Firebase控制台创建动态链接前缀，发送验证邮件时指定该链接，确保点击验证链接能唤起App：

// 注册后发送验证邮件的代码
const sendVerificationEmail = async (user) => {
  const actionCodeSettings = {
    url: 'https://yourapp.page.link/verify-email', // 你的Firebase动态链接前缀
    handleCodeInApp: true,
    iOS: { bundleId: 'com.yourapp.ios' },
    android: { packageName: 'com.yourapp.android' }
  };
  await user.sendEmailVerification(actionCodeSettings);
};

3. 监听验证状态与深度链接 #

在App入口文件（如App.js）中实现核心逻辑：

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import auth from '@react-native-firebase/auth';
import dynamicLinks from '@react-native-firebase/dynamic-links';

// 验证提示页面
const VerifyEmailScreen = () => {
  const user = auth().currentUser;

  const resendVerification = async () => {
    if (user) await user.sendEmailVerification();
  };

  return (
    // 你的页面UI：提示验证、修改邮箱、重发邮件按钮
  );
};

// 首页
const HomeScreen = () => {
  return (
    // 你的首页UI
  );
};

// 注册/登录页
const AuthScreen = () => {
  return (
    // 你的注册登录UI
  );
};

const Stack = createNativeStackNavigator();

const App = () => {
  const [initialRoute, setInitialRoute] = useState('Auth');
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // 监听Auth状态变化
    const authUnsubscribe = auth().onAuthStateChanged(async (user) => {
      if (user) {
        setCurrentUser(user);
        await user.reload();
        // 初始加载时判断验证状态
        setInitialRoute(user.emailVerified ? 'Home' : 'VerifyEmail');
      } else {
        setInitialRoute('Auth');
      }
    });

    // 监听App运行中收到的深度链接（验证链接唤起App时触发）
    const linkUnsubscribe = dynamicLinks().onLink(async () => {
      if (currentUser) {
        await currentUser.reload();
        if (currentUser.emailVerified) setInitialRoute('Home');
      }
    });

    // 处理App冷启动时的深度链接
    const checkInitialLink = async () => {
      const initialLink = await dynamicLinks().getInitialLink();
      if (initialLink && currentUser) {
        await currentUser.reload();
        if (currentUser.emailVerified) setInitialRoute('Home');
      }
    };

    checkInitialLink();

    return () => {
      authUnsubscribe();
      linkUnsubscribe();
    };
  }, [currentUser]);

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Auth" component={AuthScreen} />
        <Stack.Screen name="VerifyEmail" component={VerifyEmailScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

4. 可选优化 #

如果担心深度链接异常，可以在VerifyEmailScreen中保留短间隔（如3-5秒）的轻量轮询作为 fallback，但主要依赖深度链接触发刷新，平衡体验与可靠性。

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