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

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

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

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

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

  return { profile }
}

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

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

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

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

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

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

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

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

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

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

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

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

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をインポートします。

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

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

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をインポートします。

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

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

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

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

<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)}
/>

では、動作確認します。

image2

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

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

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

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

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

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

image3

『公開』をクリックし、更新します。

ブラウザに戻って、確認すると、

image4

アバターに画像が表示されました。

次回は、Firestore Database に保存しているプロフィール情報を更新します。

ブログ一覧