Firebaseでプロフィール情報を管理して、ユーザーの名前と画像を表示させる

signUp.vue

methods: {
    signUp() {
      let self = this;
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          userCredential.user.updateProfile({
            //userCredential引数を渡して新規登録したユーザーをauthでプロフィール情報を登録。
            displayName: self.name,
            photoURL: require("../assets/デフォルト画像.jpg"),
          });
          //新規登録時に取得したemailとpasswordを引数であるuserCredential(ユーザー資格情報)に渡す。
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
          this.uid = userCredential.user.uid;
          //this.uidに 「userCredential.user.uid;」を格納
          return (
            firebase
              .firestore()
              .collection("users")
              .doc(userCredential.user.uid)
              .set({
                name: this.name,
                time: firebase.firestore.FieldValue.serverTimestamp(),
                uid: userCredential.user.uid,
              })
          );
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
          //新規登録後、「/mypage/userCredential.user.uid」で該当ページに遷移
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error",
          });
        });
    },
  },
};
</script>

新規登録時(firebase.auth().createUserWithEmailAndPassword(this.email, this.password))に、
updateProfile()を使用して、displayNameとphotoURLを設定してあげる。

詳細は、公式リファレンス参照。
Firebase でユーザーを管理する

その後、displayNameをここでFirestoreに保存。

    signUp() {
      let self = this;
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          userCredential.user.updateProfile({
            //userCredential引数を渡して新規登録したユーザーをauthでプロフィール情報を登録。
            displayName: self.name,
            photoURL: require("../assets/デフォルト画像.jpg"),
          });
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
          this.uid = userCredential.user.uid;
          //this.uidに 「userCredential.user.uid;」を格納
          return (
            firebase
              .firestore()
              .collection("users")
              .doc(userCredential.user.uid)
              .set({
                name: this.name,
                time: firebase.firestore.FieldValue.serverTimestamp(),
                uid: userCredential.user.uid,
              })
          );

mypage.vue

updateBtn() {
            this.$swal({
                title: "内容確認",
                text: "この内容で更新しますか？",
                icon: "info",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    let uploadParam = {};
                    if (this.uploadUrl) {
                        const uploadTask = firebase
                            .storage()
                            .ref(this.uploadUrl) //さっき決めたパスを参照して、
                            .put(this.file); //保存する
                        uploadTask.then(() => {
                            uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => {
                                //this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入。
                                this.$set(this, "uploadedImage", {
                                    fileUrl: fileUrl,
                                    time: firebase.firestore.FieldValue.serverTimestamp(),
                                });
                                console.log(fileUrl, this.uploadUrl);
                                uploadParam = { uploadedImage: this.uploadedImage };
                                //uploadParamへuploadedImageを代入。
                                firebase
                                    //画像をfirestoreに保存
                                    .firestore()
                                    .collection("users") //保存する場所を参照して、
                                    .doc(this.$route.params.uid) //追加で保存setメソッドを使うと上書きされる
                                    .set(
                                        {
                                            name: this.name,
                                            sex: this.sex,
                                            age: this.age,
                                            access: this.access,
                                            selfpr: this.selfpr,
                                            profession: this.profession,
                                            genre: this.genre,
                                            favMovie: this.favMovie,
                                            ...uploadParam,
                                            time: firebase.firestore.FieldValue.serverTimestamp(),
                                            //サーバ側で値設定
                                        },
                                        { merge: true }
                                        //set()でmergeをtrueにすると、上書き。updetaと同様。
                                    );
                                const currentUser = firebase.auth().currentUser;
                                currentUser
                                    .updateProfile({
                                        photoURL: fileUrl,
                                    })
                                    .then(() => { })
                                .catch(()=>{
                                });
                            });
                        });
                    }
                    firebase
                        //画像をfirestoreに保存
                        .firestore()
                        .collection("users") //保存する場所を参照して、
                        .doc(this.$route.params.uid) //追加で保存setメソッドを使うと上書きされる
                        .set(
                            {
                                name: this.name,
                                sex: this.sex,
                                age: this.age,
                                access: this.access,
                                selfpr: this.selfpr,
                                profession: this.profession,
                                genre: this.genre,
                                favMovie: this.favMovie,
                                ...uploadParam,
                                time: firebase.firestore.FieldValue.serverTimestamp(),
                                //サーバ側で値設定
                            },
                            { merge: true }
                            //set()でmergeをtrueにすると、上書き。updetaと同様。
                        );
                    this.$swal("更新しました。", {
                        icon: "success",
                    });
                } else {
                    this.$swal("キャンセルしました。");
                }
            })
            .catch(() => {
              this.$swal("更新出来ませんでした。", {
                icon: "error",
              });
              this.preview = ""
              //更新をキャンセルした場合、空にする。
            });
        },

マイページにてプロフィール画像を編集する際に、上記にてFirestoreに保存後、
Firebaseでも下記にてphotoURLにfileUrlを保存させてあげる。

const currentUser = firebase.auth().currentUser;

  currentUser.updateProfile({
     photoURL: fileUrl,
  })

chat.vue

あとは表示させたいページにて以下コードにて名前は{{user.displayName}}として、displayNameを表示させ、
画像については、:src="user.photoURL"として、photoURL(fileUrl)を表示させる。

<div class="myimage flex">
  <img :src="user.photoURL" width="50" height="50" />
    <div class="myname flex">{{user.displayName}}</div>

Firebaseの構築にてAuthentication内でデータを確認しても、FiresoreやRealtimeDatabaseのように
displayNameとphotoURLが保存されている事は確認出来ない為、注意。