Electron-Vite-React - Persistent context accross routes

Question

I have an Electron-Vite React (TSX) application. I am pretty new to coding Electron-Vite-React; perhaps my problem is because I am not understanding all the subtilities of certains concepts...

I have a userProvider (context) (which retrieve currentUser's data after login, from local storage). The currentUser's data is used within the app (e.g. to display recent files opened in the sidebar, or displaying user's preferences in the 'configuration' page).

My application opens with a login form (which ask the user to type their email address to login). The currentUser's data is then retrieved from the localstorage and the user can access the application.

After the login, I am indeed redirected to the application's home page (which is the intention). However, from there, if I click on any route (on 'home' page or 'configuration' page, etc.), I am again redirected to the login page.

My understanding is that my application remounts when I try to access a specific route. This is at least what I understand from the logs that is cleared in the console after I select a route. Note that my currentUser is properly retrieved after login (this is what I can observe from my console logs).

Here is what my code look like in App.tsx:

import { FC, useEffect } from 'react'
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';

import AppLayout from './layouts/AppLayout';
import HomePage from './pages/HomePage';
import ProjectPage from './pages/ProjectPage';
import ScenarioPage from './pages/ScenarioPage';
import ConfigurationPage from './pages/ConfigurationPage';

import { ProjectProvider } from "./context/ProjectContext";
import { UserProvider, useUser } from "./context/UserContext";

import { Login } from "./components/Login";

const App: FC = () => {
    return (
        <UserProvider>
            <ProjectProvider>
                <Router>
                    <ProtectedRoutes />
                </Router>
            </ProjectProvider>
        </UserProvider>
    );
};

// Component for conditional rendering of routes
const ProtectedRoutes: FC = () => {
    const { currentUser, setCurrentUser } = useUser();

    const handleLoginSuccess = (email: string) => {
        setCurrentUser(email);
    };

    // For testing
    useEffect(() => {
        console.log('ProtectedRoutes - currentUser:', currentUser);
    }, [currentUser]);

    if (!currentUser) {
        return (
            <div className="flex h-screen items-center justify-center">
                <Login onLoginSuccess={handleLoginSuccess} />
            </div>
        );
    }

    // Main layout wrapping all pages
    return (
        <Routes>
            <Route path="/" element={<AppLayout />}>
                <Route index element={<HomePage />} />
                <Route path="project" element={<ProjectPage />} />
                <Route path="scenario/:id" element={<ScenarioPage />} />
                <Route path="configuration" element={<ConfigurationPage />} />
            </Route>
        </Routes>
    );
};

export default App;

Here is my AppLayout.tsx:

import { FC } from 'react';
import { Outlet } from 'react-router-dom';
import AppSidebar from '../components/AppSidebar';
import AppHeader from '../components/AppHeader';
import { SidebarProvider } from "../components/ui/sidebar";

const AppLayout: FC = () => {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main className="flex flex-col w-full h-screen">
        <AppHeader />
        <div className="flex flex-1 overflow-auto">
          <Outlet />
        </div>
      </main>
    </SidebarProvider>
  );
};

export default AppLayout;

From my understanding, from the code, the currentUser (which is defined in a userContext) should remain accessible in every routes, but the apparent 'remounting' of the application each time a route is selected seems to cause a problem. Is this a normal behavior? If not, do you see issue with my code / How would you normally manage to resolve this problem?

I can probably try to look at SessionStorage, and retrieve its data every time the application remount (during routing). However, I do not see this solution as particularly efficient (reloading user data at every page click...).

The idea is also to understand my errors, and apply best practices.

Thank you for your help.