antaeus.keycloak.react 2.0.0 → 2.1.0

package/dist/index.mjs

@@ -14,7 +14,7 @@ var defaultConfig = {
   scope: "openid profile email offline_access",
   features: {
     deviceFlow: false,
-    sessionMonitor: false,
+    sessionMonitor: true,
     autoRefresh: true
   },
   silentRenew: {
@@ -59,7 +59,11 @@ var KeycloakConfigBuilder = class {
       scope: config.scope,
       automaticSilentRenew: config.silentRenew.enabled,
       loadUserInfo: config.advanced.loadUserInfo,
-      silent_redirect_uri: config.silentRenew.silentRedirectUri
+      silent_redirect_uri: config.silentRenew.silentRedirectUri,
+      // Add PKCE support (required for public clients)
+      ...config.advanced.codeChallengeMethod && {
+        response_mode: "query"
+      }
     };
     return oidcSettings;
   }
@@ -239,7 +243,11 @@ function useTokenLifecycle(options) {
       onRefreshTokenExpired?.();
       const key = getStorageKey();
       localStorage.removeItem(key);
-      await auth.removeUser();
+      try {
+        await auth.removeUser();
+      } catch (error) {
+        log("Error removing user after max lifetime:", error);
+      }
       return false;
     }
     const expiresAt = auth.user.expires_at;
@@ -318,7 +326,9 @@ function useTokenLifecycle(options) {
         onRefreshTokenExpired?.();
         const key = getStorageKey();
         localStorage.removeItem(key);
-        auth.removeUser();
+        auth.removeUser().catch((error) => {
+          log("Error removing user during periodic check:", error);
+        });
       }
     }, 5 * 60 * 1e3);
     return () => clearInterval(intervalId);
@@ -495,22 +505,28 @@ var SessionMonitor = ({
 }) => {
   const auth = useAuth();
   const [timeRemaining, setTimeRemaining] = useState(null);
+  const [initialTimeRemaining, setInitialTimeRemaining] = useState(null);
   const [minimized, setMinimized] = useState(startMinimized);
   const [warningTriggered, setWarningTriggered] = useState(false);
   const [criticalTriggered, setCriticalTriggered] = useState(false);
   useEffect(() => {
     if (!auth.isAuthenticated || !auth.user?.expires_at) {
       setTimeRemaining(null);
+      setInitialTimeRemaining(null);
       return;
     }
+    let logoutTimeoutId = null;
     const updateTimeRemaining = () => {
       const expiresAt = auth.user.expires_at;
       const now = Math.floor(Date.now() / 1e3);
       const remaining = expiresAt - now;
+      if (initialTimeRemaining === null && remaining > 0) {
+        setInitialTimeRemaining(remaining);
+      }
       if (remaining <= 0) {
         setTimeRemaining(0);
         onExpired?.();
-        setTimeout(() => {
+        logoutTimeoutId = setTimeout(() => {
           auth.signoutRedirect();
         }, 2e3);
       } else {
@@ -526,13 +542,19 @@ var SessionMonitor = ({
     };
     updateTimeRemaining();
     const interval = setInterval(updateTimeRemaining, 1e3);
-    return () => clearInterval(interval);
+    return () => {
+      clearInterval(interval);
+      if (logoutTimeoutId) {
+        clearTimeout(logoutTimeoutId);
+      }
+    };
   }, [
     auth,
     warningThreshold,
     criticalThreshold,
     warningTriggered,
     criticalTriggered,
+    initialTimeRemaining,
     onWarning,
     onCritical,
     onExpired
@@ -555,9 +577,9 @@ var SessionMonitor = ({
     return "normal";
   }, [timeRemaining, warningThreshold, criticalThreshold]);
   const getProgress = useCallback(() => {
-    if (!timeRemaining || !auth.user?.expires_in) return 100;
-    return timeRemaining / auth.user.expires_in * 100;
-  }, [timeRemaining, auth.user]);
+    if (!timeRemaining || !initialTimeRemaining) return 100;
+    return Math.max(0, Math.min(100, timeRemaining / initialTimeRemaining * 100));
+  }, [timeRemaining, initialTimeRemaining]);
   if (!auth.isAuthenticated || timeRemaining === null) {
     return null;
   }
@@ -870,12 +892,27 @@ function buildZeroConfig(props) {
   const { authority, clientId, preset = "default", config: overrides = {} } = props;
   const presetConfig = mergeWithPreset(preset, overrides);
   const fullConfig = {
-    ...defaultConfig,
-    ...presetConfig,
     authority,
     clientId,
-    redirectUri: presetConfig.redirectUri || (typeof window !== "undefined" ? window.location.origin + "/" : "/"),
-    postLogoutRedirectUri: presetConfig.postLogoutRedirectUri || (typeof window !== "undefined" ? window.location.origin + "/" : "/")
+    redirectUri: presetConfig.redirectUri || defaultConfig.redirectUri || (typeof window !== "undefined" ? window.location.origin + "/" : "/"),
+    postLogoutRedirectUri: presetConfig.postLogoutRedirectUri || defaultConfig.postLogoutRedirectUri || (typeof window !== "undefined" ? window.location.origin + "/" : "/"),
+    scope: presetConfig.scope || defaultConfig.scope,
+    features: {
+      ...defaultConfig.features,
+      ...presetConfig.features
+    },
+    silentRenew: {
+      ...defaultConfig.silentRenew,
+      ...presetConfig.silentRenew
+    },
+    advanced: {
+      ...defaultConfig.advanced,
+      ...presetConfig.advanced
+    },
+    events: {
+      ...defaultConfig.events,
+      ...presetConfig.events
+    }
   };
   return fullConfig;
 }
@@ -970,6 +1007,7 @@ var ProtectedRoute = ({
   const { hasAnyRole, hasAllRoles } = useRoles();
   const { hasAnyScope, hasAllScopes } = useScopes();
   const location = useLocation();
+  const hasRedirected = useRef(false);
   const isAuthenticated = !auth.isLoading && auth.isAuthenticated;
   const policyAccess = policy && auth.user ? policy(auth.user, { location }) : null;
   const roleAccess = requiredRoles.length > 0 ? requireAllRoles ? hasAllRoles(requiredRoles) : hasAnyRole(requiredRoles) : null;
@@ -981,12 +1019,21 @@ var ProtectedRoute = ({
     }
   }, [unauthorizedReason, onUnauthorized]);
   useEffect(() => {
-    if (!auth.isLoading && !auth.isAuthenticated) {
+    if (!auth.isLoading && !auth.isAuthenticated && !hasRedirected.current) {
+      hasRedirected.current = true;
       auth.signinRedirect({
         redirect_uri: window.location.origin + location.pathname + location.search
+      }).catch((error) => {
+        hasRedirected.current = false;
+        console.error("[ProtectedRoute] Signin redirect failed:", error);
       });
     }
-  }, [auth.isLoading, auth.isAuthenticated, auth, location.pathname, location.search]);
+  }, [auth.isLoading, auth.isAuthenticated, location.pathname, location.search]);
+  useEffect(() => {
+    if (auth.isAuthenticated) {
+      hasRedirected.current = false;
+    }
+  }, [auth.isAuthenticated]);
   if (auth.isLoading) {
     return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent || /* @__PURE__ */ jsx(DefaultLoadingComponent, {}) });
   }
@@ -1442,14 +1489,14 @@ function useProtectedFetch(options = {}) {
     },
     [baseUrl]
   );
-  const getAuthHeader = useCallback(() => {
+  const getAuthHeader = () => {
     if (!auth.user?.access_token) {
       return {};
     }
     return {
       Authorization: `Bearer ${auth.user.access_token}`
     };
-  }, [auth.user]);
+  };
   const buildHeaders = useCallback(
     (requestHeaders) => {
       const headers = new Headers(requestHeaders);
@@ -1462,7 +1509,7 @@ function useProtectedFetch(options = {}) {
       });
       return headers;
     },
-    [getAuthHeader, customHeaders]
+    [customHeaders]
   );
   const protectedFetch = useCallback(
     async (url, init) => {