Zenn
Closed8

Firebase v9 firebaseAuth: 初回ログインユーザーかどうか見分ける

Firebase
JavaScript
React
Vue.js
CaaaaatsCaaaaats

AdditionalUserInfo: { isNewUser: boolean; profile: Object | null; providerId: string; username?: string | null }

CaaaaatsCaaaaats

あるのは分かったけどどこから呼び出せばいいんだ？

CaaaaatsCaaaaats

あった。
https://www.ipride.co.jp/blog/3479

また、上記コードにおけるresult(firebase.auth.AuthCredential型)におけるuserプロパティはfirebase.User型ですが、より詳細なユーザー情報を取得するためにadditionalUserInfoプロパティも用意されています。

AuthCredentialを含むresultから引っ張ればいいんですね

CaaaaatsCaaaaats
import { getAdditionalUserInfo } from 'firebase/auth';

export const googleLogin = async () => {
  await signInWithPopup(auth, provider)
    .then((result) => {
      console.log('google resolved');
      // getAdditionalUserInfo()の引数はUserCredentialなので
      const isNewUser = getAdditionalUserInfo(result)?.isNewUser
      console.log(isNewUser)
    })
    .catch((e: any) => {
      alert(e.message);
    });
};

これで取得できた！！

CaaaaatsCaaaaats

・1回目：過去にログイン実績あるユーザー
console.log(isNewUser)
=> false

・2回目：過去にログイン実績ないユーザー（firebaseコンソールでアカウント削除して実行）
console.log(isNewUser)
=> true

CaaaaatsCaaaaats

取得した値を使用しての実装例（Next.js）

export const googleLogin = async () => {
  await signInWithPopup(auth, provider)
    .then((result) => {
      console.log('google resolved');
      //初回ログインかどうかによって'/onboarding'か'/community'に遷移させる
      const isNewUser = getAdditionalUserInfo(result)?.isNewUser;
      console.log(isNewUser);
      isNewUser ? Router.push('/onboarding') : Router.push('community');
    })
    .catch((e: any) => {
      alert(e.message);
    });
};
このスクラップは2021/11/11にクローズされました