firebaseのsignInWithRedirectを用いてのGoogleログインが、iosだと正常終了しない問題 #iOS

はじめに

仕事でvue.jsを使うということで、勉強がてらアプリを作ってみようと思い、思った以上に使えそうなものができたのでβ版を公開してみようとしたところ、何故かiphoneだけ、ログイン処理自体は通過できてもログイン状態にならず…

調べてみたところ以下の記事が見つかりました。
Firebase AuthenticationでのサインインがiOS16.1でできなくなった際の障害対応記録

とりあえずザクッと説明を省きまして、解決には以下の方法のどれかを取る必要があると

1.Firebase 構成を更新して、カスタムドメインをauthDomainとして使用する
2.signInWithPopup() に切り替える
3.認証リクエストを firebaseapp.com にプロキシする
4.ドメインでサインインヘルパーコードを自己ホストする
5.プロバイダーのサインインを個別に処理する

今回は 1 の方法で対応することにしました。
これの解消が一部手探りだったため、後追いの人らに向けてOUTPUT

どんな人向け？

・公開サーバーにこだわりがない、もしくは firebase hosting を使用予定の人
・vue.jsを用いた、frontend側で認証を行おうとしている人
・ Firebase JS SDKを用いて接続している人
・前述の改善策のうち 1 を選ぼうとしている人

環境

開発端末：macOS Catalina (メモリ:8GB)
動作確認端末：iphone13 mini（IOS17.1.2）
バージョン：
　・vue/cli 5.0.8
　・node.js v18.18.2
Firebase：
　・Realtime Database
　・Authentication
　・Hosting

1. androidだと問題ないけど、iosだとログインできない？

firebaseでのログイン方法としては以下の方法があります。
・signInWithRedirect
・signInWithPopup
~~※signInWithCredentialというのもあるが、今回は割愛~~
今回は前者(redirect)を利用していたのですが、これが IOS16 以降はそのままでは使用できないと

※実際に、androidユーザである妻に試してもらったところログインできたので、現状はios限定の問題である様子

"signInWithPopup" に変えるというのも一つの手段でしたが、公式を見てもあまり推奨はされておらず、特に今回はスマホ向けのものを開発していたこともあり、"signInWithRedirect" で頑張ることにしました。
サードパーティのストレージアクセスをブロックするブラウザで signInWithRedirect を使用する場合のベストプラクティス(オプション 2: signInWithPopup() に切り替える)

2.選択した方法とその理由

前述した通り、今回私は 1 を選びました。
理由は２つあります。
1. 私自身サーバ周りの知識が薄く、気軽に公開できそうな firebase hosting が需要に合致したため
2. 単純に知識が浅く、他の方法がどれも労力がかかりそうだったため

特に後者を理由と呼ぶには怠惰としか言いようが無い
でも実際のところ、早く公開して手元で動作確認したかったので結果的にはこれで良かったと思っています。

3.必要な対応手順

取りたい対応が決まったことで、次のどのように対応するかです。
どんな対応が必要なのか、これは先程の公式ドキュメントに記載があります。一部抜粋

1.カスタムドメインを authDomain として使用するように Firebase JS SDK を構成します。
2.OAuth プロバイダの承認済みリダイレクト URI のリストに新しい authDomain を追加します。

柔らかく噛み砕くと以下の通り

1.Firebase JS SDKの項目"authDomain"には、Hosting URL のドメインを入れてね
2.アプリ側の設定で、特定のURLへのアクセスは、別のURLへリダイレクトするようにしてね
3.ログインを行うプロパイダ側の設定で、firebaseのリダイレクトURIを承認しておいてね

…噛み砕いたら一つ増えちゃいましたが…
また、１番の手法でいく場合は前述の通り、Firebase Hostingを利用する必要がありますので注意。

4."authDomain"の変更

ここで必要な操作を一文で言うと、以下

Firebase JS SDKの設定値"authDomain"を【{projectName}.web.app】に変更する

Firebase JS SDK って何かって言うと、こんなの↓

const firebaseConfig = {
  apiKey: "***********************",
  authDomain: "************.firebaseapp.com",
  databaseURL: "https://*****************",
  projectId: "**************",
  appId: "********************",
};

今回の肝となるのは前述の通り"authDomain"ですね。
最初に設定値をfirebaseから取得した際は前述のように「{projectName}.firebaseapp.com」という形式だったかと思います。

これを 【{projectName}.web.app】 という形式に変更します。
おそらく形式は共通だと思いますが、正確な値を確認したい場合は以下の画面に表示されています。

[Authentication > 承認済みドメイン]

5.リダイレクトの設定

ここで必要な対応を一文で言うと、以下

[/__/auth/**]へのアクセスを、https://{projectName}.firebaseapp.com にリダイレクトさせる設定を追加する

どんな構成かにもよりますが、私の場合はページ遷移に vue-router を用いているので以下のようになります。

const routes = [
  {
    path: "/__/auth/**",
    name: "authentication",
    redirect: "https://*********.firebaseapp.com",
  },
  ...

name は何でもOK（ただのラベル）

6.プロパイダ側の設定でリダイレクトURIの設定

私は今回 Google ログインのみの実装としたので、Google の設定だけ紹介します。
[プロジェクトの設定>サービスアカウント>N個のサービスアカウント]

※facebook等のログインを利用していればここに表示される…ハズ…？（未確認）

開いた画面の検索バーに「認証情報」と入力し、[APIとサービス]の"認証情報"をクリック

[OAuth 2.0 クライアントID] の赤枠をクリック

[承認済みのリダイレクト URI]に以下のようなURLを追加します。

https://*********.web.app/__/auth/handler

これで必要な対応はOK。
問題なくログインできるようになっているはず、お疲れ様でした。

7.対応してみて

firebaseのログイン機能、便利だと思っていたのですがまさかの落とし穴が…
前述の通り、今回対応した方法は Firebase Hosting を利用する人限定の対応になりますのでご注意を。
個人的には、公開サーバーどうしようかなぁ…と思っていたところだったので丁度良かったとも言える。

firebase自体はいいツールだなぁと思っているので、今後も何か公開するときは使いまわしていこうと思ってます。
それでは。