Firebaseの認証状態をvuexで保持する

公開:2021/02/21
更新:2021/02/22
2 min読了の目安(約2500字TECH技術記事

はじめに

今回Firebaseを使った簡単なアプリを作成していたところ、google認証後の状態のキープになかなか手こずってしまったので、備忘録として残しておきます。

問題点

google認証でログインしてからリロードをすると認証状態が消えてしまいます。

解決手順

1. firebaseの認証状態の設定をする
2. store.jsにて認証状態を取得するmutation及びactionの作成、stateで状態管理
3. 認証状態が必要なページでactionから取得する

firebaseの設定

まずはfirebase.jsで認証状態の永続性を設定します。

firebase
import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxxxxxxxxx.appspot.com",
      messagingSenderId: "xxxxxxxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  )
 // 今回は現在のセッションまたはタブでのみ状態が保持される設定 
  firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => {
    console.log('Initialized!') // 確認用のメッセージ
  })
}

export default firebase

action, mutationの作成 + stateで認証状態の管理

次にStoreにおいて認証状態を取得するaction, mutationを作成していきます。

store
export const actions = {
  login({ commit }) {
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then((result) => {
      const user = result.user
      commit('loginStateChange', true)
      console.log('Login was successful')
      commit('setUserUid', user.uid)
      commit('setUserName', user.displayName)
      this.$router.push('/dashboard')
    }).catch((error) => {
      const errorCode = error.code
      console.log('error : ' + errorCode)
    });
  },
  // 認証状態の取得をするaction
  onAuth({ commit }) {
    firebase.auth().onAuthStateChanged(user => {
      user = user ? user : {}
      commit('setUserUid', user.uid)
      commit('loginStatusChange', user.uid ? true : false)
    })
  },
  ...
}
store
export const mutations = {
  loginStatusChange(state, status) { // 認証状態を双方向に変化
    state.loggedIn = status
  },
  setUserUid(state, userUid) { // user_uidの取得
    state.userUid = userUid
  },
}
store
export const state = () => ({
  userUid: '',
  loggedIn: false,
})

認証状態の取得

あとは認証状態を取得したいページでcreatedを用いて予め取得出来るようにします。

index
<script>
export default {
  ...
  created() {
    this.$store.dispatch('onAuth')
  },
}
</script>

これでリロードを行っても認証状態が継続されているはずです。他にもっと良い方法があるという方はぜひコメントをお願いします。

参考にさせていただいた記事

認証状態の永続性
Vue vuexでfirebaseのログイン保持