かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Firebase Authentication GoogleAuthProvider ログアウトしても別の Google アカウントを選択できないにハマる

Firebase Authentication の GoogleAuthProvider を使って Google アカウントでのログインを実装しました
ログアウトした後に再度ログインしようとしても、前にログインしたカウントで自動的にログインしてしまい別のアカウントでログインすることが出来ない問題に当たってしまいました。

環境
  • Firebase 10.1.0
  • React 18.2.0
  • TypeScript 5.1.6

実装

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

const provider = new GoogleAuthProvider();

const MyApp = () => {
  const handleSignin = () => {
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => { /* Success Signin */ })
      .catch((error) => { /* Error */ });
  };
  const handleSignout = () => {
    const auth = getAuth();
    signOut(auth);
  };
  return (
    <div>
      <button onClick={handleSignin}>Sign in with Google</button>
      <button onClick={handleSignout}>Sign out</button>
    </div>
  );
};

現象

  1. GoogleAuthProvider を使ったログインボタンを押すと Google アカウントを選択するポップアップが開く
  2. Google アカウントを選択する Google アカウントでアプリにログインができる
  3. firebase の signOut を使ってログアウトする
  4. 再度ログインボタンを押す
  5. Googleアカウント選択のポップアップが開くが自動的に前回ログインしたアカウントでのログイン処理が実行されログインされる

アカウントを間違えても別の Google アカウントでログインし直しが出来ない状況になってしまいました…

prompt: 'select_account' オプションを追加すれば OK

prompt
select_account
認証サーバーがユーザー アカウントの選択を促します。これにより、認可サーバーに複数のアカウントがあるユーザーは、現在のセッションを利用できる複数のアカウントの中から選択できます。
cf. OpenID Connect  |  Authentication  |  Google for Developers

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

const provider = new GoogleAuthProvider();
// ▼ 下記を追加
provider.setCustomParameters({
  prompt: 'select_account',
});

このオプションを指定しているとログイン時に強制的にアカウントを選択する事を求められるようになる

これでログアウトして再度ログインする際に Google アカウントを選択できるようになりました!
おわり ₍ ᐢ. ̫ .ᐢ ₎


[参考]