SPAのNuxt + Firebaseでユーザー認証状態の永続化をしたい

Question

Firebaseとnuxtを組み合わせたカラーコードを管理するアプリを作成しているのですが、storeにてログイン情報を管理中リロードをすると認証したユーザー情報が消えてしまいます。公式ドキュメントを見ながらfirebase.jsとstoreを以下のように設定したのですが解決が見えません。何卒よろしくお願いいたします。

import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp(option)
  firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => {
    console.log('Initialized!')
  })
}

export default firebase

import firebase from '~/plugins/firebase'
const db = firebase.firestore();
const colorsRef = db.collection('colors')

export const state = () => ({
  userUid: '',
  userName: '',
  loggedIn: false,
  colors: []
})

export const mutations = {
  loginUser(state) {
    state.loggedIn = true
  },
  setUserUid(state,userUid) {
    state.userUid = userUid
  },
  setUserName(state,userName) {
    state.userName = userName
  },
  addColor(state, color) {
    state.colors.push(color)
  },
  logoutUser(state) {
    state.loggedIn = false
    state.userUid = ""
    state.userName = ""
  },
}

export const actions = {
  login({ commit }) {
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then((result) => {
      const user = result.user
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          commit('loginUser')
          console.log('Login was successful')
          commit('setUserUid', user.uid)
          commit('setUserName', user.displayName)
        }
      })
    }).catch((error) => {
      var errorCode = error.code
      console.log('error : ' + errorCode)
    });
  },
  logout({ commit }) {
    firebase.auth().signOut().then(() => {
      commit('logoutUser')
      console.log('Logout was successful')
    }).catch((error) => {
      const errorCode = error.code
      console.log('error :' + errorCode)
    })
  },
  fetchColors({ commit }) {
    colorsRef.get().then(res => {
      res.forEach((doc) => {
        commit('addColor', doc.data())
      })
    }).catch(error => {
      console.log('error : ' + error)
    })
  },
  addColor({commit}, color) {
    console.log(color)
    colorsRef.add({
      name: color.name,
      code: color.code,
      user: color.user
    }).then((docRef) => {
      commit('addColor', color)
    }).catch((error) => {
      console.error("Error adding color: ", error);
    })
  }
}

export const getters = {
  getUserUid(state) {
    return state.userUid
  },
  getUserName(state) {
    return state.userName
  },
  getColors(state) {
    return state.colors
  }
}

Answer 1

ログイン状態を継続したいページ内でcreated()を用いることでstoreの状態をキープ出来ました。