Vue.js + TypeScript で Google認証をFirebaseで実現したい

Question

FirebaseのGoogle認証を使いたく、テスト用のコードを書いているのですが、期待した動作をしてくれません。

やりたいことですが、Certificateと書かれたボタンを押すと、ユーザ認証が通り、同URLに戻るのですが、そこでv-ifがtrueになってユーザ情報を表示する。という仕組みにしたいです。
現在、下記のコードを書いたのですが、ユーザ認証後、同URLに戻りはするのですが、currentUserがnullのまま変更されません。

        public currentUser = firebase.auth().currentUser;

この部分で取得していると考えているのですがうまく動作しません。

間違っている部分を教えて頂きたいです

<template>
    <div class="home">
        <div v-if="currentUser">
            {{currentUser}}
            <button @click="signOut">
                LogOut
            </button>
        </div>
        <button @click="signIn">
            Certificate
        </button>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import * as firebase from "firebase/app";
    import "firebase/auth";

    @Component
    export default class Home extends Vue {

        public currentUser = firebase.auth().currentUser;

        public signIn() {
            if (!this.currentUser) {
                const provider = new firebase.auth.GoogleAuthProvider();
                firebase.auth().signInWithRedirect(provider).then(
                    (result) => {
                        alert(result);
                    }
                );
            }
        }
        public signOut() {
            firebase.auth().signOut();
        }
    }
</script>

<style scoped>

</style>

Answer 1

リダイレクト後このページに戻ってきた時に、おそらくfirebase.initializeApp()によって非同期にログインが行われます。そのため、

        public currentUser = firebase.auth().currentUser;

が実行されるときにはログインが間に合っていない可能性が十分にあります。

その可能性を考慮して、ログイン状態が変化をリッスンするようにします。

class Home extends Vue {

    // ...

    unsubscribe = null

    mounted() {
        // ログイン状態をリッスン
        this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.currentUser = user
            } else {
                this.currentUser = null
            }
        })
    }

    beforeDestroy() {
        // リッスン解除
        this.unsubscribe()
    }
}

参考
現在ログインしているユーザーを取得する - Firebaase

Comments

[reud]

いけました！！！ありがとうございました！！！！！