Firebase Google登录关闭弹窗时报auth/popup-closed-by-user错误如何处理？

你调用的Firebase弹窗登录API（如signInWithPopup）返回的是Promise对象，当用户主动关闭授权弹窗时，Firebase会主动 reject 该Promise，没有添加异常捕获逻辑的场景下就会抛出未捕获的Promise错误，最终导致程序崩溃。

根据你使用的Promise写法选择对应处理逻辑即可：

• 若使用async/await写法，添加try/catch包裹登录逻辑：

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

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

// Google注册按钮的点击事件逻辑
const handleGoogleSignUp = async () => {
  try {
    const res = await signInWithPopup(auth, googleProvider);
    // 此处写登录成功后的业务逻辑，比如获取用户信息、写入登录态等
    const user = res.user;
  } catch (error) {
    // 单独处理用户关闭弹窗的场景
    if (error.code === 'auth/popup-closed-by-user') {
      // 可选择性添加用户提示，比如*您已取消账号授权*，也可以不做任何操作
      console.log('用户已关闭登录弹窗，取消登录');
      return;
    }
    // 其他登录异常的统一处理逻辑
    console.error('登录失败：', error.message);
  }
}

• 若使用.then/.catch的回调写法，直接在调用链末尾添加catch回调即可：

signInWithPopup(auth, googleProvider)
  .then(res => {
    // 登录成功逻辑
    const user = res.user;
  })
  .catch(error => {
    if (error.code === 'auth/popup-closed-by-user') {
      console.log('用户取消登录操作');
      return;
    }
    console.error('登录异常：', error);
  })

• 建议对所有登录相关的异常做统一捕获，避免其他未知错误（如网络异常、权限不足等）也导致程序崩溃。
• 用户主动关闭弹窗属于正常操作，无需做过度的提示打扰用户。

内容的提问来源于stack exchange，提问作者Антон Зизюля