Firebase邮箱链接登录后用户未认证问题排查

针对你遇到的点击登录链接后未完成认证的问题，结合提供的代码，从sendSignInLinkToEmail逻辑及后续流程逐一排查：

1. 修正异步流程中的setSubmitting调用位置 #

当前代码中setSubmitting(false)直接写在sendSignInLinkToEmail调用之后，会导致请求还未完成就将表单状态设为非提交状态，虽不直接影响认证，但属于异步逻辑错误，应移至then和catch回调内：

onSubmit={(values, { setSubmitting }) => {
  sendSignInLinkToEmail(auth, values.email, actionCodeSettings)
    .then(() => {
      window.localStorage.setItem("emailForSignIn", values.email);
      setAlertLabel("A sign-in link has been sent to your email");
      setSubmitting(false); // 移到请求成功后执行
    })
    .catch((error) => {
      console.error("发送登录链接失败:", error); // 新增错误日志，便于定位问题
      setAlertLabel(
        "Something went wrong while sending the sign-in link. Please try again later"
      );
      setSubmitting(false); // 移到请求失败后执行
    });
}}

2. 完善actionCodeSettings配置检查 #

• 确认url对应的域名http://localhost:3000已添加到Firebase控制台的认证 > 登录方法 > 授权域列表中，未添加会导致链接验证失败。
• 若你的认证处理逻辑在特定路由（比如/sign-in-callback），建议将url指向该路由，便于集中处理链接回调：

const actionCodeSettings = {
  url: "http://localhost:3000/sign-in-callback",
  handleCodeInApp: true,
};

3. 关键缺失：跳转后页面的认证完成逻辑 #

sendSignInLinkToEmail仅负责发送登录链接，必须在用户跳转回应用后，调用signInWithEmailLink完成认证，这是你当前缺失的核心步骤：

在指定的回调页面（比如/sign-in-callback）添加以下逻辑：

import { signInWithEmailLink, getAuth } from "firebase/auth";

const auth = getAuth();
const email = window.localStorage.getItem("emailForSignIn");

// 检查当前URL是否包含登录链接的验证参数
if (email && window.location.href.includes("oobCode")) {
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // 认证成功，可获取用户信息
      console.log("登录成功:", result.user);
      // 清理本地存储的邮箱
      window.localStorage.removeItem("emailForSignIn");
    })
    .catch((error) => {
      console.error("登录认证失败:", error);
      // 处理错误，比如提示用户链接无效或已过期
    });
}

4. 细化错误日志排查 #

当前catch块未输出具体错误信息，无法定位发送链接阶段的问题，建议添加console.error打印错误详情，比如是否是邮箱格式错误、API权限配置问题等。

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