Firebaseを利用する際、フロント側で表示するユーザー情報はcurrentUserやFirestoreなど、どこから参照するとよいでしょうか。

Question

前提

Firebase Authenticationでユーザーのログイン機能を実装しています。

サインアップ時に、

• 名前
• アバター
• メールアドレス
• パスワード

以上をFIrestoreに保存しています。
さらに保存したデータをグローバルステートuserにセットし、複数のコンポーネントでユーザーのアバターと名前を参照して表示しています。

ソースコード

サインアップ時にFirestoreに保存、setStateする関数

const currentUser = firebase.auth().currentUser;
const docRef = await db.collection("users").doc(currentUser.uid);
// Firestoreにユーザー情報を保存
await docRef.set({
        name: currentUser.displayName,
        avatar: currentUser.photoURL,
        email: inputEmail,
        password: inputPassword,
      });
// 保存したユーザー情報を取得
const data = await db.collection("users").doc(currentUser.uid).get();
// 取得した情報をフロント側で使うためにセット
setUser(data.data());

ユーザー情報を使用するコンポーネント

return (
  <>
    <img src={user.avatar} />
    <p>user name: {user.name}</p>
  </>
)

ユーザー情報（例：ユーザーの名前）を更新する関数

const currentUser = firebase.auth().currentUser;
const docRef = await db.collection("users").doc(currentUser.uid);
// 名前を更新
await docRef.update({name: inputNewName})
// 更新した情報を取得
const doc = await docRef.get();
// 更新した情報をセット
setUser(doc.data());

疑問

firebase.auth().currentUserに名前(displayName)やアバター(photoURL)の情報があるので、グローバルステートにユーザー情報をセットして参照しなくても、ユーザー情報を表示できます。
しかし、ユーザー情報を更新した際に反映がされないため、Firestoreに保存しています。

とはいえFirebaseの公式ドキュメントのこのページにcurrent_userの情報を更新する方法が書かれていました。

なので、フロント側（クライアント側）でユーザーの情報を表示する際、どのような方法がよいのでしょうか。

1. 現状の方法

• ユーザー情報を保存または更新する都度、Firestoreに保存する
• Firestoreから取得したユーザー情報をグローバルステートにセットする
• ユーザー情報を表示する部分で、グローバルステートを参照する

気になる点
ユーザー情報をFirestoreとグローバルステートで二重に管理している状態です。
また、ユーザー情報を保存または更新する都度、Firestoreから情報を取得しセットステートしているのは、なんとなく無駄なことをしている気がしています。

ユーザー情報をフロント側で表示したい部分はグローバルステートから参照するのではなく、直接Firestoreからすればよいのかもしれませんが、ユーザー情報を更新した際、ページをリロードしないとユーザー情報の更新が反映されないかと思います（リロードせずに更新できる方法があるならいいのですが）

2. currentUserだけを使う

• ユーザー情報はFirestoreに保存しない
• ユーザー情報を更新する際は、updateProfile メソッドを使用する
• ユーザー情報を表示する部分で、firebase.auth().current_userのプロパティから参照する

気になる点
ユーザー情報をFirestoreに保存しない場合、どこに保存されるのかがわかりません。
また、サインアウトしたりページをリロードした後に、サインインできなさそうな気がしています。

3. そのほかの方法

一般的だったり、回答者さんなりのベストな方法があれば教えていただきたいです。

---

そのほか「基本的に1の方法でいいんだけど、現状の方法じゃダメだよ。こうしないと」みたいなことがあれば、教えていただきたいです。

Answer 1

Auth(Authentication)とFirestoreの関係性ですが、ユーザー情報の保持という役割においてはFirestoreはAuthの補助的な役割という認識です。必ずしもFirestoreが必要なわけではありません。ただし、Authのほうではnameやemailといった限られた情報しか保存することができません。

https://firebase.google.com/docs/reference/js/firebase.UserInfo?hl=ja

例えば、ショッピングサイトを考えたときに、ユーザーに紐づく購入情報なども保存しないといけないわけですから、Authだけでは実現できないので、Firestoreが必要になってくるわけです。Authだけで十分かどうかは質問者様が保存したい情報によります。注意しなければいけないのはAuthとFirestore両方を使っていたとしてもあくまで別々の管理なので、情報が自動で同期されるとかではなく、開発者がuidをキーにして情報を同期する処理を書かなければいけないことは気に留めておいてください。

また、1に関して言えば、特別な理由がない限りグローバルステートで管理せず、直接APIから取得する形でいいのではないかと思います。リモート(API)とローカル(グローバルステート)の情報を手動で同期させる必要が出てきて、そうでなければおっしゃるとおりリロードしないといけません。