Next.js+Firebase部署至Vercel后Google登录弹窗失效求助

• 检查Firebase授权域名配置
  本地开发时Firebase默认允许localhost，但线上部署后必须把你的Vercel域名加入授权列表：

  1. 打开Firebase控制台进入项目
  2. 进入Authentication > 设置 > 授权域名
  3. 添加kibun-up.vercel.app，也可以加上*.vercel.app适配预览环境
     这是最常见的原因，Firebase会限制只有授权域名能发起登录请求，本地正常就是因为默认授权了localhost。

• 确认环境变量的客户端暴露配置
  Next.js中客户端组件使用的环境变量必须以NEXT_PUBLIC_开头，比如NEXT_PUBLIC_FIREBASE_API_KEY，而非FIREBASE_API_KEY。如果没加前缀，客户端读取不到配置，Firebase初始化失败就会导致登录功能失效。
  可以在浏览器控制台输入console.log(process.env.NEXT_PUBLIC_FIREBASE_API_KEY)验证，返回undefined就是这个问题。

• 给登录逻辑添加错误捕获
  生产环境可能静默失败，给登录按钮的点击事件加错误捕获能快速定位问题：

  const handleGoogleLogin = async () => {
    try {
      const provider = new GoogleAuthProvider();
      await signInWithPopup(auth, provider);
    } catch (error) {
      console.error('登录错误:', error);
      alert('登录失败，请查看控制台信息');
    }
  };
  

  点击登录后打开浏览器开发者工具的控制台，查看是否有初始化失败、跨域等报错信息。

• 验证Firebase初始化逻辑
  确保客户端组件的Firebase初始化只在客户端执行，避免服务端渲染时出错：

  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  
  const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    // 其他配置项
  };
  
  // 避免重复初始化
  const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
  const auth = getAuth(app);
  

  要是初始化代码在服务端运行，客户端可能拿不到正确的auth实例，登录弹窗自然无法触发。

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