【Nuxt.js】firebase基礎編(Auth版)：アカウント作成をできるようにしよう

# 前置き
![picture_pc_3ed3fd808751888ba93edad151c3f3b3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/9f8256c4-a531-48a3-d42f-b73e618f45c4.png)

firebase系の記事が増えてきました🌟🤗
ログインの記事は公開しているので
今度はアカウント作成部分を作ります！
この部分だけなら
5分もかからないと思います…笑
firebase使えば本当にめちゃくちゃ簡単です💕

こちらは有料記事にて公開します🎈🧸
・作成時にメールの送信
・エラー別の対処
ここでは純粋に
アカウント作成のみを記載してます！

メールアドレスログインのコードに
付け加えるように書いていきます✍️
https://note.com/aliz/n/n7f4ae08ba828

📝他のログイン記事
Googleログイン
https://note.com/aliz/n/nbda9579d979a
twitterログイン
https://note.com/aliz/n/na2d2f41d4877
facebookログイン
https://note.com/aliz/n/n428bc927b86f

# コードの付け足し
アカウント作成については公式のココ📌
firebase Guides
Create a password-based account

[Authenticate with Firebase using Password-Based Accounts using Javascript](https://firebase.google.com/docs/auth/web/password-auth#create_a_password-based_account)
この関数を使うようですね👀
.createUserWithEmailAndPassword()

**【register.vue】**
まずは登録フォームを作り
それを引数で渡せるようにしましょう！
これはlogin.vueをほぼコピペして少し変更してます。
・dispatchで呼び出すactionsをregisterに変更
・全体のdivのclass名loginをregisterに変更

```register.vue
<template>
 <div
   class="register"
 >
   <h1
     class="text"
   >
     アカウント登録
   </h1>
   <form
     class="form"
     @submit.prevent
   >
     <label class="label">
       <span class="label">
         email
       </span>
       <input
         class="input"
         type="text"
         v-model="email"
       >
     </label>
     <label class="label">
       <span class="label">
         password
       </span>
       <input
         class="input"
         type="password"
         v-model="password"
       >
     </label>
     <button
       class="button"
       type="submit"
       @click="register"
     >
       Register
     </button>
   </form>
   <nuxt-link
     to="/login"
     class="link"
   >
     ログインはこちら
   </nuxt-link>
 </div>
</template>

<script>
export default {
 computed: {
   user () {
     return this.$store.getters['user']
   },
 },
 data () {
   return {
     email: '',
     password: '',
   }
 },
 methods: {
   register () {
     this.$store.dispatch('register', {email: this.email, password: this.password})
   }
 },
}
</script>
```

【store/index.js】
Vuexのactionsにregisterを追加します🌟

```store/index.js
import firebase from '~/plugins/firebase'

export const state = () => ({
 user: {
  uid: '',
  email: '',
  login: false,
 },
})

export const getters = {
 user: state => {
  return state.user
 }
}

export const actions = {
 login({ dispatch }, payload) {
  firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
    .then(user => {
        console.log('成功！')
        dispatch('checkLogin')
      }).catch((error) => {
        alert(error)
      })
 },
 checkLogin ({ commit }) {
  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      commit('getData', { uid: user.uid, email: user.email })
      commit('switchLogin')
    }
  })
 },
 register ({ dispatch, commit }, payload) {
   firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
   .then(user => {
     console.log(user)
     dispatch('checkLogin')
   }).catch(function (error) {
     console.log({'code':error.code, 'message':error.message})
   })
  },
}

export const mutations = {
 getData (state, payload) {
  state.user.uid = payload.uid
  state.user.email = payload.email
 },
 switchLogin (state) {
  state.user.login = true
 },
}
```

【結果】
registerで登録をすると
![picture_pc_3ed3fd808751888ba93edad151c3f3b3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/2a973057-f8ea-104f-aef6-e0bdbf3df528.png)

firebaseのAuthenticationで
アカウントが作成されているのが
分かります🤗

![picture_pc_2f9011a316351012f12e1345123623b1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/15c91d1b-87f1-2f42-aee7-3ca466185718.png)

簡単ですね🎉✨
ほぼコピペでいけちゃいますね🕶w
なんて楽なんでしょう…✨