新規登録時に取得したユーザーネームをマイページに反映させたいです。

Question

#新規登録時に取得したユーザーネームをマイページに反映させたいです。

新規登録時にユーザーネームも入力するように記述してますが、
そのユーザーネームを登録後、マイページに表示させるようにしたいです。

Firebase公式リファレンス：ユーザーのプロフィールを取得する

上記読みましたがdisplayNameが用意されていることかと思います。
そのdisplayNameをどのようにマイページで表示させるか分かりかね状況です。

また、登録時にuidが自動的に付与されるかと思われますが、そのuidを元にマイページへページ遷移させたいです。

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

#新規登録

<template>
  <div>
    <Header />
    <div class="signup flex">
      <div class="signup-inner flex">
        <h2>新規登録</h2>
        <input type="text" placeholder="Username" v-model="userName" />
        <input type="text" placeholder="Email" v-model="email" />
        <input type="password" placeholder="Password" v-model="password" />
        <button class="btn-signup" @click.prevent="signUp">登録</button>
        <p>
          既に登録済みの方は
          <router-link to="/signin">こちらへ</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: "",
      userName: "",
    };
  },
  components: {
    Header,
  },
  methods: {
    signUp() {

      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((willDelete) => {
          if (willDelete) {
            this.$swal("登録に成功しました。", {
              icon: "success",
            });
            this.$router.push("/signin");
          }
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error",
          });
        });
    },
  },
};
</script>

#マイページ

<template>
  <div>
    <Header />
    <div class="mypage flex">
      <div class="mypage-inner flex">
        <div class="profile-inner flex" >
          <img
            class="profile-inner-img"
            src="../assets/アイコン.jpg"
            alt="デフォルト画像"
          />
          <div class="profile-inner-name">{{ allData.name }}</div>
        </div>

      ~ 省略 ~

Answer 1

    signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
          return firebase
            .firestore()
            .collection("users")
            .doc(userCredential.user.uid)
            .set({
              userName: this.userName,
              time: firebase.firestore.FieldValue.serverTimestamp(),
            });
        })
        .then(() => {
          this.$router.push("/signin");
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error",
          });
        });
    },

とすることで解決いたしました。