formreader-session-timeout 0.2.0

package/dist/index.mjs

@@ -0,0 +1,553 @@
+// types/index.ts
+var DEFAULT_SESSION_CONFIG = {
+  refreshThresholdMs: 2 * 60 * 1e3,
+  // 2 minutes before expiry
+  idleCheckIntervalMs: 10 * 1e3,
+  // Check every 10 seconds
+  idleTimeoutMs: 15 * 60 * 1e3,
+  // 15 minutes of inactivity
+  maxSessionDurationMs: 8 * 60 * 60 * 1e3,
+  // 8 hours max
+  refreshEndpoint: "/auth/refresh/",
+  logoutEndpoint: "/auth/logout/",
+  showIdleWarning: true,
+  idleWarningThresholdMs: 2 * 60 * 1e3,
+  // 2 minutes before idle timeout
+  autoRefresh: true,
+  debug: false
+};
+
+// services/tokenService.ts
+function decodeJWT(token) {
+  try {
+    const parts = token.split(".");
+    if (parts.length !== 3) {
+      throw new Error("Invalid JWT format");
+    }
+    const decodedPayload = JSON.parse(
+      atob(parts[1].replace(/-/g, "+").replace(/_/g, "/"))
+    );
+    return decodedPayload;
+  } catch (error) {
+    console.error("Failed to decode JWT:", error);
+    return null;
+  }
+}
+function getTokenInfo(token) {
+  const payload = decodeJWT(token);
+  if (!payload || !payload.exp) {
+    return null;
+  }
+  const expiresAt = payload.exp * 1e3;
+  const expiresIn = expiresAt - Date.now();
+  return {
+    token,
+    expiresAt,
+    expiresIn,
+    payload
+  };
+}
+function isTokenExpired(token, bufferMs = 0) {
+  const tokenInfo = getTokenInfo(token);
+  if (!tokenInfo) {
+    return true;
+  }
+  return tokenInfo.expiresIn - bufferMs <= 0;
+}
+function getTimeUntilExpiry(token) {
+  const tokenInfo = getTokenInfo(token);
+  if (!tokenInfo) {
+    return 0;
+  }
+  return Math.max(0, tokenInfo.expiresIn);
+}
+function getStoredToken() {
+  return sessionStorage.getItem("authToken") || localStorage.getItem("authToken");
+}
+function storeToken(token, persistent = false) {
+  if (persistent) {
+    localStorage.setItem("authToken", token);
+    sessionStorage.removeItem("authToken");
+  } else {
+    sessionStorage.setItem("authToken", token);
+    localStorage.removeItem("authToken");
+  }
+}
+function clearToken() {
+  sessionStorage.removeItem("authToken");
+  localStorage.removeItem("authToken");
+}
+function validateToken(token) {
+  if (!token || typeof token !== "string") {
+    return { valid: false, error: "Token is missing or invalid" };
+  }
+  const payload = decodeJWT(token);
+  if (!payload) {
+    return { valid: false, error: "Failed to decode token" };
+  }
+  if (!payload.exp) {
+    return { valid: false, error: "Token missing expiry time" };
+  }
+  if (isTokenExpired(token)) {
+    return { valid: false, error: "Token has expired" };
+  }
+  return { valid: true };
+}
+
+// services/sessionManager.ts
+function defaultFetchClient() {
+  return {
+    post: async (url, body, options) => {
+      const headers = {
+        "Content-Type": "application/json",
+        ...options && options.headers ? options.headers : {}
+      };
+      const resp = await fetch(url, {
+        method: "POST",
+        headers,
+        body: body ? JSON.stringify(body) : void 0
+      });
+      const data = await resp.json().catch(() => ({}));
+      return { data };
+    }
+  };
+}
+var SessionManager = class {
+  constructor(config) {
+    this.refreshTimer = null;
+    this.idleTimer = null;
+    this.idleCheckTimer = null;
+    this.maxSessionTimer = null;
+    this.listeners = /* @__PURE__ */ new Map();
+    this.requestDeduplication = /* @__PURE__ */ new Map();
+    this.config = {
+      ...DEFAULT_SESSION_CONFIG,
+      ...config
+    };
+    this.state = {
+      isActive: false,
+      isIdle: false,
+      lastActivityTime: Date.now(),
+      refreshAttempts: 0,
+      isRefreshing: false
+    };
+    this.log("SessionManager initialized with config:", this.config);
+  }
+  /**
+   * Initialize session management
+   */
+  init() {
+    const token = getStoredToken();
+    if (!token) {
+      this.log("No token found, session not initialized");
+      return;
+    }
+    const validation = validateToken(token);
+    if (!validation.valid) {
+      this.log("Invalid token:", validation.error);
+      this.logout();
+      return;
+    }
+    this.state.isActive = true;
+    this.setupTokenRefresh();
+    this.setupIdleTracking();
+    this.setupMaxSessionDuration();
+    this.emit("initialized");
+    this.log("Session initialized successfully");
+  }
+  /**
+   * Setup token refresh before expiry
+   */
+  setupTokenRefresh() {
+    const token = getStoredToken();
+    if (!token)
+      return;
+    const timeUntilExpiry = getTimeUntilExpiry(token);
+    const refreshAt = Math.max(0, timeUntilExpiry - this.config.refreshThresholdMs);
+    this.log(`Token expires in ${timeUntilExpiry}ms, will refresh in ${refreshAt}ms`);
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+    }
+    if (this.config.autoRefresh && refreshAt > 0) {
+      this.refreshTimer = setTimeout(() => {
+        this.log("Scheduled token refresh triggered");
+        this.refreshToken();
+      }, refreshAt);
+    } else if (refreshAt <= 0 && this.config.autoRefresh) {
+      this.log("Token near expiry, refreshing immediately");
+      this.refreshToken();
+    }
+  }
+  /**
+   * Setup idle activity tracking
+   */
+  setupIdleTracking() {
+    const events = ["mousedown", "keydown", "scroll", "touchstart", "click"];
+    const handleActivity = () => {
+      this.state.lastActivityTime = Date.now();
+      this.state.isIdle = false;
+      this.emit("activity");
+      if (this.idleTimer) {
+        clearTimeout(this.idleTimer);
+      }
+      this.idleTimer = setTimeout(() => {
+        var _a, _b;
+        this.state.isIdle = true;
+        this.emit("idle");
+        this.log("User idle timeout triggered");
+        (_b = (_a = this.config).onIdle) == null ? void 0 : _b.call(_a);
+      }, this.config.idleTimeoutMs);
+    };
+    events.forEach((event) => {
+      window.addEventListener(event, handleActivity, { passive: true });
+    });
+    this.idleTimer = setTimeout(() => {
+      var _a, _b;
+      this.state.isIdle = true;
+      this.emit("idle");
+      this.log("User idle timeout triggered");
+      (_b = (_a = this.config).onIdle) == null ? void 0 : _b.call(_a);
+    }, this.config.idleTimeoutMs);
+    this.idleCheckTimer = setInterval(() => {
+      const timeSinceActivity = Date.now() - this.state.lastActivityTime;
+      const timeUntilIdle = this.config.idleTimeoutMs - timeSinceActivity;
+      if (this.config.showIdleWarning && timeUntilIdle <= this.config.idleWarningThresholdMs && !this.state.isIdle) {
+        this.emit("idleWarning", { timeRemaining: timeUntilIdle });
+      }
+    }, this.config.idleCheckIntervalMs);
+    this.listeners.set("cleanup-events", events.map((event) => () => {
+      window.removeEventListener(event, handleActivity);
+    }));
+  }
+  /**
+   * Setup max session duration timer
+   */
+  setupMaxSessionDuration() {
+    if (this.maxSessionTimer) {
+      clearTimeout(this.maxSessionTimer);
+    }
+    this.maxSessionTimer = setTimeout(() => {
+      this.log("Max session duration reached, logging out");
+      this.logout();
+    }, this.config.maxSessionDurationMs);
+  }
+  /**
+   * Refresh token
+   */
+  async refreshToken() {
+    var _a, _b, _c, _d;
+    if (this.state.isRefreshing) {
+      this.log("Refresh already in progress, returning pending promise");
+      return this.requestDeduplication.get("refresh");
+    }
+    this.state.isRefreshing = true;
+    this.state.refreshAttempts++;
+    const token = getStoredToken();
+    if (!token) {
+      this.state.isRefreshing = false;
+      return false;
+    }
+    try {
+      this.log(`Refreshing token (attempt ${this.state.refreshAttempts})`);
+      const client = this.config.httpClient || defaultFetchClient();
+      const refreshPayload = this.config.refreshPayloadFormatter ? this.config.refreshPayloadFormatter(token) : { token };
+      const refreshPromise = client.post(this.config.refreshEndpoint, refreshPayload, { headers: { Authorization: `Bearer ${token}` } });
+      this.requestDeduplication.set("refresh", refreshPromise);
+      const response = await refreshPromise;
+      const newToken = response.data.token || response.data.access_token;
+      if (!newToken) {
+        throw new Error("No token in refresh response");
+      }
+      storeToken(newToken);
+      this.state.isRefreshing = false;
+      this.state.refreshAttempts = 0;
+      this.requestDeduplication.delete("refresh");
+      this.log("Token refreshed successfully");
+      this.emit("tokenRefreshed");
+      (_b = (_a = this.config).onRefreshSuccess) == null ? void 0 : _b.call(_a);
+      this.setupTokenRefresh();
+      return true;
+    } catch (error) {
+      this.state.isRefreshing = false;
+      this.log("Token refresh failed:", error);
+      if (this.state.refreshAttempts >= 3) {
+        this.log("Max refresh attempts reached, logging out");
+        this.logout();
+      }
+      (_d = (_c = this.config).onRefreshFailure) == null ? void 0 : _d.call(_c, error);
+      this.emit("refreshFailed", error);
+      return false;
+    }
+  }
+  /**
+   * Logout and cleanup
+   */
+  async logout() {
+    var _a, _b;
+    try {
+      const token = getStoredToken();
+      if (token) {
+        const client = this.config.httpClient || defaultFetchClient();
+        const logoutPayload = this.config.logoutPayloadFormatter ? this.config.logoutPayloadFormatter(token) : { token };
+        await client.post(this.config.logoutEndpoint, logoutPayload, { headers: { Authorization: `Bearer ${token}` } });
+      }
+    } catch (error) {
+      this.log("Logout API call failed:", error);
+    }
+    this.cleanup();
+    this.state.isActive = false;
+    this.emit("loggedOut");
+    (_b = (_a = this.config).onSessionExpired) == null ? void 0 : _b.call(_a);
+    clearToken();
+  }
+  /**
+   * Extend session (reset idle timer)
+   */
+  extendSession() {
+    this.state.lastActivityTime = Date.now();
+    this.state.isIdle = false;
+    if (this.idleTimer) {
+      clearTimeout(this.idleTimer);
+    }
+    this.idleTimer = setTimeout(() => {
+      this.state.isIdle = true;
+      this.emit("idle");
+    }, this.config.idleTimeoutMs);
+    this.log("Session extended");
+    this.emit("sessionExtended");
+  }
+  /**
+   * Get current state
+   */
+  getState() {
+    return { ...this.state };
+  }
+  /**
+   * Get current config
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+  /**
+   * Update config
+   */
+  updateConfig(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    this.log("Config updated:", this.config);
+    if (this.state.isActive) {
+      this.cleanup();
+      this.init();
+    }
+  }
+  /**
+   * Event listeners
+   */
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, []);
+    }
+    this.listeners.get(event).push(callback);
+    return () => {
+      const callbacks = this.listeners.get(event);
+      if (callbacks) {
+        const index = callbacks.indexOf(callback);
+        if (index > -1) {
+          callbacks.splice(index, 1);
+        }
+      }
+    };
+  }
+  /**
+   * Emit event
+   */
+  emit(event, data) {
+    const callbacks = this.listeners.get(event);
+    if (callbacks) {
+      callbacks.forEach((callback) => callback(data));
+    }
+  }
+  /**
+   * Cleanup timers and listeners
+   */
+  cleanup() {
+    if (this.refreshTimer)
+      clearTimeout(this.refreshTimer);
+    if (this.idleTimer)
+      clearTimeout(this.idleTimer);
+    if (this.idleCheckTimer)
+      clearInterval(this.idleCheckTimer);
+    if (this.maxSessionTimer)
+      clearTimeout(this.maxSessionTimer);
+    this.refreshTimer = null;
+    this.idleTimer = null;
+    this.idleCheckTimer = null;
+    this.maxSessionTimer = null;
+    const cleanupFunctions = this.listeners.get("cleanup-events");
+    if (cleanupFunctions) {
+      cleanupFunctions.forEach((fn) => fn());
+    }
+    this.listeners.clear();
+  }
+  /**
+   * Destroy session manager
+   */
+  destroy() {
+    this.cleanup();
+    this.listeners.clear();
+    this.requestDeduplication.clear();
+  }
+  /**
+   * Logging utility
+   */
+  log(...args) {
+    if (this.config.debug) {
+      console.log("[SessionManager]", ...args);
+    }
+  }
+};
+var sessionManagerInstance = null;
+function getSessionManager(config) {
+  if (!sessionManagerInstance) {
+    sessionManagerInstance = new SessionManager(config || {});
+  }
+  return sessionManagerInstance;
+}
+function resetSessionManager() {
+  if (sessionManagerInstance) {
+    sessionManagerInstance.destroy();
+    sessionManagerInstance = null;
+  }
+}
+
+// hooks/useSessionTimeout.ts
+import { useEffect, useState, useCallback, useRef } from "react";
+function useSessionTimeout(options = {}) {
+  const {
+    config,
+    enabled = true,
+    onSessionExpiring,
+    onSessionExpired,
+    onIdle,
+    onRefreshSuccess
+  } = options;
+  const [sessionState, setSessionState] = useState({
+    isActive: false,
+    isIdle: false,
+    lastActivityTime: Date.now(),
+    refreshAttempts: 0,
+    isRefreshing: false
+  });
+  const [timeUntilIdle, setTimeUntilIdle] = useState(null);
+  const [idleWarningVisible, setIdleWarningVisible] = useState(false);
+  const managerRef = useRef(null);
+  const unsubscribeRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!enabled)
+      return;
+    const manager = getSessionManager({
+      ...config,
+      onSessionExpiring,
+      onSessionExpired,
+      onIdle,
+      onRefreshSuccess
+    });
+    managerRef.current = manager;
+    const subscriptions = /* @__PURE__ */ new Map();
+    subscriptions.set(
+      "initialized",
+      manager.on("initialized", () => {
+        setSessionState(manager.getState());
+      })
+    );
+    subscriptions.set(
+      "tokenRefreshed",
+      manager.on("tokenRefreshed", () => {
+        setSessionState(manager.getState());
+      })
+    );
+    subscriptions.set(
+      "idle",
+      manager.on("idle", () => {
+        setSessionState(manager.getState());
+      })
+    );
+    subscriptions.set(
+      "activity",
+      manager.on("activity", () => {
+        setSessionState(manager.getState());
+        setIdleWarningVisible(false);
+      })
+    );
+    subscriptions.set(
+      "idleWarning",
+      manager.on("idleWarning", (data) => {
+        setIdleWarningVisible(true);
+        setTimeUntilIdle(data.timeRemaining);
+      })
+    );
+    subscriptions.set(
+      "loggedOut",
+      manager.on("loggedOut", () => {
+        setSessionState(manager.getState());
+      })
+    );
+    unsubscribeRef.current = subscriptions;
+    manager.init();
+    return () => {
+      subscriptions.forEach((unsub) => unsub());
+      unsubscribeRef.current.clear();
+    };
+  }, [enabled, config, onSessionExpiring, onSessionExpired, onIdle, onRefreshSuccess]);
+  useEffect(() => {
+    if (!enabled || !sessionState.isActive)
+      return;
+    const interval = setInterval(() => {
+      const manager = managerRef.current;
+      if (manager) {
+        setSessionState(manager.getState());
+      }
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [enabled, sessionState.isActive]);
+  const extendSession = useCallback(() => {
+    var _a;
+    (_a = managerRef.current) == null ? void 0 : _a.extendSession();
+  }, []);
+  const refreshToken = useCallback(async () => {
+    var _a;
+    return (_a = managerRef.current) == null ? void 0 : _a.refreshToken();
+  }, []);
+  const logout = useCallback(async () => {
+    var _a;
+    return (_a = managerRef.current) == null ? void 0 : _a.logout();
+  }, []);
+  const updateConfig = useCallback((newConfig) => {
+    var _a;
+    (_a = managerRef.current) == null ? void 0 : _a.updateConfig(newConfig);
+  }, []);
+  return {
+    sessionState,
+    timeUntilExpiry: null,
+    timeUntilIdle,
+    idleWarningVisible,
+    extendSession,
+    refreshToken,
+    logout,
+    updateConfig,
+    manager: managerRef.current
+  };
+}
+export {
+  DEFAULT_SESSION_CONFIG,
+  SessionManager,
+  clearToken,
+  getSessionManager,
+  getStoredToken,
+  getTimeUntilExpiry,
+  getTokenInfo,
+  isTokenExpired,
+  resetSessionManager,
+  storeToken,
+  useSessionTimeout,
+  validateToken
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "formreader-session-timeout",
+  "version": "0.2.0",
+  "description": "Session timeout microfrontend: configurable JWT expiry decoding and refresh with idle tracking",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup index.ts --format cjs,esm --dts --out-dir dist",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^16 || ^17 || ^18"
+  },
+  "dependencies": {
+    "whatwg-fetch": "^3.6.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "license": "MIT"
+}