JavaScript
Vue.js
Firebase
Vuex
nuxt.js

[Nuxt]firebaseのgoogle Auth無限にユーザー情報を取得できないとき by @penguin_fuyuno


結論

chromeの設定が悪い!!

嘘だろと思わるかもしれないが実際に起きたトラブルです


現象

ログインボタンを押す

googleLogin: function() {

console.log("googleLogin");
firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());

で リダイレクト 認証して リダイレクトさせる

次にログイン状態の判定

firebase.auth().onAuthStateChanged(user => {

console.log(user);
if (user) {
console.log("true");
this.isLogin = true;
this.userData = user;
} else {
console.log("false");
this.isLogin = false;
this.userData = null;
}
})

そして ログイン状態を判定させて ユーザー情報を入れる

が!!!!!

ユーザー情報が入らない!!!!

なんで?????


原因と因果

chrome://settings/content/cookies

スクリーンショット 2019-05-22 21.06.40.png

ここの上から三番目が原因

ここがオンになっていると 認証機能が正しく動作しない


This browser is not supported or 3rd party cookies and data may be disabled.


https://github.com/firebase/firebase-js-sdk/issues/865

https://support.cloudhq.net/how-to-enable-3rd-party-cookies-in-google-chrome-browser/


発見方法

すべては safariでlocalhost をつかったらうまく動作した!!

そこから物語ははじまった

chromeだとだめ

裏付けはこれでできます

googleLogin: function() {

console.log("googleLogin");
// firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
// ここを入れ替える
firebase.auth().getRedirectResult().then(function(authData) {
console.log(authData);
}).catch(function(error) {
console.log(error);
});
},

で コンソールで確認をする

すると

This browser is not supported or 3rd party cookies

があーだーこーだって言われる

これがさきほどの結論と解決方法につながるのである


感想

一日半かかりました

パンダになるくらい悩みました

コードが原因ではなかったです

今日もなんとか生きてます

これを読んでもらってあなたは10分で解決できることを願います

最後まで読んでくれてありがとうございます(。・ω・。)/