move BrowserRouter above AppProvider, wire onUnauthorized redirect to /login

src/main.jsx

@@ -82,9 +82,9 @@ 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} />
@@ -105,15 +105,23 @@ function AppContent() {
 
         <Footer />
       </AppTheme>
-      </BrowserRouter>
     </AuthProvider>
   );
 }
 
+function AppWithAuth() {
+  const navigate = useNavigate();
+  return (
+    <AppProvider specConfiguration={specConfiguration} onUnauthorized={() => navigate("/login")}>
+      <AppContent />
+    </AppProvider>
+  );
+}
+
 root.render(
   <QueryClientProvider client={queryClient}>
-  <AppProvider specConfiguration={specConfiguration}>
+  <BrowserRouter>
-    <AppContent />
+    <AppWithAuth />
-  </AppProvider>
+  </BrowserRouter>
   </QueryClientProvider>
 );