誰でも5分で作れるfirebase:version9とVue.jsのログイン実装！！！

firebaseの記事がほとんどver8の記事ですので、今から使い始める方は参考にしていただければと思います。

バックエンドの知見がなくても5分でつくれるログイン実装処理です。

今回vuetifyを導入していますが、htmlタグに書き換えてもらっても大丈夫です。

<h2>firebaseの初期設定とVue.jsを繋げる</h2>

firebaseののプロジェクトを作成したら、左上の歯車を押して、プロジェクト設定を開く。

VueCLIに

```
npm install firebase
```

を入力しその下にある初期化プログラムをmain.jsに貼り付ける

main.js

```javascript
import Vue from 'vue'
import App from './App.vue'

import vuetify from './plugins/vuetify'
import { initializeApp } from "firebase/app";

Vue.config.productionTip = false

const firebaseConfig = {


  //各々のユニークな値


};

initializeApp(firebaseConfig);


new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

```

これで準備完了

<h2>新規登録実装</h2>
register.vue

```javascript
<template>
  <v-card width="400px" class="mx-auto mt-5">
    <v-card-title>
      <h1 class="display-1">新規登録</h1>
    </v-card-title>
    <v-card-text>
      <v-form>
        <v-text-field
          prepend-icon="mdi-account-circle"
          label="email"
          v-model="email"
        />
        <v-text-field
          v-bind:type="showPassword ? 'text' : 'password'"
          @click:append="showPassword = !showPassword"
          prepend-icon="mdi-lock"
          v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
          label="パスワード"
          v-model="password"
        />
        <v-btn class="info" @click="submit">登録</v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

export default {
  name: "register",
  data() {
    return {
      showPassword: false,
      password: "",
      email:""
    };
  },
  methods: {
    submit: function () {
      const auth = getAuth();
      createUserWithEmailAndPassword(auth, this.email, this.password)
        .then((userCredential) => {
          const user = userCredential.user;
          console.log(user);
          alert("新規登録完了")
        })
        .catch((error) => {
          const errorCode = error.code;
          alert(errorCode);
        });
    },
  },
};
</script>

```

<h4>解説</h4>
firebase8との違いはimportの中身。
formの中の[email][password]に値を入れてfirebaseに送信。




<h2>ログイン実装</h2>



login.vue

```javascript
<template>
  <v-card width="400px" class="mx-auto mt-5">
    <v-card-title>
      <h1 class="display-1">ログイン</h1>
    </v-card-title>
    <v-card-text>
      <v-form>
        <v-text-field
          prepend-icon="mdi-account-circle"
          label="email"
          v-model="email"
        />
        <v-text-field
          v-bind:type="showPassword ? 'text' : 'password'"
          @click:append="showPassword = !showPassword"
          prepend-icon="mdi-lock"
          v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
          label="パスワード"
          v-model="password"
        />
        <v-row>
        <v-btn class="info" @click="submit">ログイン</v-btn>
        </v-row>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
export default {
  data() {
    return {
      showPassword: false,
      password: "",
      email: "",
    };
  },
  methods: {
    submit() {
      const auth = getAuth();
      signInWithEmailAndPassword(auth, this.email, this.password)
        .then((userCredential) => {
          // Signed in
          const user = userCredential.user;
          alert("ログイン成功",user);
        })
        .catch((error) => {
          const errorCode = error.code;
          alert(errorCode);
        });
     },
  },
};
</script>
```

<h4>解説</h4>

新規登録との違いは

```javascript
signInWithEmailAndPassword(auth, this.email, this.password)
```

のみ。

自動で、firebaseに一致しているものがあるか調べてくれる。