(Firebase и реагировать), как я могу проверить, если пользователь вошел в систему до визуализации компонентов?

Question

В настоящее время я пытаюсь создать веб-приложение с аутентификацией React и Firebase.

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

MainPage

const MainPage= () => {
  return (
    <PageTemplate>
      {...}
    <PageTemplate>
  );
}

PageTemplate

const PageTemplate= ({children}) => {
  return (
    <div>
      <Header>
      <div>
        {children}
      </div>
    </div>
  );
};

Заголовок

class HeaderContainer extends Component {
  render(
    return (
      if(logged in){
        <LogOutButton />
      }else{
        <LoginButton />
      }
    );
  )
}

Сначала я попыталсяВызвать метод onAuthStateChanged в componentDidMount PageTemplate, но вскоре понял, что componentDidMount PageTemplate вызывается после заголовка, что приводило к рендерингу на короткую секунду, когда пользователь уже вошел в систему.

Затем я попытался вызватьМетод onAuthStateChanged в componentDidMount заголовка, но он не чувствуется правильным, поскольку мне приходилось вызывать метод onAuthStatechanged в дочерних компонентах PageTemplate каждый раз, когда мне нужно было проверять, вошел ли пользователь в систему или нет.

Я такперепутал, где использовать метод onAuthStateChanged.

Может кто-нибудь помочь? Буду очень благодарен за совет.