Nuxt/FirebaseのGoogleログイン時に毎回アカウント選択を表示する

生きてます。

Webアプリケーションにつきもののユーザ管理ですが、APIベースのアプリだと非常に面倒です。出来るだけ個人情報は自前で持ちたくないですし、大体のケースにおいてここに労力をかけることが本題ではないと思います。今回は自主的に夜な夜な開発していたNuxt.js製社内用Webアプリケーションで、尚更そこに手間をかけたくなかったので、Firebaseを使ってちゃちゃっと済ませます。

といっても今回は表題の件がメインなので、それまでの過程についてはかなり端折ります。一応Nuxtは使って入るものの、主題に関しては特に関係なく流用出来るんじゃないかと思います。

導入

npm install firebase@8.10.0
npm install @nuxtjs/firebase

パッケージマネージャで入れます。
留意点としてはfirebase のメジャーバージョンが上がったことに伴い、最新版の9.xに@nuxtjs/firebaseが2021/10/08現在では対応していないようで、npm install firebaseで最新版を入れてるとこけるようです。（私のときは、firebaseのアプデ3日後のことだったので、地味にハマってました）

将来的には対応されると思いますが、取り急ぎは8系の最終リリース版を指定して入れました。手元ではこれで問題なく動いていますので、これでよしとします。

実装

とりあえずちゃちゃっと実装します。

サインイン

Googleアカウントでのログインのみを想定しているので、@clickを適当なボタンに張ってplugin化したサインイン操作の関数を実行します。

plugins/auth.js

import firebase from 'firebase';

export const UserLogin = {
  provider: new firebase.auth.GoogleAuthProvider(),
  login: () => {
    firebase
      .auth()
      .signInWithPopup(UserLogin.provider)
      .then(res => {
        console.log(res);
      })
      .catch(error => {
        console.log(error);
      });
  },

これでサインインが実装完了です。別タブが開いてGoogleアカウント選択画面が表示され、選択するとアプリにリダイレクトされてくると思います。あとは@nuxtjs/firebaseの機構に沿って、サインイン時に更新されたstoreのステートを使ってよしなにしますが、ここでは割愛します。

サインアウト

plugins/auth.js

  logout() {
    firebase
      .auth()
      .signOut()
      .then(() => {})
      .catch(error => {
        console.log(error);
      });
  },

サインアウトも同様に実装します。涙が出るほど簡単ですが、アプリケーション側での後処理を忘れると残念なことになるので各自ちゃんとしておきましょう。

一度ログアウトして、再度サインインする

すると、Googleアカウントの選択をすっ飛ばしてサインインが完了します。

便利だけど…

毎回選択する手間を考えたらこれはこれで親切設計なんですが、うっかりサインインするGoogleアカウントを間違えた時など、Googleアカウントを選択し直したいケースもあると思います。

公式を色々読み直してみたんですが、求める答えが得られませんでした。半分くらいアカウントを間違えるほうが悪いという強い心で生きて行こうと思いましたが、どうにも気持ち悪さが拭えなかったので色々調べたんですが、再ログインに言及されている記事がかなり少なく非常に苦労しました。（AndroidやFirebase CLIについての言及は見つかったのですが…）

そこまで特殊な事象じゃないとは思うんですが、皆横着しないでちゃんと実装してるってことなんでしょうか？

答え

ともあれブチキレつつ半分あきらめながら調べまくり、結果としては以下で回答が得られました。

はい神

Googleのドキュメントまでは見に行ってなかった…。firebase.auth.GoogleAuthProvider()インスタンスをちゃんと掘らなかった自分の落ち度でした。

ログイン実装の修正

というわけで、上記の通りパラメータを設定して、再認証時のアカウント選択を明示的に指示します。

plugins/auth.js

  login: () => {
+    UserLogin.provider.setCustomParameters({
+      prompt: 'select_account',
+    });

    firebase
      .auth()
      .signInWithPopup(UserLogin.provider)
      .then(res => {
        console.log(res);
      })
      .catch(error => {
        console.log(error);
      });
  },

これで初回以降のログイン時でも、Googleアカウントの選択画面が表示されますので、うっかり初回サインイン時のアカウントを間違えたときもこれで安心です。

そもそもこっちが標準じゃないのか？という気持ちもありますが、一人1アカウントという考え方が根底にあるのだとしたらそりゃまぁ再認証時の選択なんて煩わしいだけか、とも思うのでこういう作りなのでしょう。

---

というわけで認証処理がようやく片付いたので本題の実装に入れたのでした。めでたし。

本日は以上です。