Firebase の signInWithRedirect からの戻り先を指定する
January 28, 2022
Firebase で Google や Facebook といった外部認証を利用したログインを実施する場合 signInWithPopup または signInWithRedirect のメソッドを利用します。
参考：https://firebase.google.com/docs/auth/web/google-signin
大抵の場合 UI を独自に構築したいでしょうから signInWithRedirect の方を利用することになるでしょう。
さて signInWithRedirect を呼び出した場合、自サイトから認証プロバイダー（例：Facebook）のページに飛び、その後また自サイトに戻ってくるといった遷移になります。
このときの認証プロバイダーからの戻り先は、リダイレクトを発生させた元ページになります。例えば /home というページで signInWithRedirect を実行した場合、戻り先は同じく /home です。
ただし、要件によっては戻り先を別のページにしたい場合もあると思います。
（例えば私の場合、認証プロバイダーから戻ってきたときにローディング画面を表示させたいという要件がありました。）
これを実現するには以下のいずれかの方法をとる必要があります。
- そのページが初めて開かれたのか、あるいは認証プロバイダーから戻ってきて開かれたのかを区別する方針
- リダイレクトからの戻り先を別のページにする方針
ここで残念なことに signInWithRedirect メソッドでリダイレクトからの戻り先を指定することはできません。
そのため、まずは 1 番の方法で考えると思います。
この場合、ローカルストレージやセッションストレージを利用してそのページをどのような状態で開いているのかと区別するやり方があるでしょう。
そして実は多少工夫を加えることで 2 番の方法を取ることも可能です。
例えばこれまで /home にあるボタンを押した際に signInWithRedirect を実行していたとすれば、それを次のように変えることで実現できます。
/homeにあるボタンを押すと、/otherにページ遷移したうえでそこでsignInWithRedirectを実行する。
こうすることで、ユーザから見ると /home にてボタンを押すことに変わりないまま、リダイレクトの戻り先を /other とすることができます。
このように、リダイレクト直前にページ遷移を行う方法をとれば、「リダイレクトからの戻り先を別のページにする方針」をとることも可能ですし、あるいはクエリパラメータを付与する形をとることで、ローカルストレージやセッションストレージを使わずに「そのページが初めて開かれたのか、あるいは認証プロバイダーから戻ってきて開かれたのかを区別する方針」をとることも可能です。
そしてページ遷移について言えば History.pushState() を利用することで実際にはページ遷移を発生させずにこれらを実現することができます。
参考：https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
このように、多少の工夫を加えることで signInWithRedirect ともうまく付き合っていくことができます。
その他参考