migrate to react-oidc-context

Author: Phillezi

bun.lockb

@@ -22,7 +22,6 @@
     "@mui/material": "^7.3.9",
     "@mui/material-next": "^6.0.0-alpha.126",
     "@mui/x-tree-view": "^7.29.10",
-    "@react-keycloak/web": "^3.4.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@sanity/eventsource": "^5.0.2",
@@ -39,19 +38,20 @@
     "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^7.2.2",
     "js-base64": "^3.7.8",
-    "keycloak-js": "^24.0.5",
     "lodash": "^4.17.23",
     "million": "latest",
     "notistack": "^3.0.2",
     "numeral": "^2.0.6",
+    "oidc-client-ts": "^3.4.1",
     "punycode": "^2.3.1",
-    "react": "^19.2.0",
+    "react": "^19.2.4",
     "react-apexcharts": "^1.9.0",
     "react-cookie": "^7.2.2",
     "react-copy-to-clipboard": "^5.1.1",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.4",
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^14.1.3",
+    "react-oidc-context": "^3.3.0",
     "react-router-dom": "^6.30.3",
     "simplebar": "^6.3.3",
     "simplebar-react": "^3.3.2",

package.json

@@ -1,6 +1,7 @@
 // keycloak
-import { AuthContextWrapperProvider } from "./contexts/AuthContextWrapper";
-import { keycloak } from "./keycloak";
+import { oidcConfig } from "./keycloak";
+import { AuthProvider } from "react-oidc-context";
+
 // routes
 import Router from "./Router";
 // theme
@@ -18,7 +19,7 @@ import { AdminResourceContextProvider } from "./contexts/AdminResourceContext";
 
 export default function App() {
   return (
-    <AuthContextWrapperProvider authClient={keycloak}>
+    <AuthProvider {...oidcConfig}>
       <AlertContextProvider>
         <ResourceContextProvider>
           <AdminResourceContextProvider>
@@ -48,6 +49,6 @@ export default function App() {
           </AdminResourceContextProvider>
         </ResourceContextProvider>
       </AlertContextProvider>
-    </AuthContextWrapperProvider>
+    </AuthProvider>
   );
 }

src/App.tsx

@@ -18,6 +18,7 @@ import Onboarding from "./pages/onboarding";
 import Inbox from "./pages/inbox/Inbox";
 import Teams from "./pages/teams/Teams";
 import { GPU } from "./pages/gpu/GPU";
+import Callback from "./components/Callback";
 
 export default function Router() {
   return useRoutes([
@@ -28,6 +29,7 @@ export default function Router() {
         { path: "/", element: <Landing /> },
         { path: "/status", element: <Status /> },
         { path: "tiers", element: <Tiers /> },
+        { path: "oauth2/callback", element: <Callback /> },
         {
           path: "deploy",
           element: (

src/Router.tsx

@@ -0,0 +1,80 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
+
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Paper,
+  Typography,
+} from "@mui/material";
+import Page from "./Page";
+
+export default function Callback() {
+  const navigate = useNavigate();
+  const auth = useAuth();
+
+  useEffect(() => {
+    if (!auth.isLoading) {
+      if (auth.isAuthenticated) {
+        // Clean up the URL
+        const url = new URL(window.location.href);
+        url.searchParams.delete("code");
+        url.searchParams.delete("state");
+        window.history.replaceState({}, document.title, url.pathname);
+
+        // Redirect to /deploy
+        navigate("/deploy", { replace: true });
+      }
+    }
+  }, [auth.isLoading, auth.isAuthenticated, navigate]);
+
+  if (auth.isLoading) {
+    return (
+      <Page>
+        <Box component="div" sx={{ minHeight: "100vh" }}>
+          <CircularProgress />
+          <Typography mt={2} variant="h6">
+            Authenticating...
+          </Typography>
+        </Box>
+      </Page>
+    );
+  }
+
+  if (auth.error) {
+    return (
+      <Page>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100vh"
+        >
+          <Paper
+            elevation={3}
+            sx={{ padding: 4, textAlign: "center", maxWidth: 400 }}
+          >
+            <Typography variant="h5" color="error" gutterBottom>
+              Authentication Failed
+            </Typography>
+            <Typography variant="body1" sx={{ wordBreak: "break-word" }}>
+              {auth.error?.message || "Unknown error occurred during login."}
+            </Typography>
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{ mt: 2 }}
+              onClick={() => auth.signinRedirect()}
+            >
+              Try Again
+            </Button>
+          </Paper>
+        </Box>
+      </Page>
+    );
+  }
+
+  return null;
+}

src/components/Callback.tsx

@@ -1,6 +1,6 @@
 import { Link as RouterLink } from "react-router-dom";
 import { Box } from "@mui/material";
-import { useKeycloak } from "@react-keycloak/web";
+import { useKeycloak } from "../hooks/useKeycloak";
 import { useContext } from "react";
 import { ThemeModeContext } from "../contexts/ThemeModeContext";
 

src/components/Logo.tsx

@@ -1,11 +1,11 @@
 import { Navigate } from "react-router-dom";
-import { useKeycloak } from "@react-keycloak/web";
+import { useKeycloak } from "../hooks/useKeycloak";
 import LoadingPage from "./LoadingPage";
-import { useContext } from "react";
-import { AuthContextWrapper } from "../contexts/AuthContextWrapper";
+import { useAuth } from "react-oidc-context";
+//import { AuthContextWrapper } from "../contexts/AuthContextWrapper";
 
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  const { error } = useContext(AuthContextWrapper);
+  const { error } = useAuth();
   const { keycloak, initialized } = useKeycloak();
 
   const renderPage = (children: React.ReactNode) => {

src/components/ProtectedRoute.tsx

@@ -3,7 +3,7 @@ import { Stack, Typography, Button, Alert, Box } from "@mui/material";
 import GpuClaimModal from "./GPUClaimModal";
 import { GpuClaimCreate } from "../../temporaryTypesRemoveMe";
 import { createGpuClaim } from "../../api/deploy/gpuClaims";
-import { useKeycloak } from "@react-keycloak/web";
+import { useKeycloak } from "../../hooks/useKeycloak";
 import { enqueueSnackbar } from "notistack";
 import useAdmin from "../../hooks/useAdmin";
 

src/components/admin/DRAConfigPanel.tsx

@@ -20,7 +20,7 @@ import {
 import useFilterableResourceState, {
   DEFAULT_PAGESIZE,
 } from "../hooks/useFilterableResourceState";
-import { useKeycloak } from "@react-keycloak/web";
+import { useKeycloak } from "../hooks/useKeycloak";
 import { getUsers } from "../api/deploy/users";
 import { errorHandler } from "../utils/errorHandler";
 import { enqueueSnackbar } from "notistack";