📱

PWAでfirebase authのsignInWithPopupを呼んでもGoogleの画面が表示されない

2022/04/10に公開

小ネタ

状況

Viteで、vite-plugin-pwaを使ってPWAしている
(実際最中はこれが原因かは自信がなかったが)serviceworkerを設定したあたりでタイトルの問題が発生した
firebase authでsign in with Googleを実装していたが、signInWithPopup, signInWithRedirectがどちらも動かなくなりGoogleにリダイレクトされずに自分のアプリ画面が表示されるようになってしまった

原因は、firebase authがsigninに使っているpathの処理をserviceworkerが奪ってしまっていることで、それを回避する設定を書く必要がある
offline-pluginで似たような事例 https://github.com/NekR/offline-plugin/issues/412
vite-plugin-pwaでは、offline-pluginのexcludeに相当するnavigateFallbackDenylistというのがあるようだった https://github.com/antfu/vite-plugin-pwa/issues/218

というわけで、vite.config.jsに以下の記述を追加したら治った

    VitePWA({
      ...,
      workbox: {
        navigateFallbackDenylist: [/\/__\/auth/],
      },
    }),

「signInWithPopupが壊れた」だけだとググっても全くかすりもせず、原因が皆目見当もつかなかったので(壊れた瞬間的にserviceworkerが絡んでいるのだろうという想像だけはできたけど)調査が難航した