Firebase Web端signInWithPopup认证在移动端无法正常工作

问题分析 #

signInWithPopup 在桌面端正常，但移动端点击认证后无反应、开启桌面站点模式恢复，核心原因是移动端浏览器对弹出窗口的限制机制：

• 多数移动端浏览器会默认拦截非用户直接触发的弹窗，或把弹窗转为独立标签页，导致 Firebase 认证的回调上下文丢失，无法触发后续的 addEverything 逻辑。
• 桌面站点模式下浏览器采用桌面级弹窗策略，因此能正常运行。

解决方案 #

改用 signInWithRedirect 替代 signInWithPopup，重定向式认证在移动端兼容性更强，不会受弹窗拦截影响。

修改后的代码实现 #

const loginWithGoogle = function() {
  const user = auth.currentUser;
  if (user) {
    // 已登录直接执行逻辑
    addEverything();
  } else {
    // 改用重定向方式发起认证
    signInWithRedirect(auth, provider);
  }
};

// 页面初始化时检查重定向认证结果
auth.getRedirectResult().then((result) => {
  if (result.user) {
    addEverything();
  }
}).catch((error) => {
  // 处理认证错误（可选）
  console.error('Redirect auth error:', error);
});

loginBtn.addEventListener('click', loginWithGoogle);

额外注意事项 #

• 确保 Firebase 控制台的 Auth -> 设置 -> 授权域 中已添加你的移动端访问域名（必须是 HTTPS 协议，移动端浏览器对 HTTP 站点的限制更多）。
• 避免在异步操作后触发弹窗/重定向，必须保证登录按钮的点击事件是用户直接触发的同步操作，否则仍可能被浏览器拦截。

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