如何在React项目中基于Firebase Auth实现注册邮箱验证

1. 确认Firebase Auth基础配置 #

先确保你的Firebase项目中：

• 已启用「邮箱/密码」登录方式
• 在Auth的「模板」页面配置好邮箱验证模板（和密码找回模板逻辑一致，确保模板可正常发送）

2. 修改注册逻辑，添加验证邮件发送 #

在你的注册函数中，完成用户创建后立即调用Firebase的sendEmailVerification方法。示例代码如下：

import { getAuth, createUserWithEmailAndPassword, sendEmailVerification } from "firebase/auth";

const handleRegister = async (email, password) => {
  const auth = getAuth();
  try {
    // 创建新用户
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    
    // 发送邮箱验证链接，可自定义跳转地址
    await sendEmailVerification(user, {
      url: `${window.location.origin}/verify-email`
    });
    
    // 给用户提示
    alert('注册成功！请查收邮箱中的链接完成验证');
    // 可在此跳转至登录页或验证等待页
  } catch (error) {
    console.error('注册失败:', error.message);
    alert('注册失败：' + error.message);
  }
};

3. 实现验证页面逻辑 #

用户点击邮件链接后，会跳转到你指定的/verify-email页面，这里需要检查用户的验证状态：

import { useEffect, useState } from 'react';
import { getAuth, onAuthStateChanged, reload } from "firebase/auth";
import { useNavigate } from 'react-router-dom';

const VerifyEmailPage = () => {
  const [isVerified, setIsVerified] = useState(false);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();
  const auth = getAuth();

  useEffect(() => {
    const checkVerificationStatus = async () => {
      const user = auth.currentUser;
      if (user) {
        // 重新加载用户信息，确保获取最新验证状态
        await reload(user);
        setIsVerified(user.emailVerified);
        // 验证成功后跳转至首页/用户面板
        if (user.emailVerified) {
          setTimeout(() => navigate('/dashboard'), 2000);
        }
      } else {
        // 用户未登录，跳转至登录页
        navigate('/login');
      }
      setLoading(false);
    };

    // 监听用户登录状态变化
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) checkVerificationStatus();
    });

    return unsubscribe;
  }, [auth, navigate]);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="verify-container">
      {isVerified ? (
        <div>邮箱验证成功！即将跳转到首页...</div>
      ) : (
        <div>
          <p>请点击邮箱中的链接完成验证</p>
          <button onClick={handleResendVerification}>重新发送验证邮件</button>
        </div>
      )}
    </div>
  );

  // 重新发送验证邮件的函数
  async function handleResendVerification() {
    const user = auth.currentUser;
    if (user) {
      try {
        await sendEmailVerification(user, {
          url: `${window.location.origin}/verify-email`
        });
        alert('验证邮件已重新发送');
      } catch (err) {
        console.error('重发失败:', err.message);
      }
    }
  }
};

export default VerifyEmailPage;

4. 配置路由（基于React Router） #

在路由配置中添加验证页面的路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import VerifyEmailPage from './pages/VerifyEmailPage';
// 导入其他页面组件

function App() {
  return (
    <Router>
      <Routes>
        {/* 其他路由 */}
        <Route path="/verify-email" element={<VerifyEmailPage />} />
      </Routes>
    </Router>
  );
}

关键注意事项 #

• 确保Firebase Auth的「授权域」已添加你的React应用域名，否则邮件链接会无效
• 自定义跳转url必须是已授权的域名，否则Firebase会拒绝发送邮件
• 处理错误时，直接给用户明确提示（如邮箱已注册、密码强度不足等）

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