Как остановить firebase re-auth () при каждой перезагрузке страницы в реактивном приложении?

Question

Итак, у меня есть отличное приложение реакции, использующее авторизацию firebase и firestore. Все работает нормально, кроме

Всякий раз, когда я перезагружаю страницу, когда пользователь уже вошел в систему ... ссылки на панель навигации меняются на секунду. Похоже, приложение автоматически повторяет вход (повторную авторизацию) пользователя при каждой перезагрузке страницы. Почему так? Как от этого избавиться? Некоторый похожий пример кода

    import React, {useState, useEffect} from 'react';
    import {Switch, Route} from 'react-router-dom'
    import firebase from 'firebase/App'

    export const App = () => {

        const [isAuth, setIsAuth] = useState()
        const auth = firebase.auth()

        useEffect(() => {
            auth.onAuthStateChanged(user => {
                if(user) {
                    setIsAuth(true)
                } else {
                    setIsAuth(false)
                }
            })
        }, [isAuth])

        return(
            <div className="App">
                <Navbar />
                <Switch>
                    <Route to="/signIn" component={Login} />
                    <Route to="/signUp" component={SignUp} />
                    <Route to="/signOut" component={SignOut} />
                </Switch>
            </div>
        )
    };

Answer 1

Наконец-то исправили.

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

Решение имеет два простых шага

1. После входа сохраните учетные данные пользователя в локальном хранилище.

   firebase.auth().onAuthStateChanged(user=>{
       if (user) {
           // store the user on local storage
           localStorage.setItem('user', JSON.stringify(user));
       } else {
           // removes the user from local storage on logOut
           localStorage.removeItem('user');
       }
   })
   

2. Получить пользователя из локального хранилища в панели навигации компонент

   const userLocal = JSON.parse(localStorage.getItem('user'));
   userLocal ? <SignedInLinks/> : <SignedOutLinks/>;