Firebase

【Firebase】プロフィール画面にデフォルトでユーザー情報を表示する

作成日：2022年03月06日

更新日：2022年03月07日

前回は、プロフィール画面で作成したユーザー情報を、Firestore Database に保存しました。

【Firebase】プロフィール画面で作成したユーザー情報を、Firestore Databaseに保存する

今回は、プロフィール画面にデフォルトでユーザー情報を表示します。

まずは、プロフィールのフックを作成するため、hooks フォルダに useProfile.ts を作成します。

useStateでプロフィールの状態管理をしましょう。

tsx
export const useProfile = () => {
  const [profile, setProfile] = useState<DocumentData | null>(null);

  return { profile };
};

useEffect でプロフィール情報を取得します。

現在の認証情報を取得するために、firrebase/authからgetAuth、onAuthStateChanged、Authを取得します。

tsx
import { Auth, getAuth, onAuthStateChanged } from "firebase/auth";

useEffect 内に認証情報を設定します。

tsx
useEffect(() => {
  const auth: Auth = getAuth();
  onAuthStateChanged(auth, async (user) => {});
}, []);

ユーザー認証されている場合、uid を取得します。

tsx
useEffect(() => {
  const auth: Auth = getAuth();
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      const userUid = user.uid;
    }
  });
}, []);

以前設定した、firebaseApp から firestore をインポートします。

Firebase の設定は、こちらをご覧ください。

【Firebase】Firebase Project Configを設定する

【Firebase】Firestore Databeseのデータを、フロントエンドに表示する

ユーザー認証の uid と Firestore Database の uid を調べるために、firebase/firestoreからcollection、query、whereをインポートします。

tsx
import { collection, query, where, DocumentData } from "firebase/firestore";

query の第一引数にcollectionでfirestoreと Firestore Database の user、第二引数にwhereで、uid とuserUidを指定します。

tsx
useEffect(() => {
  const auth: Auth = getAuth();
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      const userUid = user.uid;
      const firestore = firebaseApp.firestore;

      const q = query(
        collection(firestore, "users"),
        where("uid", "==", userUid)
      );
    }
  });
}, []);

ユーザー情報を取得するために、firebase/firestoreからgetDocsをインポートします。

tsx
import {
  collection,
  query,
  where,
  getDocs,
  DocumentData,
} from "firebase/firestore";

一致したデータは、setProfileで状態管理します。

tsx
useEffect(() => {
  const auth: Auth = getAuth();
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      const userUid = user.uid;
      const firestore = firebaseApp.firestore;

      const q = query(
        collection(firestore, "users"),
        where("uid", "==", userUid)
      );
      const querySnapshot = await getDocs(q);
      querySnapshot.forEach((doc) => {
        const docData = doc.data();
        setProfile(docData);
      });
    }
  });
}, []);

次に、Profile.tsx でuseProfileをインポートします。

tsx
const profileData = useProfile();
const profile = profileData.profile;

Avatarでprofileが存在する場合は、profile.imageが表示し、imageが作成された場合は、imageを表示するようにします。

tsx
<Avatar
  src={image ? URL.createObjectURL(image) : profile ? profile.image : ""}
  alt=""
/>

ユーザー名も Avatar と同様に設定します。

tsx
<TextField
  margin="normal"
  required
  fullWidth
  id="name"
  label="ユーザー名"
  name="name"
  autoComplete="name"
  autoFocus
  value={name ? name : profile ? profile.name : ""}
  onChange={(e) => setName(e.target.value)}
/>

では、動作確認します。

ユーザー名は表示されますが、画像が表示されません。

これは、Firebase Storage のルールで拒否されているからです。

画像の読み取りは、誰でもできるように変更します。

Firebase の Storage にアクセスします。

ルールを編集しましょう。

txt
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
    	allow read: true;
      allow write: if request.auth != null;
    }
  }
}