已将域名加入白名单仍遇Firebase auth/unauthorized-domain登录失败问题

问题背景 #

本地React应用中Firebase弹窗登录功能正常，部署到render.com后，已在Firebase控制台将部署域名加入白名单，但仍触发auth/unauthorized-domain错误，导致登录失败。

错误信息 #

Login Failed: FirebaseError: Firebase: Error (auth/unauthorized-domain).
at St (assert.ts:136:61)
at kt (assert.ts:65:28)
at validate_origin.ts:46:3
at l (regeneratorRuntime.js:44:17)
at Generator. (regeneratorRuntime.js:125:22)
at Generator.next (regeneratorRuntime.js:69:21)
at y (asyncToGenerator.js:3:20)
at o (asyncToGenerator.js:22:9)

已完成的检查 #

• 确认加入白名单的域名与实际访问域名完全匹配
• 确认Firebase配置信息（apiKey、authDomain等）正确无误

问题重现步骤 #

• 在React应用中实现Firebase弹窗登录/注册功能
• 在Firebase控制台添加localhost到授权域名，验证本地登录功能正常
• 将代码推送至GitHub，从GitHub分支直接部署应用到render.com
• 将部署后的域名添加到Firebase授权域名列表
• 测试登录功能，触发上述错误

相关代码片段 #

firebase.js #

import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Firebase app configuration
const rFirebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx",
};

const rApp = initializeApp(rFirebaseConfig);
const rAuth = getAuth(rApp);
const rFirestore = getFirestore(rApp);

const authProvider = new GoogleAuthProvider();

export {
  authProvider,
  rAuth,
  rFirestore
};

（注：原代码存在两处问题：缺失initializeApp和getFirestore的导入语句，导出时拼写错误rFiresore，已修正）

LoginWithGoogle.js #

import { rAuth, authProvider } from "../../firebase";
import { signInWithPopup } from "firebase/auth";

signInWithPopup(rAuth, authProvider)
  .then((data) => {
    // 登录成功后的处理逻辑
  })
  .catch((error) => {
    console.log("Login Failed:", error); // 错误抛出位置
  })
  .finally(() => {
    setLoading(false); // 登录完成后设置加载状态为false
  });

解决方案 #

1. 核对授权域名的完整格式 #

Firebase要求授权域名必须包含完整协议前缀，确保添加的是https://your-app.onrender.com而非仅your-app.onrender.com；若应用支持带www的访问方式，需同时添加https://www.your-app.onrender.com。

2. 等待配置生效 #

Firebase的授权域名配置存在延迟，添加后等待5-10分钟再测试，避免立即刷新页面尝试登录。

3. 清除浏览器缓存 #

浏览器可能缓存了旧的Firebase配置，清除缓存和Cookie后重新访问应用，再测试登录功能。

4. 确认Render实际访问域名 #

检查Render部署后应用的实际访问地址，是否存在自动添加的后缀或自定义域名，确保白名单域名与实际地址完全一致。

5. 验证配置路径 #

确保是在Firebase控制台的Authentication > 设置 > 授权域名页面添加的域名，不要误操作到其他配置模块。

6. 修正代码中的潜在问题 #

先修复firebase.js中的导入缺失和拼写错误，避免因代码运行异常间接影响登录流程。

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