Supabaseの認証リダイレクトの仕組みについて（Google認証）

はじめに

Webサービスなどの開発において、SupabaseでGoogle認証を利用する際に、開発環境はlocalhostで、本番環境は本番ドメインでリダイレクト先を分岐することが多々あるかと思います。
はじめて「Supabase × Google認証」で開発した時に、そのリダイレクト先を環境ごとに分岐することについて詰まったので、備忘として記録しておきます。

Supabaseのリダイレクト設定の仕様

まず、Supabaseの認証機能には、リダイレクト先を指定できる設定として以下の２つが存在します。
　① Site URL
　② Redirect URLs

これらはSupabaseのプロジェクトダッシュボードで左側メニューのAuthentication＞URL Configurationで設定することが可能です。

まずはこれらの違いについて説明いたします。

①Site URL

Site URLの設定は上記画像の説明にもあるように、デフォルトのリダイレクト先URLを表します。
認証後に明示的なリダイレクト先が指定されていない場合は、このURLにリダイレクトされます。

②Redirect URLs

一方で、Redirect URLsの設定は認証後にリダイレクトを許可するURLの一覧を表します。
ここに登録されていないURLへはリダイレクトができません。ホワイトリストのような仕組みです。
悪意のあるサイトへのリダイレクトを防ぐ役割があります。

認証処理の流れ

上記のURL設定の仕様を理解したうえで、処理の流れについて説明いたします。
ここでは例としてGoogle認証を用います。

１．OAuth開始：以下のようにGoogleにredirectToパラメータを含めてリクエスト

await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: '${window.location.origin}/auth/callback'
    }
  })

２．Google認証：認証完了後、GoogleからSupabaseに認証結果を返却
３．Supabaseの判定：redirectToで指定されたURLがRedirect URLsに存在するかチェック
４．判定結果：
　　- 存在する場合　→　指定されたURLにリダイレクト
　　- 存在しない場合　→　Site URLで設定されたURLにフォールバック

よって、リダイレクト先の判断はredirectToパラメータ→Site URLの優先順位となります。

まとめ（環境ごとのリダイレクト先分岐方法）

以上のことから、環境ごとにリダイレクト先を分岐させるためには以下の手順が必要です。

１．認証リクエスト処理に環境に応じた動的なredirectToパラメータを指定する。
２．Supabase側の設定で、Redirect URLsに許可するURLを設定する。

これだけで分岐させることが可能です。

既に開発を何度も経験されている方にとっては当たり前のことかもしれませんが、
軽く調べた感じ仕組みについて解説されている記事があまり見受けられなかったため、
今後の備忘や初めて実装する方の参考になればという目的で記録いたしました。

記載内容が誤っている場合などはコメントでご指摘いただけると幸いです。
読んでいただきありがとうございました。