Firebase邮件链接登录用localhost域名遇invalid-dynamic-link-domain错误

问题背景 #

本地Windows环境运行Node服务，邮箱密码登录功能正常，但邮件链接登录始终失败，具体情况如下：

初始配置与报错 #

初始使用的actionCodeSettings配置：

const actionCodeSettings = {
    url: 'http://localhost:5173/',
    handleCodeInApp: true,
    iOS: {
        bundleId: 'com.example.ios'
    },
    android: {
        packageName: 'com.example.android',
        installApp: true,
        minimumVersion: '12'
    },
    dynamicLinkDomain: 'localhost'
};

调用代码：

sendSignInLinkToEmail(auth, email, actionCodeSettings)
     .then(() => {
         window.localStorage.setItem('emailForSignIn', email);
     })
     .catch((error) => {
         const errorCode = error.code;
         console.error(error.code);
         const errorMessage = error.message;
         setText(error.message);
     });

已将localhost加入Firebase授权域名列表，但仍触发invalid-dynamic-link-domain错误，修改url和dynamicLinkDomain为其他域名也无法解决。

简化配置后的现象 #

将配置简化为以下内容后：

const actionCodeSettings = {
    url: 'http://localhost:5173/',
    handleCodeInApp: true
};

邮件可以正常发送，但生成的登录链接为.firebaseapp.com域名，对比YouTube示例未发现明显差异，仍无法完成本地登录流程。

问题原因与解决办法 #

1. dynamicLinkDomain配置错误（核心原因） #

localhost不能作为Firebase动态链接域名，动态链接域名必须是Firebase官方分配或你在控制台配置的合法域名：

• 登录Firebase控制台，进入动态链接页面，获取项目已配置的动态链接域名（默认格式为[你的项目ID].page.link）。
• 将actionCodeSettings中的dynamicLinkDomain替换为该合法域名，示例：

  const actionCodeSettings = {
      url: 'http://localhost:5173/',
      handleCodeInApp: true,
      dynamicLinkDomain: 'your-project-id.page.link'
  };
  

2. 混淆授权域名与动态链接域名 #

授权域名是用于OAuth登录跳转的白名单，而动态链接域名是Firebase专门用于生成邮件/短信登录链接的域名，两者完全独立。即使localhost在授权域名列表中，也不能直接用作dynamicLinkDomain。

3. 简化配置后的链接处理 #

去掉dynamicLinkDomain后，Firebase会使用默认的.firebaseapp.com域名生成链接，这是正常行为，但需要确保：

• 本地服务http://localhost:5173可以正常访问，且页面加载后能正确执行以下代码完成登录：

  const auth = getAuth();
  if (isSignInWithEmailLink(auth, window.location.href)) {
      let email = window.localStorage.getItem('emailForSignIn');
      if (!email) {
          email = prompt('请输入你的邮箱：');
      }
      signInWithEmailLink(auth, email, window.location.href)
          .then((result) => {
              window.localStorage.removeItem('emailForSignIn');
              // 登录成功逻辑
          })
          .catch((error) => {
              // 错误处理
          });
  }
  

• 检查浏览器是否拦截了邮件中的链接，或链接参数是否被篡改。

4. 本地测试额外注意事项 #

• 确保handleCodeInApp始终设为true，否则链接会直接跳转到url指定地址而不触发应用内登录逻辑。
• 如果使用自定义域名作为动态链接，需在Firebase控制台完成域名验证和DNS配置。

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