antaeus.keycloak.react 1.0.6

package/dist/index.js

@@ -0,0 +1,956 @@
+'use strict';
+
+var react = require('react');
+var reactOidcContext = require('react-oidc-context');
+var jsxRuntime = require('react/jsx-runtime');
+var reactRouterDom = require('react-router-dom');
+var qrcode_react = require('qrcode.react');
+var oidcClientTs = require('oidc-client-ts');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+// src/components/KeycloakProvider.tsx
+
+// src/config/defaults.ts
+var defaultConfig = {
+  redirectUri: typeof window !== "undefined" ? window.location.origin + "/" : "/",
+  postLogoutRedirectUri: typeof window !== "undefined" ? window.location.origin + "/" : "/",
+  scope: "openid profile email offline_access",
+  features: {
+    deviceFlow: false,
+    sessionMonitor: false,
+    autoRefresh: true
+  },
+  silentRenew: {
+    enabled: true,
+    silentRedirectUri: typeof window !== "undefined" ? window.location.origin + "/silent-renew.html" : "/silent-renew.html",
+    thresholdSeconds: 300
+    // 5 minutes
+  },
+  advanced: {
+    responseType: "code",
+    codeChallengeMethod: "S256",
+    loadUserInfo: true,
+    automaticSilentSignIn: false
+  },
+  events: {}
+};
+
+// src/config/KeycloakConfig.ts
+var KeycloakConfigBuilder = class {
+  /**
+   * Builds OIDC client configuration from Keycloak config
+   *
+   * @param userConfig - User-provided Keycloak configuration
+   * @returns OIDC client settings ready for react-oidc-context
+   * @throws Error if required fields are missing or invalid
+   */
+  static build(userConfig) {
+    this.validate(userConfig);
+    const config = this.mergeWithDefaults(userConfig);
+    const oidcSettings = {
+      authority: config.authority,
+      client_id: config.clientId,
+      redirect_uri: config.redirectUri,
+      post_logout_redirect_uri: config.postLogoutRedirectUri,
+      response_type: config.advanced.responseType,
+      scope: config.scope,
+      automaticSilentRenew: config.silentRenew.enabled,
+      loadUserInfo: config.advanced.loadUserInfo,
+      silent_redirect_uri: config.silentRenew.silentRedirectUri
+    };
+    return oidcSettings;
+  }
+  /**
+   * Validates required configuration fields
+   *
+   * @param config - Configuration to validate
+   * @throws Error if validation fails
+   */
+  static validate(config) {
+    if (!config.authority) {
+      throw new Error("Keycloak authority is required");
+    }
+    if (!config.clientId) {
+      throw new Error("Keycloak clientId is required");
+    }
+    try {
+      new URL(config.authority);
+    } catch {
+      throw new Error("Keycloak authority must be a valid URL");
+    }
+  }
+  /**
+   * Merges user configuration with defaults
+   *
+   * @param config - User configuration
+   * @returns Merged configuration with all defaults applied
+   */
+  static mergeWithDefaults(config) {
+    return {
+      authority: config.authority,
+      clientId: config.clientId,
+      redirectUri: config.redirectUri ?? defaultConfig.redirectUri,
+      postLogoutRedirectUri: config.postLogoutRedirectUri ?? defaultConfig.postLogoutRedirectUri,
+      scope: config.scope ?? defaultConfig.scope,
+      features: {
+        ...defaultConfig.features,
+        ...config.features
+      },
+      silentRenew: {
+        ...defaultConfig.silentRenew,
+        ...config.silentRenew
+      },
+      advanced: {
+        ...defaultConfig.advanced,
+        ...config.advanced
+      },
+      events: {
+        ...defaultConfig.events,
+        ...config.events
+      }
+    };
+  }
+};
+function getConfigFromEnv() {
+  if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)) }) === "undefined") {
+    return {};
+  }
+  const env = undefined;
+  if (!env) {
+    return {};
+  }
+  return {
+    authority: env.VITE_KEYCLOAK_AUTHORITY,
+    clientId: env.VITE_KEYCLOAK_CLIENT_ID,
+    features: {
+      deviceFlow: env.VITE_ENABLE_DEVICE_FLOW === "true",
+      sessionMonitor: env.VITE_ENABLE_SESSION_MONITOR === "true"
+    }
+  };
+}
+var KeycloakProvider = ({
+  config,
+  children,
+  debug = false
+}) => {
+  const oidcConfig = KeycloakConfigBuilder.build(config);
+  const log = react.useCallback(
+    (level, message, ...args) => {
+      if (debug) {
+        const prefix = "[Keycloak]";
+        switch (level) {
+          case "info":
+            console.log(prefix, message, ...args);
+            break;
+          case "warn":
+            console.warn(prefix, message, ...args);
+            break;
+          case "error":
+            console.error(prefix, message, ...args);
+            break;
+        }
+      }
+    },
+    [debug]
+  );
+  const onSigninCallback = react.useCallback(
+    (_user) => {
+      log("info", "Sign in successful");
+      window.history.replaceState({}, document.title, window.location.pathname);
+      if (_user) {
+        config.events?.onLogin?.(_user);
+      }
+    },
+    [config.events, log]
+  );
+  const onSignoutCallback = react.useCallback(() => {
+    log("info", "Sign out successful");
+    config.events?.onLogout?.();
+  }, [config.events, log]);
+  const onRemoveUser = react.useCallback(() => {
+    log("info", "User removed");
+  }, [log]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactOidcContext.AuthProvider,
+    {
+      ...oidcConfig,
+      onSigninCallback,
+      onSignoutCallback,
+      onRemoveUser,
+      children
+    }
+  );
+};
+var useAuth = reactOidcContext.useAuth;
+function useRoles() {
+  const auth = useAuth();
+  const roles = react.useMemo(() => {
+    if (!auth.user?.profile) {
+      return [];
+    }
+    const realmAccess = auth.user.profile.realm_access;
+    return realmAccess?.roles || [];
+  }, [auth.user]);
+  const hasRole = react.useMemo(
+    () => (role) => {
+      return roles.includes(role);
+    },
+    [roles]
+  );
+  const hasAnyRole = react.useMemo(
+    () => (requiredRoles) => {
+      return requiredRoles.some((role) => roles.includes(role));
+    },
+    [roles]
+  );
+  const hasAllRoles = react.useMemo(
+    () => (requiredRoles) => {
+      return requiredRoles.every((role) => roles.includes(role));
+    },
+    [roles]
+  );
+  const getClientRoles = react.useMemo(
+    () => (clientId) => {
+      if (!auth.user?.profile) {
+        return [];
+      }
+      const resourceAccess = auth.user.profile.resource_access;
+      return resourceAccess?.[clientId]?.roles || [];
+    },
+    [auth.user]
+  );
+  return {
+    roles,
+    hasRole,
+    hasAnyRole,
+    hasAllRoles,
+    getClientRoles
+  };
+}
+function useScopes() {
+  const auth = useAuth();
+  const scopes = react.useMemo(() => {
+    if (!auth.user?.scope) return [];
+    return auth.user.scope.split(" ").filter((s) => s.length > 0);
+  }, [auth.user]);
+  const hasScope = react.useMemo(
+    () => (scope) => {
+      return scopes.includes(scope);
+    },
+    [scopes]
+  );
+  const hasAnyScope = react.useMemo(
+    () => (requiredScopes) => {
+      return requiredScopes.some((scope) => scopes.includes(scope));
+    },
+    [scopes]
+  );
+  const hasAllScopes = react.useMemo(
+    () => (requiredScopes) => {
+      return requiredScopes.every((scope) => scopes.includes(scope));
+    },
+    [scopes]
+  );
+  return {
+    scopes,
+    hasScope,
+    hasAnyScope,
+    hasAllScopes
+  };
+}
+var ProtectedRoute = ({
+  children,
+  requiredRoles = [],
+  requireAllRoles = false,
+  requiredScopes = [],
+  requireAllScopes = false,
+  policy,
+  loadingComponent,
+  unauthorizedComponent,
+  onUnauthorized
+}) => {
+  const auth = useAuth();
+  const { hasAnyRole, hasAllRoles } = useRoles();
+  const { hasAnyScope, hasAllScopes } = useScopes();
+  const location = reactRouterDom.useLocation();
+  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;
+  const scopeAccess = requiredScopes.length > 0 ? requireAllScopes ? hasAllScopes(requiredScopes) : hasAnyScope(requiredScopes) : null;
+  const unauthorizedReason = !isAuthenticated ? "not-authenticated" : policyAccess === false ? "policy-denied" : roleAccess === false ? "insufficient-roles" : scopeAccess === false ? "insufficient-scopes" : null;
+  react.useEffect(() => {
+    if (unauthorizedReason) {
+      onUnauthorized?.(unauthorizedReason);
+    }
+  }, [unauthorizedReason, onUnauthorized]);
+  react.useEffect(() => {
+    if (!auth.isLoading && !auth.isAuthenticated) {
+      auth.signinRedirect({
+        redirect_uri: window.location.origin + location.pathname + location.search
+      });
+    }
+  }, [auth.isLoading, auth.isAuthenticated, auth, location.pathname, location.search]);
+  if (auth.isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent || /* @__PURE__ */ jsxRuntime.jsx(DefaultLoadingComponent, {}) });
+  }
+  if (!isAuthenticated) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent || /* @__PURE__ */ jsxRuntime.jsx(DefaultLoadingComponent, {}) });
+  }
+  if (unauthorizedReason) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: unauthorizedComponent || /* @__PURE__ */ jsxRuntime.jsx(DefaultUnauthorizedComponent, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var DefaultLoadingComponent = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "200px",
+      flexDirection: "column",
+      gap: "1rem"
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            border: "3px solid #f3f3f3",
+            borderTop: "3px solid #3498db",
+            borderRadius: "50%",
+            width: "40px",
+            height: "40px",
+            animation: "spin 1s linear infinite"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#666", margin: 0 }, children: "Loading..." }),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    ` })
+    ]
+  }
+);
+var DefaultUnauthorizedComponent = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "200px",
+      flexDirection: "column",
+      gap: "1rem",
+      padding: "2rem",
+      textAlign: "center"
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            fontSize: "4rem",
+            color: "#e74c3c"
+          },
+          children: "\u{1F512}"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, color: "#333" }, children: "Access Denied" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#666", margin: 0 }, children: "You do not have permission to access this page." })
+    ]
+  }
+);
+var LoginButton = ({
+  children = "Login",
+  className = "",
+  variant = "primary",
+  size = "medium",
+  showIcon = true,
+  onLoginStart,
+  style,
+  disabled = false
+}) => {
+  const auth = useAuth();
+  if (auth.isAuthenticated) {
+    return null;
+  }
+  const handleClick = () => {
+    onLoginStart?.();
+    auth.signinRedirect();
+  };
+  const baseClass = "kc-button kc-login-button";
+  const variantClass = `kc-button--${variant}`;
+  const sizeClass = `kc-button--${size}`;
+  const classes = `${baseClass} ${variantClass} ${sizeClass} ${className}`.trim();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: handleClick,
+      disabled: disabled || auth.isLoading,
+      style,
+      children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kc-button__icon", children: "\u{1F510}" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kc-button__text", children })
+      ]
+    }
+  );
+};
+var LogoutButton = ({
+  children = "Logout",
+  className = "",
+  variant = "secondary",
+  size = "medium",
+  showIcon = true,
+  onLogoutStart,
+  style,
+  disabled = false
+}) => {
+  const auth = useAuth();
+  if (!auth.isAuthenticated) {
+    return null;
+  }
+  const handleClick = () => {
+    onLogoutStart?.();
+    auth.signoutRedirect();
+  };
+  const baseClass = "kc-button kc-logout-button";
+  const variantClass = `kc-button--${variant}`;
+  const sizeClass = `kc-button--${size}`;
+  const classes = `${baseClass} ${variantClass} ${sizeClass} ${className}`.trim();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: handleClick,
+      disabled: disabled || auth.isLoading,
+      style,
+      children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kc-button__icon", children: "\u{1F6AA}" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kc-button__text", children })
+      ]
+    }
+  );
+};
+var UserProfile = ({
+  className = "",
+  showAvatar = true,
+  showEmail = true,
+  showRoles = false,
+  avatarSize = 40,
+  style,
+  onClick
+}) => {
+  const auth = useAuth();
+  const { roles } = useRoles();
+  if (!auth.isAuthenticated || !auth.user) {
+    return null;
+  }
+  const profile = auth.user.profile;
+  const name = profile.name || profile.preferred_username || "User";
+  const email = profile.email;
+  const initials = getInitials(name);
+  const baseClass = "kc-user-profile";
+  const clickableClass = onClick ? "kc-user-profile--clickable" : "";
+  const classes = `${baseClass} ${clickableClass} ${className}`.trim();
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      style,
+      onClick: handleClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyPress: onClick ? (e) => e.key === "Enter" && handleClick() : void 0,
+      children: [
+        showAvatar && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "kc-user-profile__avatar",
+            style: {
+              width: avatarSize,
+              height: avatarSize,
+              fontSize: avatarSize * 0.4
+            },
+            children: initials
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kc-user-profile__info", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kc-user-profile__name", children: name }),
+          showEmail && email && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kc-user-profile__email", children: email }),
+          showRoles && roles.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kc-user-profile__roles", children: [
+            roles.slice(0, 3).map((role) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kc-user-profile__role-badge", children: role }, role)),
+            roles.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "kc-user-profile__role-badge", children: [
+              "+",
+              roles.length - 3
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+function getInitials(name) {
+  const parts = name.trim().split(" ");
+  if (parts.length === 1) {
+    return parts[0].substring(0, 2).toUpperCase();
+  }
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+var SessionMonitor = ({
+  position = "top-right",
+  warningThreshold = 300,
+  // 5 minutes
+  criticalThreshold = 60,
+  // 1 minute
+  showProgressBar = true,
+  minimizable = true,
+  startMinimized = false,
+  className = "",
+  onWarning,
+  onCritical,
+  onExpired,
+  style
+}) => {
+  const auth = useAuth();
+  const [timeRemaining, setTimeRemaining] = react.useState(null);
+  const [minimized, setMinimized] = react.useState(startMinimized);
+  const [warningTriggered, setWarningTriggered] = react.useState(false);
+  const [criticalTriggered, setCriticalTriggered] = react.useState(false);
+  react.useEffect(() => {
+    if (!auth.isAuthenticated || !auth.user?.expires_at) {
+      setTimeRemaining(null);
+      return;
+    }
+    const updateTimeRemaining = () => {
+      const expiresAt = auth.user.expires_at;
+      const now = Math.floor(Date.now() / 1e3);
+      const remaining = expiresAt - now;
+      if (remaining <= 0) {
+        setTimeRemaining(0);
+        onExpired?.();
+        setTimeout(() => {
+          auth.signoutRedirect();
+        }, 2e3);
+      } else {
+        setTimeRemaining(remaining);
+        if (remaining <= criticalThreshold && !criticalTriggered) {
+          setCriticalTriggered(true);
+          onCritical?.(remaining);
+        } else if (remaining <= warningThreshold && !warningTriggered) {
+          setWarningTriggered(true);
+          onWarning?.(remaining);
+        }
+      }
+    };
+    updateTimeRemaining();
+    const interval = setInterval(updateTimeRemaining, 1e3);
+    return () => clearInterval(interval);
+  }, [
+    auth,
+    warningThreshold,
+    criticalThreshold,
+    warningTriggered,
+    criticalTriggered,
+    onWarning,
+    onCritical,
+    onExpired
+  ]);
+  react.useEffect(() => {
+    if (timeRemaining && timeRemaining > warningThreshold) {
+      setWarningTriggered(false);
+      setCriticalTriggered(false);
+    }
+  }, [timeRemaining, warningThreshold]);
+  const formatTime = react.useCallback((seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  }, []);
+  const getStatusClass = react.useCallback(() => {
+    if (!timeRemaining) return "normal";
+    if (timeRemaining <= criticalThreshold) return "critical";
+    if (timeRemaining <= warningThreshold) return "warning";
+    return "normal";
+  }, [timeRemaining, warningThreshold, criticalThreshold]);
+  const getProgress = react.useCallback(() => {
+    if (!timeRemaining || !auth.user?.expires_in) return 100;
+    return timeRemaining / auth.user.expires_in * 100;
+  }, [timeRemaining, auth.user]);
+  if (!auth.isAuthenticated || timeRemaining === null) {
+    return null;
+  }
+  const baseClass = "kc-session-monitor";
+  const positionClass = `kc-session-monitor--${position}`;
+  const statusClass = `kc-session-monitor--${getStatusClass()}`;
+  const minimizedClass = minimized ? "kc-session-monitor--minimized" : "";
+  const classes = `${baseClass} ${positionClass} ${statusClass} ${minimizedClass} ${className}`.trim();
+  const progress = getProgress();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+    minimizable && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "kc-session-monitor__toggle",
+        onClick: () => setMinimized(!minimized),
+        "aria-label": minimized ? "Expand session monitor" : "Minimize session monitor",
+        title: minimized ? "Expand" : "Minimize",
+        children: minimized ? "\u25B2" : "\u25BC"
+      }
+    ),
+    !minimized && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kc-session-monitor__content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kc-session-monitor__label", children: timeRemaining === 0 ? "Session expired" : "Session expires in:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kc-session-monitor__time", children: formatTime(timeRemaining) })
+      ] }),
+      showProgressBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kc-session-monitor__progress-bar", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "kc-session-monitor__progress-fill",
+          style: { width: `${progress}%` },
+          role: "progressbar",
+          "aria-valuenow": progress,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/utils/deviceFlow.ts
+async function requestDeviceCode(apiBaseUrl) {
+  const url = `${apiBaseUrl}/api/keycloak/device/authorize`;
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Device authorization failed: ${response.status} ${response.statusText}. ${errorText}`
+      );
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`Failed to request device code: ${error.message}`);
+    }
+    throw error;
+  }
+}
+async function pollForToken(apiBaseUrl, deviceCode) {
+  const url = `${apiBaseUrl}/api/keycloak/device/token`;
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ device_code: deviceCode })
+    });
+    const data = await response.json();
+    if ("error" in data) {
+      const errorData = data;
+      if (errorData.error === "authorization_pending" || errorData.error === "slow_down") {
+        return null;
+      }
+      throw new Error(
+        errorData.error_description || errorData.error || "Token polling failed"
+      );
+    }
+    if (!response.ok) {
+      throw new Error(`Token polling failed with status ${response.status}`);
+    }
+    return data;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error("Token polling failed");
+  }
+}
+async function fetchUserInfo(apiBaseUrl, accessToken) {
+  const url = `${apiBaseUrl}/api/keycloak/device/userinfo`;
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ access_token: accessToken })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch user info: ${response.statusText}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`Failed to fetch user info: ${error.message}`);
+    }
+    throw error;
+  }
+}
+var DeviceLogin = ({
+  apiBaseUrl,
+  qrCodeSize = 256,
+  pollingInterval = 5,
+  className = "",
+  onSuccess,
+  onError,
+  style
+}) => {
+  const auth = useAuth();
+  const [deviceData, setDeviceData] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [timeRemaining, setTimeRemaining] = react.useState(null);
+  const pollTimerRef = react.useRef(null);
+  const userManagerRef = react.useRef(null);
+  react.useEffect(() => {
+    const initDeviceFlow = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await requestDeviceCode(apiBaseUrl);
+        setDeviceData(response);
+        setTimeRemaining(response.expires_in);
+      } catch (err) {
+        const error2 = err;
+        setError(error2.message);
+        onError?.(error2);
+      } finally {
+        setLoading(false);
+      }
+    };
+    initDeviceFlow();
+  }, [apiBaseUrl, onError]);
+  react.useEffect(() => {
+    if (!deviceData || timeRemaining === null) return;
+    const interval = setInterval(() => {
+      setTimeRemaining((prev) => {
+        if (prev === null || prev <= 1) {
+          clearInterval(interval);
+          setError("Device code expired. Please refresh to try again.");
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [deviceData, timeRemaining]);
+  react.useEffect(() => {
+    if (!deviceData) return;
+    userManagerRef.current = auth.userManager;
+    const poll = async () => {
+      try {
+        const tokenResponse = await pollForToken(apiBaseUrl, deviceData.device_code);
+        if (tokenResponse) {
+          if (pollTimerRef.current) {
+            clearInterval(pollTimerRef.current);
+          }
+          const userInfo = await fetchUserInfo(apiBaseUrl, tokenResponse.access_token);
+          const user = new oidcClientTs.User({
+            id_token: tokenResponse.id_token || "",
+            access_token: tokenResponse.access_token,
+            token_type: tokenResponse.token_type,
+            profile: userInfo,
+            expires_at: Math.floor(Date.now() / 1e3) + tokenResponse.expires_in,
+            scope: tokenResponse.scope,
+            refresh_token: tokenResponse.refresh_token
+          });
+          if (userManagerRef.current) {
+            await userManagerRef.current.storeUser(user);
+          }
+          onSuccess?.(user);
+        }
+      } catch (err) {
+        if (!err.message.includes("authorization_pending")) {
+          if (pollTimerRef.current) {
+            clearInterval(pollTimerRef.current);
+          }
+          const error2 = err;
+          setError(error2.message);
+          onError?.(error2);
+        }
+      }
+    };
+    pollTimerRef.current = setInterval(poll, pollingInterval * 1e3);
+    return () => {
+      if (pollTimerRef.current) {
+        clearInterval(pollTimerRef.current);
+      }
+    };
+  }, [deviceData, apiBaseUrl, pollingInterval, onSuccess, onError, auth]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `kc-device-login kc-device-login--loading ${className}`, style, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kc-device-login__spinner" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Initializing device flow..." })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `kc-device-login kc-device-login--error ${className}`, style, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kc-device-login__error-icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "kc-button kc-button--primary",
+          onClick: () => window.location.reload(),
+          children: "Retry"
+        }
+      )
+    ] });
+  }
+  if (!deviceData) {
+    return null;
+  }
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `kc-device-login ${className}`, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "kc-device-login__title", children: "Device Login" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kc-device-login__qr", children: /* @__PURE__ */ jsxRuntime.jsx(qrcode_react.QRCodeSVG, { value: deviceData.verification_uri_complete, size: qrCodeSize }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kc-device-login__instructions", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Scan the QR code with your phone or visit:" }),
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "kc-device-login__url", children: deviceData.verification_uri }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "And enter code:" }),
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "kc-device-login__user-code", children: deviceData.user_code })
+    ] }),
+    timeRemaining !== null && timeRemaining > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "kc-device-login__expiry", children: [
+      "Code expires in ",
+      formatTime(timeRemaining)
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kc-device-login__status", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kc-device-login__spinner kc-device-login__spinner--small" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Waiting for authorization..." })
+    ] })
+  ] });
+};
+function useProtectedFetch(options = {}) {
+  const auth = useAuth();
+  const {
+    baseUrl = "",
+    onUnauthorized,
+    retryOn401 = true,
+    headers: customHeaders = {}
+  } = options;
+  const buildUrl = react.useCallback(
+    (url) => {
+      if (url.startsWith("http://") || url.startsWith("https://")) {
+        return url;
+      }
+      const base = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+      const path = url.startsWith("/") ? url : `/${url}`;
+      return base + path;
+    },
+    [baseUrl]
+  );
+  const getAuthHeader = react.useCallback(() => {
+    if (!auth.user?.access_token) {
+      return {};
+    }
+    return {
+      Authorization: `Bearer ${auth.user.access_token}`
+    };
+  }, [auth.user]);
+  const buildHeaders = react.useCallback(
+    (requestHeaders) => {
+      const headers = new Headers(requestHeaders);
+      const authHeader = getAuthHeader();
+      if (authHeader.Authorization) {
+        headers.set("Authorization", authHeader.Authorization);
+      }
+      Object.entries(customHeaders).forEach(([key, value]) => {
+        headers.set(key, value);
+      });
+      return headers;
+    },
+    [getAuthHeader, customHeaders]
+  );
+  const protectedFetch = react.useCallback(
+    async (url, init) => {
+      const fullUrl = buildUrl(url);
+      const headers = buildHeaders(init?.headers);
+      const response = await fetch(fullUrl, {
+        ...init,
+        headers
+      });
+      if (response.status === 401) {
+        onUnauthorized?.();
+        if (retryOn401 && auth.user) {
+          try {
+            await auth.signinSilent();
+            const newHeaders = buildHeaders(init?.headers);
+            const retryResponse = await fetch(fullUrl, {
+              ...init,
+              headers: newHeaders
+            });
+            return retryResponse;
+          } catch (error) {
+            return response;
+          }
+        }
+      }
+      return response;
+    },
+    [buildUrl, buildHeaders, onUnauthorized, retryOn401, auth]
+  );
+  const fetchJson = react.useCallback(
+    async (url, init) => {
+      const response = await protectedFetch(url, init);
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(
+          `HTTP ${response.status}: ${response.statusText}. ${errorText}`
+        );
+      }
+      const data = await response.json();
+      return data;
+    },
+    [protectedFetch]
+  );
+  return {
+    fetchJson,
+    fetch: protectedFetch,
+    isLoading: auth.isLoading
+  };
+}
+
+exports.DeviceLogin = DeviceLogin;
+exports.KeycloakConfigBuilder = KeycloakConfigBuilder;
+exports.KeycloakProvider = KeycloakProvider;
+exports.LoginButton = LoginButton;
+exports.LogoutButton = LogoutButton;
+exports.ProtectedRoute = ProtectedRoute;
+exports.SessionMonitor = SessionMonitor;
+exports.UserProfile = UserProfile;
+exports.defaultConfig = defaultConfig;
+exports.fetchUserInfo = fetchUserInfo;
+exports.getConfigFromEnv = getConfigFromEnv;
+exports.pollForToken = pollForToken;
+exports.requestDeviceCode = requestDeviceCode;
+exports.useAuth = useAuth;
+exports.useProtectedFetch = useProtectedFetch;
+exports.useRoles = useRoles;
+exports.useScopes = useScopes;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map