move BrowserRouter above AppProvider, wire onUnauthorized redirect to /login

src/main.jsx

@@ -82,38 +82,46 @@ const routerMapping = [
 /** Reads authConfig from AppProvider context and passes it to AuthProvider. */
 function AppContent() {
   const { authConfig } = useAppContext();
+  const navigate = useNavigate();
   return (
     <AuthProvider authConfig={authConfig}>
-      <BrowserRouter>
-        <AppTheme>
-          <CssBaseline enableColorScheme />
-          <Header routerMapping={routerMapping} />
+      <AppTheme>
+        <CssBaseline enableColorScheme />
+        <Header routerMapping={routerMapping} />
 
-          <Box sx={{ pb: 8 }}>
-            <Toolbar />
+        <Box sx={{ pb: 8 }}>
+          <Toolbar />
 
-            <Routes>
-              {routerMapping.map(({ path, component: Component }) => (
-                <Route
-                  key={path}
-                  path={path}
-                  element={<Component basePath={path.replace(/\/\*$/, "")} />}
-                />
-              ))}
-            </Routes>
-          </Box>
+          <Routes>
+            {routerMapping.map(({ path, component: Component }) => (
+              <Route
+                key={path}
+                path={path}
+                element={<Component basePath={path.replace(/\/\*$/, "")} />}
+              />
+            ))}
+          </Routes>
+        </Box>
 
-          <Footer />
-        </AppTheme>
-      </BrowserRouter>
+        <Footer />
+      </AppTheme>
     </AuthProvider>
   );
 }
 
+function AppWithAuth() {
+  const navigate = useNavigate();
+  return (
+    <AppProvider specConfiguration={specConfiguration} onUnauthorized={() => navigate("/login")}>
+      <AppContent />
+    </AppProvider>
+  );
+}
+
 root.render(
   <QueryClientProvider client={queryClient}>
-  <AppProvider specConfiguration={specConfiguration}>
-    <AppContent />
-  </AppProvider>
+  <BrowserRouter>
+    <AppWithAuth />
+  </BrowserRouter>
   </QueryClientProvider>
 );