Firebase Auth signInWithPopup触发auth/popup-closed-by-user错误求助

问题描述 #

使用Firebase Auth实现Google账号登录，此前功能正常，近期出现异常：点击触发登录后，认证弹窗打开约2秒后自动关闭，signInWithPopup抛出auth/popup-closed-by-user错误，代码几乎未修改Firebase官方示例。

相关代码 #

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

const firebaseConfig = {
  // ...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export function signIn() {
  const provider = new GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

  console.log('before sign in');
  signInWithPopup(auth, provider)
    .then((result) => {
      console.log('success!');

      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = credential.accessToken;

      const user = result.user;
      console.log(token, user);
    }).catch((error) => {
      console.error(error.code);
    });
}

document.addEventListener('click', ()=>signIn());

异常现象 #

1. 点击页面后，认证弹窗打开，同时控制台打印before sign in
2. 弹窗停留约2秒后自动关闭
3. 控制台输出错误码auth/popup-closed-by-user

排查方向与解决方法 #

• 浏览器弹窗限制或插件干扰

  • 确认登录触发逻辑是用户直接点击触发：当前代码绑定了document的click事件，确保没有被异步逻辑包裹导致浏览器判定为非主动触发。
  • 使用浏览器无痕模式测试，排除广告拦截器、隐私插件等对弹窗的拦截。

• Firebase项目配置校验

  • 检查Firebase控制台的授权域名：进入项目 → 认证 → 登录方法 → 授权域名，确认当前网站域名（含本地开发的localhost:端口号）已添加。
  • 确认Google登录提供者已启用，同时检查Google Cloud控制台中对应OAuth客户端ID的回调地址是否与Firebase生成的地址一致。

• SDK版本兼容性

  • 尝试回退至之前功能正常的Firebase SDK版本，或更新到最新稳定版，确保firebase/app与firebase/auth版本统一。

• Scope权限问题

  • 代码中添加了contacts.readonly权限，需确认Google Cloud控制台已启用Google People API。可先移除该Scope测试登录是否正常，再逐步排查权限配置。

• 网络与跨域问题

  • 检查网络是否能正常访问Firebase认证相关域名，排除防火墙或代理的拦截。
  • 本地开发避免使用file://协议，改用本地服务器（如http://localhost）运行页面，规避跨域限制。

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