Firebase Auth在移动端浏览器失效，基于Popup登录方案求修复方法

你当前使用的signInWithPopup在移动端浏览器兼容性极差——多数移动浏览器会拦截弹窗，部分内置浏览器甚至不支持弹窗式授权流程，这就是登录功能在移动端失效的核心原因。

直接改用Firebase官方推荐的移动端适配方案signInWithRedirect即可解决问题，修改后的代码如下：

function login() {
  const googleAuth = new GoogleAuthProvider();
  // 替换弹窗授权为跳转授权
  return signInWithRedirect(auth, googleAuth);
}

// 页面加载时处理授权重定向的返回结果
window.addEventListener('load', () => {
  getRedirectResult(auth)
    .then((result) => {
      if (result?.user) {
        // 登录成功后调用获取用户名的逻辑
        getUserName(result.user.uid);
      }
    })
    .catch((error) => {
      // 处理授权失败或取消的情况
      console.error('登录错误:', error);
    });
});

关键注意点 #

• signInWithRedirect会引导用户跳转到Google授权页面，完成后自动返回你的应用，完全规避移动端弹窗拦截问题，适配所有主流移动浏览器。
• 必须在页面初始化时调用getRedirectResult，因为重定向后原页面的上下文已丢失，无法通过原函数的then直接获取用户信息。
• 确认Firebase控制台已配置正确的授权回调域名（包含移动端访问的域名），否则重定向会被拦截。

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