【Vue × Firestore】新規登録時に取得したuidを元にマイページにページ遷移させる


#新規登録時に取得したuidを元にマイページにページ遷移させる

```html:signup.vue
<template>
  <div>
    <Header />
    <div class="signup flex">
      <div class="signup-inner flex">
        <h2>新規登録</h2>
        <input type="text" placeholder="Username" v-model="name" />
        <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>
```

```javascript:signup.vue
<script>
import firebase from "firebase";
import Header from "@/components/header.vue";

　　~ 省略 ~

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: "",
      name: "",
      uid: "",
    };
  },
  components: {
    Header,
  },
  methods: {
    signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          //新規登録時に取得した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)
            //usersのドキュメントを参照して、上記で引数として受けたuserCredentialのuid取得
            .set({
              name: this.name,
              time: firebase.firestore.FieldValue.serverTimestamp(),
              uid: userCredential.user.uid,
              //各マイページにページ遷移する為にuidをfirestoreに格納
            });
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
          //新規登録後、「/mypage/userCredential.user.uid」で該当ページに遷移
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error",
          });
        });
    },
  },
};
</script>
```

まずfirebase.auth().createUserWithEmailAndPassword(this.email, this.password)で
新規登録時に取得したemailとpasswordを引数であるuserCredential(ユーザー資格情報)に渡します。

```javascript:signup.vue
    signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          //新規登録時に取得したemailとpasswordを引数であるuserCredential(ユーザー資格情報)に渡す。
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
```

usersというコレクションを参照して、上記で取得したuserCredential(ユーザー資格情報)から「uid」を取得して
set()を使ってuidをFirestoreにデータを追加。

```javascript:signup.vue
    return firebase
            .firestore()
            .collection("users")
            .doc(userCredential.user.uid)
            //usersのドキュメントを参照して、上記で引数として受けたuserCredentialのuid取得
            .set({
              name: this.name,
              time: firebase.firestore.FieldValue.serverTimestamp(),
              uid: userCredential.user.uid,
              //各マイページにページ遷移する為にuidをfirestoreに格納
            });
        })
```

ページを遷移させる為に一度this.uidに 「userCredential.user.uid;」を格納してから
${this.uid}として対象ページに遷移させています。

```javascript:signup.vue
         this.uid = userCredential.user.uid;
         //this.uidに 「userCredential.user.uid;」を格納

         ~ 省略 ~

        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
          //新規登録後、「/mypage/userCredential.user.uid」で該当ページに遷移
        })
```

#uidはどこから取得している？

ちなみにthis.uid を取得している箇所は下記になります。

```javascript
this.uid = userCredential.user.uid;
```

つまり、メールアドレスとパスワードでログインした人の、uid です。

#引数に渡されたuserCredentialとは？


userCredential という名前自体は、利用者が勝手につけたものです。
別の名前、例えば abc にしても正しく動きますが、意味の分かるものにしているだけです。

```javascript:変更前
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
         this.uid = userCredential.user.uid;

```

```javascript:変更後
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((abc) => {
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
          this.uid = abc.user.uid;

```

渡される情報自体（ userCredential の値や型）は、firebase が規定したものになります。
（つまり userCredential.user にユーザー情報が入っている、などは決められている）


公式サイト：[Auth | JavaScript SDK  |  Firebase](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithEmailAndPassword)

上記ページを見ると、createUserWithEmailAndPassword は Promise<UserCredential> を返すことがわかります。

直後の then の後の userCredential の型が UserCredential です。UserCredential の仕様は以下のページを見るとわかります。


公式サイト：[auth | JavaScript SDK  |  Firebase](https://firebase.google.com/docs/reference/js/firebase.auth#usercredential)

UserCredential の構造を以下のようになっていることがわかります。

```
{
   additionalUserInfo?: AdditionalUserInfo | null;
   credential: AuthCredential | null;
   operationType?: string | null;
   user: User | null
}
```