Firebase×TypeScriptで、既に登録しているメールアドレスを判別したい。

Question

実現したいこと

現在、新規登録・ログイン画面を実装していて、以下のフローを実装したいです。

• メールアドレスを入力して[次へ]ボタンを押下
  • メールアドレスが既にFirebaseに登録済の場合
    • ログイン処理
  • メールアドレスがFirebaseに登録されていない場合
    • 新規登録処理

発生している問題・分からないこと

fetchSignInMethodsForEmailを使用して、既に登録されているかを判断しようと実装していました。

1. Firebase Authenticationのユーザ管理画面で存在しているメールアドレスを入力
2. [次へ]ボタン押下
3. 未登録のメールアドレスと判断されてしまう

・コンソールログで確認
fetchSignInMethodsForEmailから取得したリストが、空で返却されている。
期待値は、["password"]または["google.com"]

該当のソースコード

import { useState } from "react";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  fetchSignInMethodsForEmail,
  signOut,
} from "firebase/auth";
import { auth } from "@/lib/firebaseConfig"; // Firebase設定ファイルをインポート

const Login = () => {
  const [email, setEmail] = useState(""); // ユーザーが入力したメールアドレスを管理
  const [password, setPassword] = useState(""); // ユーザーが入力したパスワードを管理
  const [isRegistered, setIsRegistered] = useState<boolean | null>(null); // メールアドレスが登録済みか未登録かを管理
  const [error, setError] = useState<string | null>(null); // エラーメッセージを管理
  const [showPassword, setShowPassword] = useState(false); // パスワードの表示/非表示を管理

  // メールアドレスの確認処理
  const handleNext = async () => {
    setError(null); // エラーメッセージをリセット
    if (email) {
      try {
        const signInMethods = await fetchSignInMethodsForEmail(auth, email);
        if (signInMethods.length > 0) {
          setIsRegistered(true); // メールアドレスが登録済みの場合
        } else {
          setIsRegistered(false); // メールアドレスが未登録の場合
        }
      } catch (error) {
        setError("メールアドレスの確認に失敗しました");
      }
    } else {
      setError("メールアドレスを入力してください");
    }
  };

  // パスワードの表示/非表示切り替え
  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  // ログイン処理
  const handleLogin = async () => {
    setError(null);
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert("ログイン成功");
    } catch (error) {
      setError("ログインに失敗しました");
    }
  };

  // 新規登録処理
  const handleRegister = async () => {
    setError(null);
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      alert("新規登録成功");
    } catch (error) {
      setError("新規登録に失敗しました");
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded shadow-md w-full max-w-md">
        <h1 className="text-2xl font-bold mb-6 text-center">ログインまたは新規登録</h1>

        {/* メールアドレス入力と次へ進むボタン */}
        <div className="flex items-center mb-4">
          <input
            type="email"
            placeholder="メールアドレスを入力"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
          />
          <button
            onClick={handleNext}
            className="ml-2 bg-blue-500 text-white py-3 px-4 rounded hover:bg-blue-600 transition"
          >
            次へ
          </button>
        </div>

        {/* エラーメッセージ */}
        {error && <p className="text-red-500 mb-4 text-center">{error}</p>}

        {/* パスワード入力とログインまたは新規登録ボタン */}
        {isRegistered !== null && (
          <div>
            <label className="block text-sm font-medium mb-2">パスワード</label>
            <div className="relative mb-4">
              <input
                type={showPassword ? "text" : "password"}
                placeholder="パスワードを入力"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
              />
              <button
                onClick={togglePasswordVisibility}
                className="absolute inset-y-0 right-0 pr-3 flex items-center"
              >
                {showPassword ? "非表示" : "表示"}
              </button>
            </div>
            {isRegistered ? (
              <button
                onClick={handleLogin}
                className="w-full bg-green-500 text-white py-3 rounded hover:bg-green-600 transition"
              >
                ログイン
              </button>
            ) : (
              <button
                onClick={handleRegister}
                className="w-full bg-blue-500 text-white py-3 rounded hover:bg-blue-600 transition"
              >
                新規登録
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default Login;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

以下、確認しました。
・Firebase Authenticationでメール/パスワード認証は有効になっている
・Firebase APIキーや認証設定：ユーザーは登録はできている(Firebase Authenticationのユーザ画面に追加される)
・FirebaseSDKの最新バージョンになっている

補足

特になし

Answer 1

fetchSignInMethodsForEmail()が廃止されていたため、空リストが返却されていました。
やりたいことを実現するには、メール列挙保護を無効化することで出来ますが
無効にすることで以下のリスクがあります。
https://cloud.google.com/identity-platform/docs/admin/email-enumeration-protection?hl=ja&authuser=0

こちらに回避案が記載されています。
https://github.com/firebase/firebase-android-sdk/issues/5586