Firebase注册时邮箱验证未发送即提示失败问题求助

你遇到的问题是：调用createUserWithEmailAndPassword成功创建用户后，调用sendEmailVerification发送验证邮件，但邮件还没收到，控制台就输出了“Email verification failed”。

问题代码 #

const signUp = (e) => {
e.preventDefault();

createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Send email verification
    sendEmailVerification(userCredential.user)
      .then(() => {
        setVerificationPrompt('Check your email for verification');
        // Navigate to login only if email verification was successful
        if (userCredential.user.emailVerified) {
          navigate('/login');
        } else {
          console.log('Email verification failed');
        }
      })
      .catch((error) => {
        console.log('Error sending email verification:', error);
      });
  })
  .catch((error) => {
    console.log('Error creating user:', error);
  });
}

问题核心 #

sendEmailVerification只是完成了发送验证邮件的操作，并不会立刻更新用户的emailVerified状态——这个状态要等用户打开邮件、点击验证链接后才会变成true。你在发送邮件成功后立刻判断这个状态，此时用户根本还没机会完成验证，自然会误报“验证失败”。

修复方法 #

1. 删掉发送邮件成功后的emailVerified判断逻辑，因为这个时机下验证不可能完成。
2. 发送邮件成功后，只保留提示用户查收邮件的逻辑即可。
3. 如果需要在用户验证完成后跳转，可以在用户后续登录时检查emailVerified状态，或者监听Firebase的用户身份状态变化。

修正后的代码 #

const signUp = (e) => {
e.preventDefault();

createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Send email verification
    sendEmailVerification(userCredential.user)
      .then(() => {
        // 只提示用户查收邮件，不需要判断验证状态
        setVerificationPrompt('Check your email for verification');
      })
      .catch((error) => {
        console.log('Error sending email verification:', error);
      });
  })
  .catch((error) => {
    console.log('Error creating user:', error);
  });
}

如果要在用户验证完成后处理跳转，可以在登录页面添加检查逻辑：

// 登录时检查验证状态
const signIn = (e) => {
  e.preventDefault();
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      if (user.emailVerified) {
        navigate('/dashboard');
      } else {
        setVerificationPrompt('Please verify your email first');
      }
    })
    .catch((error) => {
      console.log('Error signing in:', error);
    });
}

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