Tengo este archivo de instalación:

firebase.ts

 import { initializeApp } from 'firebase/app'; import * as firebaseAuth from 'firebase/auth'; import config from './config'; const firebaseApp = initializeApp(config.env.firebase); export const app = firebaseApp; export const auth = firebaseAuth.initializeAuth(firebaseApp); export const signInWithEmailAndPassword = (email: string, password: string) => firebaseAuth.signInWithEmailAndPassword(auth, email, password); export const signOut = () => { console.log('sign out'); return firebaseAuth.signOut(auth); };

Así es como estoy iniciando sesión

iniciar sesión.tsx

 // Button onclick... await signInWithEmailAndPassword(email, password); history.replace('/');

Y en mi componente PrivateRoute tengo

 const PrivateRouteComponent: React.FC<Props> = ({ component: Component, ...rest }) => { const [currentUser, loading, error] = useAuthState(auth); console.log('[currentUser, loading, error]', [currentUser, loading, error]); if (loading) { return null; }

El comportamiento real es:

1. puedo iniciar sesión
2. Puedo navegar a otras páginas y mi usuario persiste
3. Refresco la página y el usuario vuelve como null

Lo esperado es que el usuario persista si actualizo la página.

¿Por qué pierdo el usuario cuando actualizo toda la página? ¿Puedo mantener el usuario después de actualizar la página de alguna manera?

Contexto adicional:

 "firebase": "^9.6.7", // migrating from ^7 "react-firebase-hooks": "^5.0.2", // migrating from ^2