Next.js站点：Firebase Google认证自定义域名配置及显示问题

1. 确认Firebase授权域配置 #

登录Firebase控制台，进入项目→Authentication→设置→授权域，确保你的自定义域名（如your-domain.com）已添加并保存，子域名需准确填写（如auth.your-domain.com）。

2. 配置Firebase Auth自定义域名（非Firebase Hosting部署需此步骤） #

若你的Next.js项目未部署在Firebase Hosting，需单独配置Auth自定义域名：

• 进入Firebase控制台→Authentication→设置→自定义域名，输入你的自定义域名，按提示完成域名验证（添加CNAME记录到域名服务商）和SSL证书配置。
• 配置完成后，Firebase会将该域名设为Auth的默认域名，后续初始化时authDomain需指向此域名。

3. 更新Google Cloud OAuth客户端凭据 #

Firebase Google登录依赖OAuth客户端，需绑定自定义域名：

• 打开Google Cloud控制台，找到对应Firebase项目的API和服务→凭据。
• 找到名称含firebase的Web客户端ID，点击编辑。
• 在「已授权的JavaScript来源」中添加自定义域名（如https://your-domain.com）；在「已授权的重定向URI」中添加https://your-domain.com/__/auth/handler（Firebase Auth默认回调路径）。
• 保存配置后，等待5-10分钟让生效（Google配置存在延迟）。

4. 修改Next.js项目的Firebase初始化代码 #

更新Firebase配置文件（如firebase.config.js）中的authDomain为自定义域名：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-domain.com", // 替换为自定义域名
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

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

若使用next-firebase-auth等封装库，同步更新配置中的authDomain和回调URL，确保指向自定义域名。

5. 检查Firebase Hosting配置（若部署在此） #

若Next.js部署在Firebase Hosting：

• 进入Firebase控制台→Hosting→自定义域名，确认域名已完成验证且SSL状态正常。
• 检查Hosting重写规则，确保/__/auth/handler路径未被拦截。

6. 清除缓存测试 #

清除浏览器缓存和Cookie，或使用隐身模式发起Google登录请求，验证界面域名是否更新为自定义域名。

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