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

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

问题：登录用户只有在通过下一个路由在应用程序内导航时，才可以正常使用firebase auth的web应用程序，只要他们刷新页面或打开新的帐户选项卡，就不再登录

问题：这非常令人沮丧，因为这个问题只发生在生产过程中。在staging&localhost环境中根本没有问题

---

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;

authoc.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 ...
                }
            </> )
        }
});

导出默认应用=>(
类authoc扩展应用程序{
_isMounted=错误；
建造师（道具）{
超级（道具）
this.state={
加载：false，
isVerified:false，
idToken:未定义，
I验证：错误
}
}
异步组件didmount（）{
这个。_isMounted=true；
等待初始化REBASE（）；
//onAuthStateChanged返回一个函数，我们将使用该函数取消订阅侦听器
this.unsubscribeMethod=await auth（）.onAuthStateChanged（this.\u handleStateChange）；
}
//如果用户为空，我们将不再进行身份验证
_handleStateChange=（用户）=>{
让那=这；
如果（用户）{
//页面刷新时不在此传递。。。
user.getIdToken（）.then（函数（idToken）{
那是一个州({
加载：对，
idToken:idToken，
isVerified:user.emailVerified，
已验证：！！用户
});
});
}否则{
...
}
}
组件将卸载（）{
if（此.unsubscribe方法）{
此.unsubscribe方法（）；
}
这个。_isMounted=false；
}
render（）{
报税表（
{this.state.loading？
: 
…正在加载。。。
}
)
}
});

\u 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);

从“下一个/App”导入应用程序；
从“../utils/authentication/authoc”导入authoc；
类MyApp扩展了应用程序{
render（）{
const{Component，pageProps，isAuthenticated，idToken，isVerified}=this.props；
返回(
);
}
}
导出默认authoc（MyApp）；

可能是什么问题？所有这些代码都在localhost和staging url上工作，而不是在生产环境中工作

---

编辑：

我指出了问题所在，我只是将我的生产密钥与staging进行了切换，这就意味着问题不是来自Heroku或我的代码，而是来自Firebase配置本身

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