Firebase Google signInWithPopup仅移动端可用 桌面端弹窗空白

问题现象 #

• 桌面端点击登录触发按钮后，弹出的Google授权窗口显示空白，但窗口内URL地址正确，异常弹窗截图：
  
• 移动端执行完全相同的操作时，可正常跳转至Google账号选择流程完成授权，项目中Firebase的其余功能均可正常运行。
• 桌面端触发登录时控制台存在报错信息，报错截图：
  

现有实现代码 #

Firebase鉴权封装代码 #

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
var provider = new GoogleAuthProvider();

export const signInWithGoogle = () => {
  return signInWithPopup(auth, provider);
}

登录页面代码 #

import React from 'react'
import { signInWithGoogle } from "../Firebase";

const Login = () => {

    function InitWithGoogle() {
        signInWithGoogle();
    }

    return (
           <button type="button" onClick={InitWithGoogle} className="login-with-google-btn" >Sign in with Google</button>

    )
}

export default Login

排查解决步骤 #

• 第一步先检查浏览器安全配置
  桌面端弹窗白屏但移动端正常，90%以上是浏览器第三方Cookie拦截、弹窗拦截导致。signInWithPopup的授权流程依赖跨域Cookie存储登录态，Chrome、Edge等新版浏览器默认开启第三方Cookie拦截，或者在无痕模式下，会直接阻断授权页的请求加载导致白屏。
  操作方式：打开浏览器站点设置，找到当前项目运行的域名（本地开发就是localhost），放开第三方Cookie权限，临时关闭广告拦截、弹窗拦截插件后重试。移动端因为默认拉起系统浏览器走跳转授权，不受页面内弹窗的跨域Cookie限制，所以可以正常登录。
• 第二步核对Firebase控制台配置
  进入Firebase控制台的Authentication模块，打开登录方法配置页：
  1. 确认Google登录提供方已经处于启用状态
  2. 检查已授权域名列表，确保当前项目的访问域名（本地开发地址、线上部署域名）都已经添加到列表中，未授权的域名发起登录请求会直接被Google拦截导致白屏。
• 第三步补全错误捕获逻辑定位具体报错
  现有代码没有捕获登录流程的抛出错误，先给调用逻辑补全catch分支，打印完整错误信息：

  function InitWithGoogle() {
    signInWithGoogle()
      .then((res) => {
        // 此处写登录成功后的业务逻辑
        console.log('登录成功', res.user)
      })
      .catch((err) => {
        // 打印完整错误码和错误信息，根据错误码可直接定位官方对应问题原因
        console.error('登录异常', err.code, err.message)
      })
  }
  

  如果控制台抛出auth/popup-blocked错误，说明弹窗被浏览器判定为非用户主动触发拦截，注意signInWithPopup必须在用户点击事件的同步逻辑里直接调用，不能包裹在接口请求、setTimeout、Promise等异步回调后执行，否则会被浏览器拦截。
• 兜底兼容方案
  如果确认是浏览器安全策略限制导致弹窗模式无法兼容，直接替换为signInWithRedirect跳转式登录，该模式不依赖弹窗和跨域第三方Cookie，桌面端、移动端兼容性更强，不会出现白屏问题。

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