Firebase Authentication的sendEmailVerification本地开发环境无法发送验证邮件求助

我目前正在开发一个使用Firebase Authentication服务的应用，在用户通过createUserWithEmailAndPassword注册后，调用Firebase的sendEmailVerification实现邮箱验证功能，现在用Firebase Emulator Suite做测试。

运行时应用没有报错，但我在收件箱和垃圾邮件里都收不到验证邮件。部署到托管域名后能正常收到邮件，但本地开发环境不行，我已经把localhost添加到了授权域名里，不知道还有什么配置需要调整？

以下是我调用sendEmailVerification的代码片段：

// Submit form
try {
  switch (formType) {
    case "signIn":
      let signInResult = await signInWithEmailAndPassword(
        auth,
        email,
        password
      )
      userObject = signInResult.user
      toaster.create({
        title: "Signed in successfully.",
        type: "success",
        duration: 3500
      })
      break
    case "signUp":
      // Sign up user
      let signUpResult = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      )
      userObject = signUpResult.user
      // Update user profile with a random username

      console.log(
        "Attempting to send email verification",
        userObject,
        actionCodeSettings
      )
      await sendEmailVerification(userObject)
      toaster.create({
        title: "Email verification sent to your inbox.",
        type: "success",
        duration: 3500
      })

      await updateProfile(signUpResult.user, {
        displayName: generateUsername()
      })
      console.log("SUCCESSFULLY SIGNED UP")
      setSignedUp(true)
      toaster.create({
        title: "Signed up successfully.",
        type: "success",
        duration: 3500
      })
      break
    case "forgetPassword":
      await sendPasswordResetEmail(auth, email)
      toaster.create({
        title: "Password reset email sent.",
        type: "success",
        duration: 3500
      })
      break
    default:
      break
  }

  // If user is signing in or signing up, submit journal entries
  if (["signIn", "signUp"].includes(formType)) {
    await handleJournalSubmission(userObject, "qotd")
    await handleJournalSubmission(userObject, "thought")
  }
} catch (error) {
  const firebaseError = error as AuthError
  toaster.create({
    title: "An error has occurred.",
    description: firebaseError.code,
    type: "error",
    duration: 3500
  })
} finally {
  // resetForm()
  // isOpen.update(false)
}

排查和解决方向 #

我之前开发时也碰到过类似的本地收不到验证邮件的问题，给你几个实用的排查点：

• 检查Firebase模拟器的邮件管理界面
  当使用Firebase Emulator Suite时，验证邮件并不会真的发送到你的真实邮箱，而是会被模拟器拦截并存储在模拟器的UI里。你可以打开Firebase模拟器控制台（通常是http://localhost:4000），进入Authentication模拟器的「Email Actions」标签页，这里会显示所有发送的验证邮件，直接点击里面的链接就能完成验证，不用等真实邮箱接收。

• 补充Action Code Settings配置
  看你的代码里打印了actionCodeSettings但调用sendEmailVerification时没有传入这个参数，本地开发时最好明确配置这个参数，指定验证链接的跳转地址为localhost，同时开启应用内处理：

  const actionCodeSettings = {
    url: 'http://localhost:3000/your-verify-page', // 替换成你的本地验证页面地址
    handleCodeInApp: true,
  };
  await sendEmailVerification(userObject, actionCodeSettings);
  

• 确认Auth模拟器的初始化配置
  确保你的本地代码正确连接了Firebase Auth模拟器，在初始化Auth后添加模拟器连接代码：

  // 仅在开发环境连接模拟器
  if (import.meta.env.MODE === 'development') {
    connectAuthEmulator(auth, "http://localhost:9099");
  }
  

  注意端口号要和你启动模拟器时的Auth端口一致，默认是9099。

• 检查控制台的邮箱模板状态
  虽然部署后能正常发送，但还是建议去Firebase控制台的Authentication > 模板页面，确认「邮箱验证」模板处于启用状态，没有被禁用或设置了异常的发送规则。

备注：内容来源于stack exchange，提问作者howranwin