React Native中如何监听Firebase邮箱确认链接点击事件？

嘿，刚好我之前做过类似的功能，给你一步步捋清楚怎么实现！

你已经配置了actionCodeSettings并且成功发送了验证邮件，接下来核心就是在App中监听链接打开事件，然后用Firebase的API完成验证流程，具体步骤如下：

1. 先把待验证的邮箱存到本地 #

用户点击验证链接的时候，App不知道这个链接对应哪个用户的邮箱，所以在发送验证邮件的同时，要把邮箱保存到本地存储（比如AsyncStorage）：

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

// 你的发送邮件代码修改后
const testMail = 'myMail@gmail.com';
const actionCodeSettings = {
  url: "https://myApp.page.link/__/auth/verify",
  handleCodeInApp: true,
  iOS: { bundleId: "myApp.firebase.ios" },
  android: { packageName: "myApp.firebase.android", installApp: true, minimumVersion: "16" }
};

firebase
  .auth()
  .sendSignInLinkToEmail(testMail, actionCodeSettings)
  .then(async () => {
    // 把邮箱存到本地，后续验证用
    await AsyncStorage.setItem('pendingVerifyEmail', testMail);
    console.log('验证邮件已发送，请查收');
  })
  .catch(error => { console.log('发送失败:', error) });

2. 在App入口监听链接打开事件 #

不管用户是刚安装App点击链接，还是App后台运行时点击链接，都需要捕获这个URL。我们用React Native自带的Linking模块来实现：

import { Linking, useEffect } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import firebase from './path/to/your/firebase/config'; // 你的Firebase配置文件

function App() {
  useEffect(() => {
    // 处理App启动时的初始URL
    const checkInitialUrl = async () => {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl) {
        await handleVerificationLink(initialUrl);
      }
    };

    // 处理App运行中打开的URL
    const handleUrlOpen = async ({ url }) => {
      if (url) {
        await handleVerificationLink(url);
      }
    };

    // 注册监听
    const linkSubscription = Linking.addEventListener('url', handleUrlOpen);
    checkInitialUrl();

    // 组件卸载时清理监听
    return () => linkSubscription.remove();
  }, []);

  // 核心处理验证链接的函数
  const handleVerificationLink = async (url) => {
    // 先判断这个URL是不是Firebase的邮箱验证链接
    if (firebase.auth().isSignInWithEmailLink(url)) {
      try {
        // 取出之前保存的邮箱
        const savedEmail = await AsyncStorage.getItem('pendingVerifyEmail');
        if (!savedEmail) {
          throw new Error('找不到待验证的邮箱，请重新发送验证邮件');
        }

        // 调用Firebase API完成验证（同时会自动登录用户）
        const userCredential = await firebase.auth().signInWithEmailLink(savedEmail, url);
        
        // 验证成功后，清除本地保存的邮箱
        await AsyncStorage.removeItem('pendingVerifyEmail');

        console.log('邮箱验证成功！当前用户:', userCredential.user);
        // 这里可以跳转到首页、个人中心等页面
      } catch (err) {
        console.error('验证失败:', err.message);
        // 给用户提示错误信息，比如链接无效、已过期等
      }
    }
  };

  // 你的App页面内容...
  return (
    // ...
  );
}

export default App;

3. 关键注意点 #

• 深度链接配置：你用的是Firebase动态链接，要确保已经在Firebase控制台完成了iOS的Universal Links和Android的App Links配置，不然点击链接可能会跳转到浏览器而不是你的App。
• 跨设备验证：如果用户在其他设备点击链接，actionCodeSettings里的installApp: true会引导用户安装App，安装后打开App时，getInitialURL()依然能获取到验证链接，不影响流程。
• 验证状态检查：验证成功后，用户的emailVerified属性会变成true，之后你可以通过firebase.auth().currentUser.emailVerified来判断用户邮箱是否已验证。

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