reactjs - Firebase 身份验证，在页面刷新时注销

Question

技术：我将 Firebase Auth 与 NextJS 和 React 一起使用。

问题：登录的用户只有在通过下一个路由在应用程序中导航时才能正常使用具有 Firebase 身份验证的 Web 应用程序，每当他们刷新页面或打开新的帐户选项卡时，他们就不再登录。

问题：这非常令人沮丧，因为这个问题只发生在生产中。暂存和本地主机环境完全没有问题。

---

firebase.js：初始化 firebase。

import getConfig from "next/config";
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/analytics';

const { publicRuntimeConfig } = getConfig();

export async function initializeFirebase() {
    if (!firebase.apps.length) {
        firebase.initializeApp(JSON.parse(publicRuntimeConfig.FIREBASE_CONFIG));

        if (publicRuntimeConfig.FIREBASE_ANALYTICS) {
            firebase.analytics();
        }
    }
}

export const auth = firebase.auth
export const db = firebase.firestore;
export default firebase;

AuthHoC.js：为了确保用户已连接，我用 HOC 包装我的页面。

export default App => (
    class AuthHoC extends App {
        _isMounted = false;

        constructor(props) {
            super(props)

            this.state = { 
                loading: false,
                isVerified: false,
                idToken: undefined,
                isAuthenticated: false
            }
        }


        async componentDidMount() {
            this._isMounted = true;
            await initializeFirebase();
            // onAuthStateChanged return a function that we'll use to unsubscribe our listener
            this.unsubscribeMethod = await auth().onAuthStateChanged(this._handleStateChange);
        }

        // is user is null, we're no longer authenticated
        _handleStateChange = (user) => {
            let that = this;
            if (user) {
                // NOT PASSING HERE ON PAGE REFRESH...
                user.getIdToken().then(function(idToken) { 
                    that.setState({
                        loading: true,
                        idToken: idToken,
                        isVerified: user.emailVerified,
                        isAuthenticated: !!user
                    });
                });
            } else {
                ...
            }
        }

        componentWillUnmount() {
            if (this.unsubscribeMethod) {
                this.unsubscribeMethod();
            }

            this._isMounted = false;
        }

        render() {
            return ( <>
                {this.state.loading ? 
                    <App {...this.props} {...this.state} /> 
                : 
                    ... loading ...
                }
            </> )
        }
});

_app.js：（NextJS）用高阶组件包装每个页面。

import App from "next/app";
import AuthHoC from '../utils/authentication/authHoC';

class MyApp extends App {
    render() {
        const { Component, pageProps, isAuthenticated, idToken, isVerified } = this.props;

        return (
            <Component 
                {...pageProps} 
                isAuth={isAuthenticated}
                idToken={idToken}  
                isVerified={isVerified}
            />
        );
    }
}

export default AuthHoC(MyApp);

可能是什么问题？所有这些代码都适用于 localhost 和 staging url，但不适用于生产。

---

编辑：

我查明了问题所在，我只是用 staging 切换了我的生产密钥并且它可以工作，这意味着问题不是来自 Heroku 或我的代码，而是来自我的 Firebase 配置本身。

主要区别在于产品使用分析。如果您有任何信息，我忘记配置任何建议都会有所帮助。

标签： reactjsfirebasefirebase-authenticationnext.js