How to persist the user authentication with firebase in react(+reactfire)

Question

I'm building my first react app with firebase(+reactfire).

When I login, I do the following:

const signIn = async (email: string, password: string) => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      await navigate('/');
    } catch (error: any) {
      setServerError(error.message);
      console.log(error);
    }
  };

I get redirected to my dashboard, where I print the user:

export const Dashboard = () => {
  const auth = useAuth();
  console.log(auth.currentUser);
  return (
    <div>
      <h1>Dashboard</h1>
    </div>
  );
};

And my user is displayed properly. But if I hit F5, my console.log display null.

In my index.tsx, I've the following:

root.render(
  <React.StrictMode>
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </FirebaseAppProvider>
  </React.StrictMode>
);

and in my App.tsx, I've this:

function App() {
  const firebaseApp = useFirebaseApp();
  const firestoreInstance = getFirestore(firebaseApp);
  const auth = getAuth(firebaseApp);
  auth.setPersistence(browserLocalPersistence); // <<-------- I taught this would for the persistence?
  return (
    <FirestoreProvider sdk={firestoreInstance}>
      <AuthProvider sdk={auth}>
        <Routes>
          <Route path="/" element={<AuthenticatedLayout></AuthenticatedLayout>}>
            <Route path="/" element={<Dashboard />} />
            <Route path="/queue" element={<Queue />} />
            <Route path="/tickets" element={<Tickets />} />
          </Route>
          <Route path="/login" element={<Login></Login>}></Route>
          <Route path="/register" element={<Register></Register>}></Route>
        </Routes>
      </AuthProvider>
    </FirestoreProvider>
  );
}

Any idea what I'm missing?

Answer 1

Well, I found the answer 5min later:

Apparently, useAuth().currentUser was not updated, but if I do the following at the same place:

  const { status, data: user } = useUser();
  console.log(status, user);

my user is kept even on refresh