Firebaseにメールまたはどのプロバイダからログインしたかを知る方法

Firebaseの認証には、

メール認証
GoogleID認証
facebook認証
Twitter認証
・・・・

など、いろいろなプロバイダーを使ってログインする方法があります。

神谷

アプリにどんな認証を許可するかの設定はこちらから。

Firebaseに認証機能の設定をする

Firebaseを使えば、認証機能が簡単に組込めます。そこで、まずはFirebase側の認証機能の設定をします。認証設定の開始作成したFirebaseのプロジェクトのページの左のメニューの「構築」-「Authentication」をク

複数のプロバイダの認証を許可すると、プロバイダ毎に処理を変えたいところも出てきます。

例えば、メールアドレスで認証しているユーザーなら、パスワードの変更が必要になります。

一方GoogleやTwitterで認証している場合は、アプリケーションにパスワードの変更の処理は不必要になります。

また、ログインしているプロバイダーによって独自のサービスを提供する場合もあるでしょう。

ということで、どうやってログインしているユーザーのプロバイダを判断するための処理をご紹介します。

Firebaseにログインしているユーザー情報を求める。
1. firebase.js
  1. const auth = getAuth(app);
2. Main.js
  1. const [user, loading, error] = useAuthState(auth);
userの内容

Firebaseにログインしているユーザー情報を求める。

Google認証を使ってFirebaseのアプリにログインする処理を参考にして説明します。

firebase.js

Firebaseの基本的な情報を求めるするコードです。

// firebase.js

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

// Firebaseの情報取得
const app = initializeApp(firebaseConfig);
// Firebaseの認証情報取得
const auth = getAuth(app);
// firestore(データーベース)の情報取得
const db = getFirestore(app);
// Google認証情報取得
const googleProvider = new GoogleAuthProvider();


export { auth, googleProvider };
export default db;

const auth = getAuth(app);

まずは、Firebaseの認証情報(auth)を求めましょう。

「auth」を求めるところは、どのような認証でも同じです。

Main.js

// Main.js

import ChildApp from "./ChildApp";
import { auth, googleProvider } from "../service/firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import { signInWithPopup } from "firebase/auth";

function Main() {
  const [user, loading, error] = useAuthState(auth);
  console.log(user);

  const signIn = () => {
    // Google認証状態の取得
    signInWithPopup(auth, googleProvider).catch((err) => alert(err.message));
  };

  return (
    <div className="app">
      {user ? <ChildApp /> : <button onClick={signIn}>Sign in Google Account</button>}
    </div>
  );
}

export default Main;