React Native注册后如何发送邮件验证并仅在用户点击验证后返回成功

你使用的是React Native Firebase的auth认证模块，实现该需求需要拆分两步逻辑：先在注册完成后触发验证邮件发送，再单独校验用户的邮箱验证状态，无法在单次注册请求中同步等待用户点击验证链接后再返回（用户操作间隔不可控，请求无法长时间挂起）。

1. 修改注册方法，新增验证邮件发送逻辑 #

修改AuthProvider.js中的registerWithEmail方法如下：

registerWithEmail: async (userDetails) => {
  const { email, password } = userDetails;
  try {
    // 创建用户账号
    const userCredential = await auth().createUserWithEmailAndPassword(email, password);
    const currentUser = userCredential.user;
    // 发送验证邮件，支持自定义邮件跳转规则
    await currentUser.sendEmailVerification();
    // 此处返回邮件发送成功状态，而非最终验证通过状态
    return {
      success: true,
      emailVerified: currentUser.emailVerified,
      msg: "验证邮件已发送，请前往邮箱点击验证链接完成注册"
    }
  } catch (err) {
    return {
      success: false,
      errMsg: err.message
    }
  }
}

2. 校验邮箱验证状态 #

你可以根据业务需求选择两种校验方式：

手动触发校验 #

在注册完成的引导页添加「我已完成验证」按钮，点击时调用以下方法获取最新验证状态，返回true即可走后续的应用准入逻辑：

// 可直接添加到AuthContext的方法列表中
checkEmailVerified: async () => {
  const currentUser = auth().currentUser;
  if (!currentUser) return false;
  // 刷新用户的最新状态
  await currentUser.reload();
  return currentUser.emailVerified;
}

自动监听校验 #

在应用全局或者注册引导页添加auth状态监听器，用户完成邮箱验证后回到APP时会自动触发校验：

// 注册引导页的hooks写法示例
useEffect(() => {
  const authListener = auth().onAuthStateChanged(async (user) => {
    if (user) {
      await user.reload();
      if (user.emailVerified) {
        // 验证通过，直接跳转进应用首页或者执行后续逻辑
        console.log("邮箱验证完成");
      }
    }
  });
  // 页面卸载时销毁监听器
  return authListener;
}, [])

注意事项 #

• 可以在Firebase控制台自定义验证邮件的模板、跳转链接，配置deep link后可以实现用户点击验证链接直接拉起APP，自动完成校验流程
• 若要限制未验证用户使用应用功能，可在所有需要鉴权的逻辑前先判断user.emailVerified状态，不满足则引导用户重新发送验证邮件或者去邮箱操作

内容的提问来源于stack exchange，提问作者Moo Zhen Cong