Firebase Google登录跳转/__/auth/handler路由无限加载问题求助

问题根因及解决方案 #

1. 关于/__/auth/handler路由的疑问 #

你不需要自行实现该路由，Firebase Hosting默认会自动处理该内置路由，你部署空项目也不会影响该路由的功能，这个不是导致你问题的原因。

2. iframe环境导致的登录通信失败才是核心原因 #

你使用的signInWithPopup登录逻辑依赖弹窗和父触发窗口的跨上下文通信传递登录凭证，当代码运行在Airtable的iframe中时会碰到两个限制：

• Google登录完成后跳转到的Firebase auth handler页面，需要找到最初触发弹窗的窗口回传登录结果，但iframe的父窗口是Airtable域名，和你的Firebase authDomain不属于同源，浏览器的跨源安全策略会拦截这一通信，导致handler页面卡住无法完成后续流程。
• Airtable为嵌入的第三方应用iframe默认开启了sandbox沙箱限制，可能会拦截弹窗的跨域通信权限，就算配置了授权域名也无法正常通信。

3. 可行的修复方案 #

方案一：改用signInWithRedirect登录流（更适配iframe场景）

替换原来的弹窗登录逻辑为重定向登录，在Firebase托管页面完成登录后用postMessage把登录凭证回传给Airtable的iframe上下文：

1. 替换登录触发方法：

const signInWithGoogle = async () => {
  try {
    await firebase.auth().signInWithRedirect(googleProvider);
  } catch (error) {
    console.log('error: ', error);
  }
};

2. 在你的Firebase托管页面入口添加重定向结果处理逻辑：

// 页面加载时执行
firebase.auth().getRedirectResult()
  .then(result => {
    if (result.user) {
      // 登录成功，将结果传递给Airtable父窗口
      window.parent.postMessage({
        type: 'FIREBASE_GOOGLE_LOGIN_SUCCESS',
        userInfo: result.user,
        credential: result.credential
      }, '*') // 测试阶段可以用*，正式环境替换为你的Airtable应用实际域名
    }
  })
  .catch(error => console.error('登录回调错误：', error))

3. 在Airtable的iframe应用代码中监听message事件，拿到登录凭证后处理后续业务逻辑。

方案二：修复弹窗登录的权限配置

如果你一定要保留弹窗登录逻辑，需要做两个配置：

• 把你运行Airtable应用的完整域名添加到Firebase控制台的Auth授权域名列表中
• 确认Airtable为你的应用iframe开放了allow-popups、allow-popups-to-escape-sandbox、allow-same-origin三个沙箱权限

额外排查项 #

如果修改后还是有问题，可以检查Firebase Auth的OAuth同意屏幕配置：如果你的应用还处于测试状态，需要把测试用的Google账号添加到测试用户列表中，否则登录流程也会被拦截。

内容的提问来源于stack exchange，提问作者Andy Cloke