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

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

作成日:2022年03月06日
更新日:2022年03月07日

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

firebase-database-react-user

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

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

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

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

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

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

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

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-project-config-setting

【Firebase】Firebase Project Configを設定する

firebase-firestore-database-gets

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

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

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

query の第一引数にcollectionfirestoreと 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;

Avatarprofileが存在する場合は、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)}
/>

では、動作確認します。

image2

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

これは、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;
}
}
}

image3

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

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

image4

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

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

firebase-react-profile-update

【Firebase】Firestore Databaseに保存しているプロフィール情報を更新する

© 2024あずきぱんウェブスタジオ