Vue.jsにfirebaseでユーザー認証を導入

「プロジェクトの追加」をクリックすると入力画面が開くので入力してプロジェクト作成

ボタンをクリックすると、以下の画面が開く



これをコピーして貼り付ける。

main.js

import firebase from "firebase/app";
import "firebase/auth";

  //Firebaseの設定
  const firebase_config = {
    apiKey: "-----------------------------------",  // 見せられないよ！
    authDomain: "--------------------------------",
    databaseURL: "https://------------.firebaseio.com",
    projectId: "------------------------",
    storageBucket: "-----------------------.com",
    messagingSenderId: "-----------------"
  };
  firebase.initializeApp(firebase_config);
  

これをプッシュしたあと、Gitリポジトリ内にapiキーが上がっている場合に忠告メールをくれるGitGuardianというプログラムから「おい！やばいぞ！」と連絡が来ました。

一応firebaseの方でなんやかんややってくれているようでfirebaseのapiキーは知られてもたぶん安全らしいのですが、なんか不安なので環境変数というやつで後日やってみようと思います。それでは続きです。


firebaseのページで開発→Authenticationと進み、メール認証を有効にします。

ユーザー登録ページとサインアップ用のメソッドを作成します。
/app/javascript/Signup.vue

<template>
  <div class="signup user-information">
    <div>
        <h2>Signup</h2>
        <input type="text" placeholder="Email" v-model="usermail">
        <input type="password" placeholder="Password" v-model="password">
        <button @click="signUp">新規登録</button>
        <button @click="signIn" class="button-sub">ログインする</button>
    </div>
  </div>
</template>

<script>
import firebase from "firebase/app";
import "firebase/auth";

export default {
  name: 'Signup',
  data () {
    return {
      usermail: '',
      password: ''
    }
  },
  methods: {
     // これがサインアップのメソッド
    signUp: function () {
      firebase.auth().createUserWithEmailAndPassword(this.usermail, this.password)
        .then(user => {
          alert('Create account: ', this.usermail)
        })
        .catch(error => {
          alert(error.message)
        })
    },
    signIn() {
      this.$router.push('/signin')
    }
  }
}
</script>

これでサインアップが可能になりました。
次はログイン画面とログインメソッドを作成します。

<template>
  <div class="signin user-information">
    <div>
        <h2>Login</h2>
        <input type="text" placeholder="Email" v-model="usermail">
        <input type="password" placeholder="Password" v-model="password">
        <button @click="signIn">ログイン</button>
        <button @click="signUp" class="button-sub">登録する</button>
    </div>    
  </div>
</template>

<script>
import firebase from "firebase/app";
import "firebase/auth";

export default {
  name: 'Signin',
  data: function () {
    return {
      usermail: '',
      password: ''
    }
  },
  methods: {
    // ログイン用のメソッド
    signIn: function () {
      firebase.auth().signInWithEmailAndPassword(this.usermail, this.password).then(
        user => {
          alert('Success!')
        },
        err => {
          alert(err.message)
        }
      )
    },
    signUp(){
      this.$router.push('/signup')
    }
  }
}
</script>

これでログインも完成です。
しかし、この時点ではページをリロードしたときにログアウトしてしまいます。
Vuexとvuex-persistedstateを使うことでログイン状態を保持することができます。

naito-coding0322.hatenablog.com

参考リンク

Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita