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

前提・実現したいこと

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

該当のソースコード

JavaScript
1import React from "react";
2import Firebase, { Firestore } from './Firebase';
3
4export default class Auth extends React.Component {
5    constructor(props) {
6        super(props);
7        this.state = {
8            user: null,
9        };
10        this.initialization();
11    }
12
13    getUser = () => {
14        return this.state.user;
15    }
16
17    initialization = () => {
18        Firebase.auth().onAuthStateChanged(user => {
19            if (user) {
20                console.log(user);
21                this.setState({ user: user });
22                console.log(this.getUser());
23            } else {
24                console.log("user is null");
25            }
26        });
27    }
28
29    // Googleでサインイン
30    googleSignIn = () => {
31        console.log("Google Sign In");
32        const provider = new Firebase.auth.GoogleAuthProvider();
33        
34        Firebase.auth().signInWithPopup(provider);   // signInWithPopup or signInWithRedirect
35
36        return new Promise((resolve, reject) => {
37            console.log("1");
38            Firebase.auth()
39                .getRedirectResult()
40                .then(result => {
41                    console.log("2");
42                    console.log(result); // 一回目ここでnullが入って
43                    // 登録あり→利用画面へ
44                    // 登録なし→新規登録画面へ 
45                    resolve(this.checkUserId(this.getUser().getUid)); // 一回目getUser()がnullでエラーになる。
46                }).catch(error => { // 二回目以降はいきなりエラーになる
47                    console.log("3");
48                    console.log(error);
49                    reject();
50                });
51        });
52    }
53
54    // サインアウト
55    signOut = () => {
56        console.log("Sign Out");
57        Firebase.auth().signOut().then(() => {
58            console.log("Sign Out successful");
59        }).catch(error => {
60            console.log(error);
61        });
62    }
63
64    // DBに登録があるか確認をする
65    checkUserId = userId => {
66        console.log("4");
67        return new Promise((resolve, reject) => {
68            console.log("5");
69            console.log("User Id is ", userId);
70            Firestore.collection("members").where("userId", "==", userId)
71                .get()
72                .then(querySnapshot => {
73                    console.log("6");
74                    let result = false;
75                    querySnapshot.some(doc => {
76                        console.log("7");
77                        if (doc.data().userId == userId) {
78                            console.log("8");
79                            result = true;
80                            return true;
81                        }
82                    });
83                    resolve(result);
84                })
85                .catch(error => {
86                    console.log("9");
87                    console.log("Error getting documents: ", error);
88                    reject();
89                });
90        });
91    }
92}

改善したコード

JavaScript
1import Firebase, { Firestore } from './Firebase';
2
3export default class Auth {
4    constructor() {
5        this.user = null;
6        this.checkUuidFlag = false;
7        this.onUuidChecked = result => { };
8
9        Firebase.auth().onAuthStateChanged(user => {
10            console.log("Call onAuthStateChanged.");
11            if (user) {
12                user = this.cuustomUserState(user);
13                console.log("user is ", user);
14                this.user = user;
15                if (this.checkUuidFlag) {
16                    this.checkUuidRegisteredInDb();
17                    this.checkUuidFlag = false;
18                }
19            } else {
20                console.log("user is null");
21            }
22        });
23    }
24
25    setOnUuidChecked = func => {
26        this.onUuidChecked = func;
27    }
28
29    // Googleでサインイン
30    googleSignIn = () => {
31        console.log("Google Sign In");
32        this.checkUuidFlag = true;
33        const provider = new Firebase.auth.GoogleAuthProvider();
34        
35        Firebase.auth().signInWithPopup(provider);   // signInWithPopup or signInWithRedirect
36
37        Firebase.auth().getRedirectResult().then(result => {
38            console.log("Google Sign In successful.");
39            if (result != null) console.log("Get result.");
40        }).catch(error => {
41            console.log(error);
42        });
43    }
44
45    // サインアウト
46    signOut = () => {
47        console.log("Sign Out");
48        Firebase.auth().signOut().then(() => {
49            console.log("Sign Out successful.");
50        }).catch(error => {
51            console.log(error);
52        });
53    }
54
55    // DBに登録があるか確認をする
56    checkUuidRegisteredInDb = () => {
57        if (this.user == null) {
58            this.onUuidChecked(false);
59            return;
60        }
61        const uuid = this.user.uid;
62
63        console.log("User Id is ", uuid);
64        Firestore.collection("members").where("userId", "==", uuid)
65            .get()
66            .then(querySnapshot => {
67                console.log("Check members database.");
68                let result = false;
69                querySnapshot.some(doc => {
70                    if (doc.data().uuid == uuid) {
71                        console.log("Match uuid.");
72                        result = true;
73                        return true; // breakの役割
74                    }
75                });
76                this.onUuidChecked(result);
77            })
78            .catch(error => {
79                console.log("Error getting documents: ", error);
80                this.onUuidChecked(false);
81            });
82    }
83
84    cuustomUserState = user => {
85        const user_ = {
86            displayName: null,
87            email: null,
88            emailVerified: null,
89            f: null,
90            fb: null,
91            isAnonymous: null,
92            l: null,
93            m: null,
94            oa: null,
95            pa: null,
96            phoneNumber: null,
97            photoURL: null,
98            refreshToken: null,
99            tenantId: null,
100            uid: null,
101            xa: null,
102            ya: null,
103        };
104
105        user_.displayName = user.displayName;
106        user_.email = user.email;
107        user_.emailVerified = user.emailVerified;
108        user_.f = user.f;
109        user_.fb = user.fb;
110        user_.isAnonymous = user.isAnonymous;
111        user_.l = user.l;
112        user_.m = user.m;
113        user_.oa = user.oa;
114        user_.pa = user.pa;
115        user_.phoneNumber = user.phoneNumber;
116        user_.photoURL = user.photoURL;
117        user_.refreshToken = user.refreshToken;
118        user_.tenantId = user.tenantId;
119        user_.uid = user.uid;
120        user_.xa = user.xa;
121        user_.ya = user.ya;
122
123        return user_;
124    }
125}

補足情報（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"

hoshi-takanori

2021/02/17 02:48

この Auth クラスをどのように使いたいのでしょうか？ (前回のコメントに今気づきましたが、React コンポーネントとして使いたいわけではないように見受けられましたので。)

3aki

2021/02/17 02:54

SignInView.jsにて const auth = new Auth(); をして、ボタンを押された際に、 const result = this.auth.googleSignIn(); をして、受け取ったresultによって新規登録画面に画面遷移するか、サービス画面に画面遷移するか決めたいです。

hoshi-takanori

2021/02/17 02:58

つまり普通のクラスとして使いたいということですよね。その場合 React.Component を継承する必要はありませんし、setState メソッドはご自分で実装することになるかと思います。

3aki

2021/02/17 03:05

自身で実装する場合、なんてキーワードで検索したらサンプルコード出てきますでしょうか？

3aki

2021/02/17 03:30 編集

あいやそもそも、setStateを使いたかった理由として、Userデータをメモリ上に保持し続けたかったからなので、setState以外の方法でメモリ上に保持し続けられる方法があるなら、それでも大丈夫です。 AuthクラスにUserデータを保持し、他のクラスからAuth.～でアクセスできるのが理想です。

hoshi-takanori

2021/02/17 03:14

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

3aki

2021/02/17 03:42

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