feat: Fix provider order using react router 9

Due to changes in react router 9, some of the providers needed to be moved to the root layout.

src/web/src/App.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import ErrorPage from "./components/ErrorPage";
-import MainNavbar from "./components/MainNavbar";
+import MainLayout from "./components/MainLayout";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <MainNavbar />,
+    element: <MainLayout />,
     errorElement: <ErrorPage />,
     children: [
       {
@@ -30,11 +30,7 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
-  return (
-    <React.Fragment>
-      <RouterProvider router={router} />
-    </React.Fragment>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;

src/web/src/components/AuthProviderWithNavigate.tsx

@@ -0,0 +1,33 @@
+import { Auth0Provider, type AppState } from "@auth0/auth0-react";
+import { useNavigate } from "react-router-dom";
+
+type AuthProviderWithNavigateProps = {
+  children: React.ReactNode;
+};
+
+const AuthProviderWithNavigate: React.FC<AuthProviderWithNavigateProps> = ({ children }) => {
+  const navigate = useNavigate();
+
+  const domain = (import.meta.env.VITE_APP_AUTH0_DOMAIN as string) || "";
+  const clientId = (import.meta.env.VITE_APP_AUTH0_CLIENT_ID as string) || "";
+
+  const onRedirectCallback = (appState?: AppState) => {
+    navigate(appState?.returnTo || window.location.pathname);
+  };
+
+  return (
+    <Auth0Provider
+      domain={domain}
+      clientId={clientId}
+      authorizationParams={{
+        audience: "https://api.kdvmanager.nl/",
+        redirect_uri: window.location.origin,
+      }}
+      onRedirectCallback={onRedirectCallback}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};
+
+export default AuthProviderWithNavigate;

src/web/src/components/MainLayout.tsx

@@ -0,0 +1,20 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import AuthProviderWithNavigate from "./AuthProviderWithNavigate";
+import MainNavbar from "./MainNavbar";
+import { Outlet } from "react-router-dom";
+
+const queryClient = new QueryClient();
+
+function AuthProviderLayout() {
+  return (
+    <AuthProviderWithNavigate>
+      <QueryClientProvider client={queryClient}>
+        <MainNavbar>
+          <Outlet />
+        </MainNavbar>
+      </QueryClientProvider>
+    </AuthProviderWithNavigate>
+  );
+}
+
+export default AuthProviderLayout;

src/web/src/components/MainNavbar.tsx

@@ -13,12 +13,14 @@ import MenuItem from "@mui/material/MenuItem";
 import AdbIcon from "@mui/icons-material/Adb";
 import { useNavigate } from "react-router-dom";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
-import { Outlet } from "react-router-dom";
 import { AppBar } from "@mui/material";
 
 const settings = ["Profile", "Account", "Dashboard", "Logout"];
+type MainNavbarProps = {
+  children: React.ReactNode;
+};
 
-function MainNavbar() {
+const MainNavbar: React.FC<MainNavbarProps> = ({ children }) => {
   const navigate = useNavigate();
   const { loginWithRedirect, logout } = useAuth0();
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
@@ -190,10 +192,10 @@ function MainNavbar() {
           </Toolbar>
         </Container>
       </AppBar>
-      <Outlet />
+      {children}
     </>
   );
-}
+};
 export default withAuthenticationRequired(MainNavbar, {
   onRedirecting: () => (
     <Box

src/web/src/index.tsx

@@ -2,9 +2,6 @@ import React from "react";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { Auth0Provider } from "@auth0/auth0-react";
 import { createRoot } from "react-dom/client";
 import { SnackbarProvider } from "notistack";
 import NiceModal from "@ebay/nice-modal-react";
@@ -13,36 +10,20 @@ import i18n from "./i18n";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 
-const queryClient = new QueryClient();
-const domain = (import.meta.env.VITE_APP_AUTH0_DOMAIN as string) || "";
-const clientId = (import.meta.env.VITE_APP_AUTH0_CLIENT_ID as string) || "";
-
 const container = document.getElementById("root") as Element;
 const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <Auth0Provider
-      domain={domain}
-      clientId={clientId}
-      authorizationParams={{
-        audience: "https://api.kdvmanager.nl/",
-        redirect_uri: window.location.origin,
-      }}
-    >
-      <QueryClientProvider client={queryClient}>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <I18nextProvider i18n={i18n}>
-            <SnackbarProvider>
-              <NiceModal.Provider>
-                <App />
-              </NiceModal.Provider>
-            </SnackbarProvider>
-          </I18nextProvider>
-        </LocalizationProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
-    </Auth0Provider>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <I18nextProvider i18n={i18n}>
+        <SnackbarProvider>
+          <NiceModal.Provider>
+            <App />
+          </NiceModal.Provider>
+        </SnackbarProvider>
+      </I18nextProvider>
+    </LocalizationProvider>
   </React.StrictMode>,
 );