Fix: Moved keycloak provider into @providers.tsx

web/src/lib/providers.tsx

@@ -1,22 +1,45 @@
+import { ReactKeycloakProvider } from '@react-keycloak/web'
 import { NuqsAdapter } from 'nuqs/adapters/tanstack-router'
 import { Toaster } from "@/components/ui/sonner";
 import { ConfirmProvider } from "@/components/ui/confirm-modal";
 import { ThemeProvider } from "next-themes";
+import keycloak from "@/keycloak";
 
-export function Providers({ children }: { children: React.ReactNode }) {
+const isSecureContext = globalThis.isSecureContext || globalThis.location.hostname === 'localhost';
+
+const initOptions: Keycloak.KeycloakInitOptions = {
+    onLoad: "login-required",
+    pkceMethod: isSecureContext ? "S256" : undefined,
+    responseMode: "query",
+    checkLoginIframe: false,
+};
+
+export function Providers({
+    children,
+    onKeycloakEvent,
+}: {
+    children: React.ReactNode;
+    onKeycloakEvent?: (event: string, error: unknown) => void;
+}) {
     return (
-        <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            themes={['light', 'dark', 'deuteranopia', 'protanopia', 'tritanopia', 'system']}
+        <ReactKeycloakProvider
+            authClient={keycloak}
+            initOptions={initOptions}
+            onEvent={onKeycloakEvent}
         >
-            <NuqsAdapter>
-                <ConfirmProvider>
-                    {children}
-                </ConfirmProvider>
-                <Toaster />
-            </NuqsAdapter>
-        </ThemeProvider>
+            <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                themes={['light', 'dark', 'deuteranopia', 'protanopia', 'tritanopia', 'system']}
+            >
+                <NuqsAdapter>
+                    <ConfirmProvider>
+                        {children}
+                    </ConfirmProvider>
+                    <Toaster />
+                </NuqsAdapter>
+            </ThemeProvider>
+        </ReactKeycloakProvider>
     );
-}
+}

web/src/main.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { ReactKeycloakProvider } from '@react-keycloak/web'
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
@@ -11,15 +10,6 @@ import { EmailEntry } from './components/EmailEntry'
 import { SimulationOops } from './components/SimulationOops'
 import { appBasePath, isAppRoute } from './lib/app-path'
 
-const isSecureContext = globalThis.isSecureContext || globalThis.location.hostname === 'localhost';
-
-const initOptions: Keycloak.KeycloakInitOptions = {
-  onLoad: "login-required",
-  pkceMethod: isSecureContext ? "S256" : undefined,
-  responseMode: "query",
-  checkLoginIframe: false,
-};
-
 // Create a new router instance
 const router = createRouter({
   routeTree,
@@ -88,13 +78,11 @@ const App = () => {
     <>
       <AppLoader visible={isLoading} label="Connecting to SecureLearning…" />
       {!isLoading && (
-        <ReactKeycloakProvider authClient={keycloak} initOptions={initOptions} onEvent={onEvent}>
-          <ErrorBoundary>
-            <Providers>
-              <RouterProvider router={router} />
-            </Providers>
-          </ErrorBoundary>
-        </ReactKeycloakProvider>
+        <ErrorBoundary>
+          <Providers onKeycloakEvent={onEvent}>
+            <RouterProvider router={router} />
+          </Providers>
+        </ErrorBoundary>
       )}
     </>
   )