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


小ネタ

状況

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

原因と解決策

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

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

終わりに

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