部署在Vercel的NextJS应用如何配置Firebase自定义登录域名

算力阿峰

2026-9-25

可行解决方案

方案1：Vercel反向代理Firebase Auth（推荐，零架构改动）

该方案完全保留现有NextJS部署逻辑，不需要修改业务代码，也不需要完成Firebase自定义域名验证流程，仅通过Vercel重写规则实现域名替换：

在NextJS项目根目录新建vercel.json配置文件，添加如下重写规则，将自定义域名下指定路径的请求代理到Firebase默认认证域名：

{
  "rewrites": [
    {
      "source": "/firebase-auth/:match*",
      "destination": "https://你的项目ID.firebaseapp.com/:match*"
    }
  ]
}

修改Firebase初始化配置中的authDomain参数，值改为你的自定义域名/firebase-auth
进入Firebase控制台「Authentication」-「设置」-「授权域」，将你的自定义域名添加到授权列表中，避免跨域拦截
若需要修改邮箱验证、密码重置等系统邮件内的链接域名，可直接在Firebase Auth「模板」设置中替换域名前缀为你的自定义域名即可

方案2：使用客户端SDK实现无跳转登录，彻底避免跳转Firebase域名

该方案完全不需要用到Firebase托管的认证页面，所有登录逻辑都在你的自定义域名下完成：

弃用Firebase自带的跳转式登录方法，改用firebase/auth客户端SDK的弹窗/静默登录能力，所有OAuth、邮箱密码等登录操作都在当前页面内完成，不会产生域名跳转
示例Google登录代码参考：

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
const googleProvider = new GoogleAuthProvider();

signInWithPopup(auth, googleProvider)
  .then((res) => {
    // 登录成功后处理用户信息
  })
  .catch((err) => {
    // 处理登录异常
  });