質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.21%

Reactにてfirebase-toolsのauth認証について、エラーになる原因がわからない

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 77

3aki

score 2

前提・実現したいこと

Reactの環境にてfirebase-toolsのauth認証の関数にてPromiseを使ってコールバック受け取りをしようとしているのですが、どうしてもエラーに入ってしまいます。
1回目走らせるとresultがnullでかつgetUserがnullでエラーになっており、2回目以降はいきなりエラーに入られてしまいます。

発生している問題・エラーメッセージ

1回目

Auth.js:31 Google Sign In
Auth.js:37 1
Auth.js:41 2
Auth.js:42 {user: null}
Auth.js:47 3
Auth.js:48 TypeError: Cannot read property 'getUid' of null
    at Auth.js:45
    at Mt.i.a.i.g (auth.esm.js:88)
    at zt (auth.esm.js:91)
    at Ut (auth.esm.js:91)
    at St.n.fc (auth.esm.js:90)
    at xt (auth.esm.js:84)


2回目以降

Auth.js:31 Google Sign In
Auth.js:37 1
Auth.js:47 3
Auth.js:48 w {code: "auth/web-storage-unsupported", message: "This browser is not supported or 3rd party cookies and data may be disabled.", a: null}a: nullcode: "auth/web-storage-unsupported"message: "This browser is not supported or 3rd party cookies and data may be disabled."__proto__: Error

該当のソースコード

import React from "react";
import Firebase, { Firestore } from './Firebase';

export default class Auth extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: null,
        };
        this.initialization();
    }

    getUser = () => {
        return this.state.user;
    }

    initialization = () => {
        Firebase.auth().onAuthStateChanged(user => {
            if (user) {
                console.log(user);
                this.setState({ user: user });
                console.log(this.getUser());
            } else {
                console.log("user is null");
            }
        });
    }

    // Googleでサインイン
    googleSignIn = () => {
        console.log("Google Sign In");
        const provider = new Firebase.auth.GoogleAuthProvider();

        Firebase.auth().signInWithPopup(provider);   // signInWithPopup or signInWithRedirect

        return new Promise((resolve, reject) => {
            console.log("1");
            Firebase.auth()
                .getRedirectResult()
                .then(result => {
                    console.log("2");
                    console.log(result); // 一回目ここでnullが入って
                    // 登録あり→利用画面へ
                    // 登録なし→新規登録画面へ 
                    resolve(this.checkUserId(this.getUser().getUid)); // 一回目getUser()がnullでエラーになる。
                }).catch(error => { // 二回目以降はいきなりエラーになる
                    console.log("3");
                    console.log(error);
                    reject();
                });
        });
    }

    // サインアウト
    signOut = () => {
        console.log("Sign Out");
        Firebase.auth().signOut().then(() => {
            console.log("Sign Out successful");
        }).catch(error => {
            console.log(error);
        });
    }

    // DBに登録があるか確認をする
    checkUserId = userId => {
        console.log("4");
        return new Promise((resolve, reject) => {
            console.log("5");
            console.log("User Id is ", userId);
            Firestore.collection("members").where("userId", "==", userId)
                .get()
                .then(querySnapshot => {
                    console.log("6");
                    let result = false;
                    querySnapshot.some(doc => {
                        console.log("7");
                        if (doc.data().userId == userId) {
                            console.log("8");
                            result = true;
                            return true;
                        }
                    });
                    resolve(result);
                })
                .catch(error => {
                    console.log("9");
                    console.log("Error getting documents: ", error);
                    reject();
                });
        });
    }
}

改善したコード

import Firebase, { Firestore } from './Firebase';

export default class Auth {
    constructor() {
        this.user = null;
        this.checkUuidFlag = false;
        this.onUuidChecked = result => { };

        Firebase.auth().onAuthStateChanged(user => {
            console.log("Call onAuthStateChanged.");
            if (user) {
                user = this.cuustomUserState(user);
                console.log("user is ", user);
                this.user = user;
                if (this.checkUuidFlag) {
                    this.checkUuidRegisteredInDb();
                    this.checkUuidFlag = false;
                }
            } else {
                console.log("user is null");
            }
        });
    }

    setOnUuidChecked = func => {
        this.onUuidChecked = func;
    }

    // Googleでサインイン
    googleSignIn = () => {
        console.log("Google Sign In");
        this.checkUuidFlag = true;
        const provider = new Firebase.auth.GoogleAuthProvider();

        Firebase.auth().signInWithPopup(provider);   // signInWithPopup or signInWithRedirect

        Firebase.auth().getRedirectResult().then(result => {
            console.log("Google Sign In successful.");
            if (result != null) console.log("Get result.");
        }).catch(error => {
            console.log(error);
        });
    }

    // サインアウト
    signOut = () => {
        console.log("Sign Out");
        Firebase.auth().signOut().then(() => {
            console.log("Sign Out successful.");
        }).catch(error => {
            console.log(error);
        });
    }

    // DBに登録があるか確認をする
    checkUuidRegisteredInDb = () => {
        if (this.user == null) {
            this.onUuidChecked(false);
            return;
        }
        const uuid = this.user.uid;

        console.log("User Id is ", uuid);
        Firestore.collection("members").where("userId", "==", uuid)
            .get()
            .then(querySnapshot => {
                console.log("Check members database.");
                let result = false;
                querySnapshot.some(doc => {
                    if (doc.data().uuid == uuid) {
                        console.log("Match uuid.");
                        result = true;
                        return true; // breakの役割
                    }
                });
                this.onUuidChecked(result);
            })
            .catch(error => {
                console.log("Error getting documents: ", error);
                this.onUuidChecked(false);
            });
    }

    cuustomUserState = user => {
        const user_ = {
            displayName: null,
            email: null,
            emailVerified: null,
            f: null,
            fb: null,
            isAnonymous: null,
            l: null,
            m: null,
            oa: null,
            pa: null,
            phoneNumber: null,
            photoURL: null,
            refreshToken: null,
            tenantId: null,
            uid: null,
            xa: null,
            ya: null,
        };

        user_.displayName = user.displayName;
        user_.email = user.email;
        user_.emailVerified = user.emailVerified;
        user_.f = user.f;
        user_.fb = user.fb;
        user_.isAnonymous = user.isAnonymous;
        user_.l = user.l;
        user_.m = user.m;
        user_.oa = user.oa;
        user_.pa = user.pa;
        user_.phoneNumber = user.phoneNumber;
        user_.photoURL = user.photoURL;
        user_.refreshToken = user.refreshToken;
        user_.tenantId = user.tenantId;
        user_.uid = user.uid;
        user_.xa = user.xa;
        user_.ya = user.ya;

        return user_;
    }
}

補足情報(FW/ツールのバージョンなど)

"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"date-fns": "^2.16.1",
"esri-leaflet-geocoder": "^2.3.4",
"firebase": "^8.2.1",
"firebase-tools": "^9.2.0",
"formik": "^2.2.6",
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-leaflet": "^3.0.5",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"styled-components": "^5.2.1",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hoshi-takanori

    2021/02/17 12:14

    単にデータを保持したいだけなら普通のプロパティとして this.state = 〜 のように代入すればいいだけですが、React の setState はデータが更新されたら表示も更新されるというのが重要なポイントで…。

    キャンセル

  • 3aki

    2021/02/17 12:42

    new Auth().textだと表示できましたが、Auth.textだとundefinedになってしまいます。

    キャンセル

  • plasticgrammer

    2021/02/17 17:37

    割込みですみません。エラーの原因は下記サイトの情報が参考になりそうな気がします。
    https://note.com/yorifuji/n/n0d80aceeead8

    キャンセル

回答 1

0

ドメインというのを詳しく調べて、URLの最初のところだということを知り、それをそのままfirebaseConfigのauthDomainに当てはめたら動きました。
自分の場合は「localhost:5000」でした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/02/22 06:05

    解決してませんでした。

    キャンセル

  • 2021/02/23 20:20

    getRedirectResult内だとううまく受け取れないので、onAuthStateChangedないでどうにか受け取り処理させることにしました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る