在Vercel部署的Next.js项目中Firebase Google验证弹窗秒关求助

核心原因 #

Firebase身份验证会严格校验请求来源的合法性，本地localhost是默认授权的，但Vercel部署的域名需要手动加入Firebase的授权列表，否则会被判定为非法来源，导致登录弹窗被直接拦截关闭。

步骤1：添加Vercel域名到Firebase授权列表 #

• 打开Firebase控制台，进入你的项目 → Authentication → 顶部的「设置」标签
• 找到「授权域名」板块，点击「添加域名」
• 输入你的Vercel部署域名（比如xxx.vercel.app，有自定义域名的话也一起添加），点击保存

步骤2：确认Firebase初始化配置正确性 #

检查你的Firebase初始化代码，确保authDomain和控制台里的项目域名完全一致，示例代码如下：

// 示例：firebase初始化文件（如firebase.js）
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的项目ID.firebaseapp.com", // 必须和Firebase控制台的authDomain一致
  projectId: "你的项目ID",
  storageBucket: "你的项目ID.appspot.com",
  messagingSenderId: "你的SenderID",
  appId: "你的AppID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

步骤3：配置Google登录提供商的重定向URI #

• 回到Firebase控制台的Authentication → 登录方法 → 找到「Google」提供商并点击编辑
• 查看「授权重定向URI」列表，确认是否包含Vercel域名的重定向地址（格式为https://你的Vercel域名/__/auth/handler）
• 如果没有，手动添加该地址并保存

步骤4：检查Vercel环境变量（若使用） #

如果你的Firebase配置是通过Vercel环境变量管理的：

• 进入Vercel控制台的项目 → Settings → Environment Variables
• 确认NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN等所有Firebase相关变量的取值正确，且已设置为「Deploy」环境生效

额外排查建议 #

• 清除浏览器缓存和Cookie，避免本地旧认证数据干扰
• 打开浏览器开发者工具（F12）的「Console」面板，查看是否有invalid domain类的报错，帮助定位具体问题

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