Проблема с защищенными маршрутами, контекстным API и запросом аутентификации пользователя firebase

Я пишу базовое приложение CRUD React, которое использует Firebase для аутентификации. В данный момент я пытаюсь создать защищенный маршрут для компонента с именем Dashboard. Защищенный маршрут гарантирует, что любые инкапсулированные маршруты (такие как Dashboard) не будут отображаться, пока пользователь не аутентифицирован. Если пользователь не аутентифицирован, маршрутизатор перенаправляет на целевую страницу.

То, как я это делаю, смоделировано на этой статье:

Я подражал шаблону в статье выше, и он отлично работает. Когда я включаю firebase (в частности, firebase аутентификацию), мое приложение не отображает компонент Dashboard, даже когда пользователь вошел в систему. Вместо этого оно просто перенаправляет на целевую страницу

Я знаю, в чем проблема (я думаю), но я не уверен, как ее исправить.

Проблема заключается в том, что вызов firebase является асинхронной операцией, и панель мониторинга пытается загрузить до того, как будет завершен вызов firebase.

Я хочу знать, есть ли какие-либо изменения в моем коде, которые я могу сделать, чтобы это исправить.

Я мог бы сделать вызов API для firebase каждый раз, когда пользователь загружает защищенный маршрут (для проверки подлинности), но я бы предпочел установить проверку подлинности на состояние контекста и ссылаться на это состояние до тех пор, пока пользователь не войдет или не выйдет из системы.

Я поместил соответствующий код ниже. Все файлы находятся в каталоге src

Спасибо!

App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import {Switch} from 'react-router';
import Landing from './PageComponents/Landing';
import {Provider} from './PageComponents/Context';
import Dashboard from './PageComponents/Dashboard';
import ProtectedRoute from './PageComponents/ProtectedRoute';

class App extends Component {
  render() {
    return (
      <div className="App">

      <Provider>
        <BrowserRouter>

        <div>
          <Switch>

            <Route exact={true} path="/" component={Landing} />
            <ProtectedRoute exact path="/dashboard" component={Dashboard} /> 

          </Switch>
        </div>

        </BrowserRouter>
        </Provider>

      </div>
    );
  }
}

export default App;

PageComponents/Context.js

import React from 'react';
import { getUser } from '../services/authentication';

let Context = React.createContext();

class Provider extends React.Component {

    state = {
        userID: true,
        user:undefined,
        authenticated:false
    }

    async getUser(){

        try{

            let user = await getUser();

            return user

        } catch(error){

            console.log(error.message)
        }

    }


    async componentDidMount(){

        console.log("waiting to get user")
        let user = await this.getUser();
        console.log(user)
        console.log("got user")

        this.setState({
          userID: user.uid,
          user:user,
          authenticated:true
        })
    }


    render(){
        console.log(this.state)
        return(
            <Context.Provider value={{   
                 state:this.state
            }}>
                {this.props.children}
            </Context.Provider>
        )
    }
}

const Consumer = Context.Consumer;

export {Provider, Consumer};

PageComponents/Dashboard

import * as React from 'react';
import {Consumer} from '../../PageComponents/Context';



class Dashboard extends React.Component {
  render(){

    console.log("Dashboard component loading....")

     return(


        <Consumer>
            {(state)=>{
                console.log(state)
                return(
                  <div>
                    <p> Dashboard render</p>
                  </div>
                )
             }}
        </Consumer>
     )
  }
}

export default Dashboard

PageComponents/ProtectedRoute

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { Consumer } from '../PageComponents/Context';


const ProtectedRoute = ({ component: Component, ...rest }) => {
    console.log("Middleware worked!");

    return (

        <Consumer>
               {(context)=>{
                /*________________________BEGIN making sure middleware works and state is referenced */
                  console.log(context);
                  console.log("Middle ware");
                /*________________________END making sure middleware works and state is referenced */

                 console.log(  context.getState().authenticated + " <--- is authenticated from ProtectedRoute. true or false?")

                  if(context.state.authenticated){

                    return(

                        <Route {...rest} render={renderProps => {
                           console.log(renderProps);
                           return (<Component {...renderProps} />)
                        }}/>

                    )  

                  }else{

                    return <Redirect to="/"/>

                  }

                }}

        </Consumer>
    )


};

export default ProtectedRoute;

услуги/аутентификации

import firebase from '../../services/firebase'




const getUser = () =>{

    return new Promise((resolve, reject) => {   // Step 3. Return a promise

         //___________________ wrapped async function

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

                if(user){

                    resolve(user);   //____This is the returned value of a promise

                 }else{

                   reject(new Error("Get user error"))

                }
         })

       //_____________________END wrapped async function  

    });

}


export {getUser }