【Firebase+Vue.js】リロード後にログイン中の認証情報を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、FirebaseとVue.jsで、リロード後にログイン中の認証情報を取得する方法をご紹介しています。

Firebaseのログイン認証後にページをリロードすると情報が表示されないんだけど、どうすればいいの？

上記の疑問にお答えします。

では、解説していきます。

本記事の問題点

現在、FirebaseとVue.jsでWebアプリを開発中なのですが、Firebaseでログイン認証後にリロードすると、取得した認証情報が消えてしまいます。画面に出力している内容もきれいさっぱり消えてなくなります。

どういうこと！

年甲斐もなくパソコンの前で一人憤慨していたわけですが、よく考えてみると、ログイン認証後に取得した情報をセッションやストレージに保存しているわけでもなく、ただ画面上に出力していただけなので、当たり前といえば当たり前の現象です。

ただ、触り始めたばかりのサービスなのでどう対応すればいいのかわけわからん状態です。Google先生に頼もうにも知識がないので検索するすべがわかりません。

なのでとりあえず公式ドキュメントを読み漁りました。とくに下記のページを重点的に。

https://firebase.google.com/docs/auth/web/manage-users?hl=ja

結果的に、上記ページのファーストビューの中に答えがありました。

リロード後にログイン中の認証情報を取得すれば解決

本現象を解決するには、リロードした後にログイン中の認証情報を再取得すれば良いのです！つまりcreatedで下記を実行すればいいわけですね。

//ログイン中の認証情報を取得する
firebase.auth().onAuthStateChanged(function(user) {
    if(user){
        // ログイン中の場合の処理
    } else {
        // ログインしていない場合の処理
    }
});

実際にVue.jsの形式で書くとこんな感じ！

//ファイル：/src/components/Profile.vue

import firebase from 'firebase'

export default {
    name: 'Profile',
    data () {
        return {
            username: '',
            useremail: '',
        }
    },
    created(){
        //ログイン中の認証情報を取得する
        firebase.auth().onAuthStateChanged(function(user){
            if(user){
                this.username = user.displayName
                this.useremail = user.email
            }
        })
    },
}

一応これでリロード後も認証情報が取得できるようになり、画面の表示が戻りました。課題解決！めでたしめでたし。

なわけですが、私的にはクライアント側のどこにログイン中の認証情報が保存されているのか気になったので調べることに。

認証情報は何処に保存されているのか

Chromeの開発ツールで色々見ていると、下記にログイン中の認証情報が保存されていました！

Application > IndexedDB > firebaseLocalStorageDb > firebaseLocalStorage

IndexedDbに保存されているようです。IndexedDbは永続的にデータを保存することができるため便利ですが、多人数でPCを触れるような環境だと勝手にユーザー情報を使用されるリスクなどがあります。他人にログインされて使われるなんて考えただけで恐ろしい……。

なので、セッション単位で認証情報を取り扱う方法がないか、またも公式ドキュメントを読み漁ることに！

すると下記のページに答えがありました！

https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja#supported_types_of_auth_state_persistence

上記ページの永続性タイプの設定を参考にFirebaseの設定を変更します。具体的には一行追加するだけで済みます。私の場合はFirebaseの設定はmain.jsで行っているので、main.jsに一行追加します。

//ファイル：/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import firebase from 'firebase'

Vue.config.productionTip = true

const firebaseConfig = {
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  projectId: "PROJECTID",
  storageBucket: "STORAGEBUCKET",
  messagingSenderId: "MESSAGINGSENDERID",
  appId: "APPID"
}
firebase.initializeApp(firebaseConfig);
//下記を追加
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

以上でログイン中の認証情報の保存先をIndexedDbからSessionStorageに変更することができます。セッション単位なので、タブやブラウザを閉じたタイミングで削除されるので、安心ですね。