Аутентификация Firebase onAuthStateChanged

Question

Я настраиваю аутентификацию Firebase с помощью простого приложения React, которое после входа в систему перенаправляет на новую страницу (и изменяется панель навигации).Я следую указаниям Робина Виеруха (https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/#react-firebase).

. Я уже настроил Firebase таким образом, чтобы он был экземпляром контекста, и его нужно создать только один раз. Я использую onAuthStateChanged, чтобы определить,пользователь вошел в систему, что соответственно изменит панель навигации.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import * as serviceWorker from './serviceWorker';

import App from './components/App';
import Firebase, { FirebaseContext } from './components/Firebase';

ReactDOM.render(
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
);

serviceWorker.unregister();

// initializing the Firebase instance only once and using value prop to pass to context

src / components / App / index.js:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { withFirebase } from '../Firebase';

import Navigation from '../Navigation';
import LandingPage from '../Landing';
import SignInPage from '../SignIn';
import HomePage from '../Home';

import * as ROUTES from '../../constants/routes';

// route to components are implemented depending on route
// if there is a match in the prop then the component is displayed

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      authUser: null,
    };
  }

  componentDidMount() {
    this.props.firebase.auth.onAuthStateChanged(authUser => {
      authUser
        ? this.setState({ authUser })
        : this.setState({ authUser: null });
    });
  }

  render() {
    return (
    <Router>
      <div>
        <hr />
        <Navigation authUser = {this.state.authUser} />
        <hr />

        ...

      </div>
    </Router>
    );  
  }
}

export default withFirebase(App);

src / components / Firebase / context.js:

import React from 'react';

const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
    <FirebaseContext.Consumer>
        {firebase => <Component {...props} firebase={firebase} />}
    </FirebaseContext.Consumer>
);

export default FirebaseContext;

src / components / Firebase / firebase.js:

import app from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
    ...
};

class Firebase {
    contructor() {
        app.initializeApp(firebaseConfig);

        this.auth = app.auth();
    }

    // *** Auth API ***

    doSignInWithEmailAndPassword = (email, password) =>
        this.auth.signInWithEmailAndPassword(email, password);

    doSignOut = () =>
        this.auth.signOut();
}

export default Firebase;

src / components / Firebase / index.js:

import FirebaseContext, { withFirebase} from './context';
import Firebase from './firebase';

export default Firebase;

export { FirebaseContext , withFirebase };

Я получаю ошибку "Cannot read property 'onAuthStateChanged' of undefined". Любая помощь будет принята с благодарностью, поскольку я уже часами пытаюсь найти информацию в Интернете. Спасибо!