vue.jsとfirebaseでサクッと認証周り実装


# めんどくさい
認証周りの実装は楽しくないし、パスワードの再設定やらメールの設定やら考えることが結構多いです。
そこで、エンジニアらしく怠惰になるべく、firebaseさんに力をお借りすることにしました。

# お借りした機能
- ユーザーの作成
- ユーザーログイン
- パスワード再設定
- メール認証

# 実装
firebaseのプラグイン追加 [参考](https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241#firebase%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)


```javascript
import firebase from 'firebase'

const config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
}

firebase.initializeApp(config)

export default firebase
```

↑のfirebaseを呼び出して使っていきます。



store/user.js

```javascript
import firebase from '../plugins/firebase'

export const user = {
  namespaced: true,

  state: () => ({
  }),

  mutations: {
  },

  getters: {
    isAuth (getters) {
      // メール認証するまで
      const user = firebase.auth().currentUser
      return user ? user.emailVerified : false
    }
  },

  actions: {
    // ユーザー作成
    async createUser ({commit, dispatch}, {email, password}) {
      const auth = firebase.auth()

      await auth.createUserWithEmailAndPassword(email, password)
        .then(async () => {
          await dispatch('confirmEmail')
        })
        .catch(error => {
          dispatch('alertMessage', {errorCode: error.code, errorMessage: error.message})
        })
    },
    async confirmEmail () {
      const user = firebase.auth().currentUser

      user.sendEmailVerification().then(() => {
        alert('確認メールを送信しました。メールアドレスをご確認ください')
      }).catch(error => {
        console.log(error)
      })
    },
    // パスワードの再設定
    async sendPasswordResetEmail ({dispatch}, email) {
      const auth = firebase.auth()

      auth.sendPasswordResetEmail(email)
      .then(() => {
        alert('メールを送信しました')
      }).catch(error => {
        dispatch('alertMessage', {errorCode: error.code, errorMessage: error.message})
      })
    },
    async login ({dispatch}, {email, password}) {
      firebase.auth().signInWithEmailAndPassword(email, password)
        .catch(function (error) {
          dispatch('alertMessage', {errorCode: error.code, errorMessage: error.message})
        })
    },
    // アラートメッセージ
    alertMessage ({commit}, {errorCode, errorMessage}) {
      switch (errorCode) {
        case 'auth/wrong-password':
          alert('パスワードが違います')
          break
        case 'auth/invalid-email':
          alert('無効のメールアドレスです')
          break
        case 'auth/user-not-found':
          alert('ユーザーが存在しません')
          break
        case 'auth/weak-password':
          alert('6文字以上でパスワードを設定してください')
          break
        case 'auth/email-already-in-use':
          alert('すでに存在しているメールアドレスです')
          break
        default:
          alert(errorMessage)
          break
      }
    }
  }
}

```
storeにユーザーモジュールを追加し、作成しました。
storeを使い実装することで、vueファイルにfirebaseのコードを書かないよう努めました。
このuser.jsのコードをvueファイルから呼び出すだけで使用することができます。


login.vue
※[Vuetify](https://vuetifyjs.com/ja/)を使用しております。


```vuejs
<template>
  <div>
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md4>
        <v-dialog v-model="dialog">
          <v-card>
            <v-card-title class="title elevation-1">ログイン</v-card-title>
            <v-card-text>
              <v-form>
                <v-text-field
                  v-model="email"
                  label="学校メールアドレス"
                />
                <v-text-field
                  v-model="password"
                  label="パスワード"
                />
              </v-form>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn @click="submit" class="white--text">ログイン</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-flex>
    </v-layout>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    ...mapActions({
      login: 'user/login'
    }),
    async submit () {
      await this.login({email: this.email, password: this.password})
    }
  }
}
</script>
```

今回はログインの機能のみのvueファイルを書いています。
反響があれば、追記していきます。
ざっくり書いている部分が多いので、細かい解説や他のvueファイルなどはちょっとずつ追記していきます。

# 終わり
firebase全く無知の状態からほんの数時間（他のユーザー作成などの部分含め）で、実装することができたので
実装コストがかからず本当に良いと思います。


個人的によかったのは、ログインなどでエラーになった際に適切なエラーコードを返してくれるところです。
これのおかげでユーザーに適切なエラーメッセージを伝えることができます。

![スクリーンショット 2019-02-03 18.01.47.jpg](https://qiita-image-store.s3.amazonaws.com/0/227810/e4881583-9817-6d2c-5b0a-6af6b148977b.jpeg)
![スクリーンショット 2019-02-03 18.02.03.jpg](https://qiita-image-store.s3.amazonaws.com/0/227810/4c15724b-eb84-39dc-2cd6-7ed71b355aa0.jpeg)



**エラーコードに関する詳細** → [firebaseドキュメント](https://firebase.google.com/docs/reference/node/firebase.auth.Auth#sendPasswordResetEmail)


# 最後に
firebase最高。