Firebase signInWithPopup生产环境异常：跳转URL错误且provider为undefined

故障场景对比 #

• 本地开发环境：调用signInWithPopup时直接跳转Google OAuth官方授权端点，new firebase.auth.GoogleAuthProvider()可正常返回provider实例，全流程无报错
• 生产Firebase项目环境：登录弹窗直接跳转项目托管域名下的auth回调页，GoogleAuthProvider实例化直接返回undefined，登录流程完全中断

核心问题定位 #

• 生产构建的模块缺失是provider为undefined的直接原因
  你当前仅导入了Firebase的核心基础包import firebase from 'firebase/app';，没有显式引入认证模块。
  本地开发环境的构建工具会默认全量预加载Firebase所有功能模块，即使不单独导入auth包，也能在运行时兜底加载相关逻辑，所以不会出现对象缺失的问题；但生产构建阶段会通过Tree Shaking裁剪未被显式导入的代码，没有显式引入的auth模块会被直接移除，此时调用firebase.auth.GoogleAuthProvider自然会返回undefined。
  补全导入逻辑即可解决该问题：

  // 保留原有核心包导入
  import firebase from 'firebase/app';
  // 显式引入认证模块，确保生产构建时该模块不会被裁剪
  import 'firebase/auth';
  

• 生产弹窗URL存在格式错误
  你贴出的生产环境弹窗URL存在明显的拼接异常：https://myProjectId.firebaseapp.com,/__/auth/handler

  • 域名后缀后多了一个英文逗号，导致路由解析完全失败
  • 对应query参数中apiKey=myProdAPIKey%2C的编码值就是英文逗号，本质是初始化生产Firebase配置时，apiKey字段的值末尾多输入了一个逗号，错误拼接到了URL路径中
    修正配置文件中Firebase参数的拼写错误，移除多余的逗号后，弹窗URL即可恢复正常格式。

• 生产项目的授权配置校验
  URL格式修正、模块导入补全后，需要核对生产Firebase项目的Authentication配置，确保所有需要承载登录逻辑的域名（包括项目默认托管的firebaseapp.com域名、正式上线的自定义域名）都已加入授权域名白名单，避免流程被重定向到错误地址。

验证逻辑 #

• 重新执行生产构建，确认GoogleAuthProvider可正常实例化
• 检查弹窗生成的URL格式，确认没有多余符号、路径拼接正确
• 触发登录流程，确认弹窗可正常跳转Google官方授权端点，完成登录回调

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