認証のあるサイトでFirebaseのプレビューチャンネルを使う

前提

以下の前提のもと、進めていきます。

• ホスティングにFirebase Hostingを使っている
• 認証にFirebase Authenticationを使っている

GitHub Actionsでプレビューチャンネルにデプロイ

以下にサンプルが用意されているのでこちらを使ってみてください。

https://github.com/FirebaseExtended/action-hosting-deploy?tab=readme-ov-file#deploy-to-a-new-preview-channel-for-every-pr

私の環境ではchannelIdを指定しないとエラーになってしまうので指定しました。
また、firebaseToolsVersionをv13.3.1にしないとFirebase Authの認証済みドメインにプレビューチャンネルのURLが登録されなかったので指定しています。

- uses: FirebaseExtended/action-hosting-deploy@v0
  with:
    channelId: チャンネルID
    firebaseToolsVersion: v13.3.1

認証部分のコードを修正する

認証にsignInWithRedirectを使っている場合は、プレビューチャンネルではsignInWithPopupを使うように変えるのがよいかと思います。

理由として、以下のサードパーティブロックを回避するためには承認済みリダイレクトURIに
https://hoge.com/__/auth/handlerのようなURLを登録する必要があるのですが、GitHub ActionでデプロイしたプレビューチャンネルのURLをここに登録する方法がわかりませんでした。
https://firebase.google.com/docs/auth/web/redirect-best-practices?hl=ja

イメージとしてはこのように条件分岐する感じです。

import { getAuth, signInWithRedirect, signInWithPopup } from "firebase/auth";

const auth = getAuth();

if (プレビュー環境だったら) {
  signInWithPopup(auth, provider);
} else {
  signInWithRedirect(auth, provider);
}