Fix Keycloak auth: optional chaining for useAuth hook

.env.local

@@ -2,6 +2,12 @@ REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
 REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
 REACT_APP_ENV=local
+
+# Keycloak OIDC
+REACT_APP_KEYCLOAK_ENABLED=true
+REACT_APP_KEYCLOAK_URL=https://keycloak.mini.cloud.fiskerinc.com
+REACT_APP_KEYCLOAK_REALM=compute-auth
+REACT_APP_KEYCLOAK_CLIENT_ID=ota-portal
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=http://localhost/ota_update

src/components/App/index.jsx

@@ -24,11 +24,19 @@ function AppContent() {
   );
 }
 
+const onSigninCallback = () => {
+  // Remove OIDC params from URL after signin
+  window.history.replaceState({}, document.title, window.location.pathname);
+};
+
 function App() {
   // Only wrap with AuthProvider if Keycloak is enabled
   if (isKeycloakEnabled()) {
     return (
-      <AuthProvider {...keycloakConfig}>
+      <AuthProvider 
+        {...keycloakConfig}
+        onSigninCallback={onSigninCallback}
+      >
         <AppContent />
       </AuthProvider>
     );

src/components/SSOForm/index.jsx

@@ -1,6 +1,7 @@
 import { Button } from "@material-ui/core";
 import clsx from "clsx";
 import React, { useEffect } from "react";
+import { useAuth } from "react-oidc-context";
 
 import { useUserContext } from "../Contexts/UserContext";
 import useStyles from "../useStyles";
@@ -12,9 +13,8 @@ const getCode = (search) => {
   return s.get("code");
 };
 
-// Keycloak-enabled version of the form
+// Keycloak-enabled version of the form - only rendered when inside AuthProvider
 function KeycloakSignInForm() {
-  const { useAuth } = require("react-oidc-context");
   const classes = useStyles();
   const { getAuthorizeURL, signIn, signInWithKeycloak, fetching } = useUserContext();
   const auth = useAuth();
@@ -23,19 +23,18 @@ function KeycloakSignInForm() {
   useEffect(() => {
     const code = getCode(document.location.search);
     // Only process if it's a Cognito code (not a Keycloak callback)
-    // Keycloak uses 'state' param that react-oidc-context handles
-    if (!code || auth.isLoading || auth.isAuthenticated) return;
+    if (!code || auth?.isLoading || auth?.isAuthenticated) return;
     signIn(code);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Handle Keycloak authentication callback
   useEffect(() => {
-    if (auth.isAuthenticated && auth.user) {
+    if (auth?.isAuthenticated && auth?.user) {
       signInWithKeycloak(auth.user);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [auth.isAuthenticated, auth.user]);
+  }, [auth?.isAuthenticated, auth?.user]);
 
   const handleKeycloakLogin = () => {
     auth.signinRedirect();
@@ -62,9 +61,9 @@ function KeycloakSignInForm() {
         color="primary"
         className={classes.submit}
         onClick={handleKeycloakLogin}
-        disabled={fetching || auth.isLoading}
+        disabled={fetching || auth?.isLoading}
       >
-        {auth.isLoading ? "Loading..." : "Sign In with Keycloak"}
+        {auth?.isLoading ? "Loading..." : "Sign In with Keycloak"}
       </Button>
       
       <p><strong>Note: Your email address will be used as the user id</strong></p>

src/services/keycloak.js

@@ -10,7 +10,7 @@ export const keycloakConfig = {
   redirect_uri: CALLBACK_URL,
   post_logout_redirect_uri: CALLBACK_URL,
   response_type: 'code',
-  scope: 'openid profile email roles',
+  scope: 'openid',
   // Handle silent renew and callback automatically
   automaticSilentRenew: true,
   loadUserInfo: true,