Firebase Google 登录卡在 /__/auth/handler 路线上

Question

我正在按照此处的步骤尝试将 Google 登录添加到使用的项目中。Firebase 授权。

• 我在 iframe 中运行代码（因为它是 Airtable 应用程序）。这可能是问题所在吗？
• 我已在 firebase 控制台中启用 Google 登录。
• data-fetcher-dev.firebaseapp.com包含在 Firebase 授权域中。

我的代码：

firebase.initializeApp({
apiKey: 'AIzaSyCp8i_9lHCyLOREMIPSUM21342xXmb0F0Y',
authDomain: 'data-fetcher-dev.firebaseapp.com',
projectId: 'data-fetcher-dev',
});

const googleProvider = new firebase.auth.GoogleAuthProvider();

googleProvider.addScope('profile');
googleProvider.addScope('email');

...

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

signInWithGoogle当按下按钮时调用。将打开一个新选项卡，我可以选择一个 Google 帐户/登录其中一个：

选择帐户后，我将被重定向到类似的 URL https://data-fetcher-dev.firebaseapp.com/__/auth/handler?state=LONG_TOKEN_VALUE&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&authuser=3&prompt=consent，并且该页面将永远加载：

我正在使用 firebase 托管，因此 处有一个空项目https://data-fetcher-dev.firebaseapp.com。我需要在 实现后端路由吗/__/auth/handler？我认为 Firebase 应该为我处理这个问题，因为他们在文档中没有提到它。

提前致谢。

Answer 1

添加其他人提到的内容，因为我花了很长时间才整理出所有这些内容，因为它与自定义域本身或 GCP 或 Firebase 中的授权域设置无关。

您可以在其中传递接受 RegExp 数组的vite-plugin-pwa工作箱设置：navigateFallbackDenylist

const pwaOptions: Partial<VitePWAOptions> = {
  base: "/",
  manifest: {
     // ..
  },
  workbox: {
    navigateFallbackDenylist: [/__/], // Allows firebase auth routes to pass through service worker
  },
};

Answer 2

我刚刚面临这个问题，尽管使用了自定义域并使用了该signInWithRedirect方法。

our.custom.domain/__/auth/handler当我们期望看到来自 google 身份验证处理服务的内容时，我们注意到身份验证处理程序 url正在从我们的网站提供 html。

该问题是由我们正在处理请求的服务人员引起的。通过在 Service Worker 注册的路线上戳一个洞，我们能够解决挂起的__/auth/handler路线。

我们在 service-worker 中使用 workbox。

// Poke a hole through the service worker for the firebase auth handlers.
registerRoute(({ url }) => url.pathname.startsWith('/__/'), new NetworkFirst());