astro-tokenkit 1.0.17 → 1.0.18

package/README.md

@@ -114,6 +114,7 @@ const specializedClient = createClient({
 | `timeout` | `number` | Request timeout in milliseconds (default: 30000). |
 | `retry` | `RetryConfig` | Retry strategy for failed requests. |
 | `interceptors`| `InterceptorsConfig` | Request/Response/Error interceptors. |
+| `idle` | `IdleConfig` | Inactivity session timeout configuration. |
 | `context` | `AsyncLocalStorage` | External AsyncLocalStorage instance. |
 | `getContextStore`| `() => TokenKitContext`| Custom method to retrieve the context store. |
 | `setContextStore`| `(ctx) => void`| Custom method to set the context store. |
@@ -138,6 +139,47 @@ const specializedClient = createClient({
 | `cookies` | `CookieConfig` | Configuration for auth cookies. |
 | `policy` | `RefreshPolicy` | Strategy for when to trigger token refresh. |
 
+### Idle Session Timeout
+
+Astro TokenKit automatically monitors user inactivity and closes the session across all open tabs. This feature uses `BroadcastChannel` to synchronize activity and logout events.
+
+**Important:** When using the Astro integration, the `onIdle` function cannot be passed in `astro.config.mjs` because it is not serializable. Instead, listen for the `tk:idle` event on the client.
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `timeout` | `number` | **Required.** Inactivity timeout in seconds. |
+| `autoLogout`| `boolean` | Whether to automatically trigger logout by calling the configured logout endpoint (default: `true`). |
+| `activeTabOnly` | `boolean` | Whether to track activity only on the active tab to save CPU/memory (default: `true`). |
+| `alert` | `any` | Custom data to be passed to the `tk:idle` event. Ideal for configuring SweetAlert options. |
+
+#### Handling Idle Events (e.g. SweetAlert)
+
+On the client (browser), you can listen for the `tk:idle` event to show a notification. You can use the `alert` property from your configuration to pass options to your alert plugin.
+
+```javascript
+// astro.config.mjs
+tokenKit({
+  idle: {
+    timeout: 300,
+    alert: {
+      title: "Session Expired",
+      text: "You have been logged out due to inactivity.",
+      icon: "warning"
+    }
+  }
+})
+```
+
+```html
+<script>
+  window.addEventListener('tk:idle', (event) => {
+    const options = event.detail.alert;
+    // Use SweetAlert or any other plugin
+    swal(options);
+  });
+</script>
+```
+
 ### Login Options
 
 | Property | Type | Description |
@@ -242,6 +284,26 @@ api.login(credentials)
 
 > **Note:** Since all methods return an `APIResponse` object, you can use destructuring in `.then()` to access the data directly, which allows for clean syntax like `.then(({ data: token }) => ... )`.
 
+## Performance
+
+Astro TokenKit is designed with a "low impact" philosophy. It introduces negligible overhead to your requests while providing powerful features like automatic token rotation.
+
+### Benchmark Results
+
+Run on a standard development machine using `npm run bench`:
+
+| Scenario | Operations/sec | Latency (Overhead) |
+| :--- | :--- | :--- |
+| **Native fetch (Baseline)** | ~720,000 | 0µs |
+| **Middleware overhead** | ~1,680,000 | <1µs |
+| **APIClient (No Auth)** | ~200,000 | ~3.5µs |
+| **APIClient (With Auth)** | ~150,000 | ~5.3µs |
+
+**Key Takeaways:**
+- **Zero-impact Middleware:** The middleware adds less than 1 microsecond to each Astro request.
+- **Ultra-low Client Overhead:** Using the `APIClient` adds about 3-5 microseconds per request compared to native `fetch`.
+- **Negligible in Real World:** In a typical scenario where a network request takes 10ms (10,000µs), Astro TokenKit adds less than **0.05%** latency.
+
 ## License
 
 MIT © [oamm](https://github.com/oamm)

package/dist/client/client.d.ts

@@ -1,4 +1,4 @@
-import type { APIResponse, ClientConfig, RequestConfig, RequestOptions, Session, TokenKitConfig, LoginOptions, TokenBundle } from '../types';
+import type { APIResponse, ClientConfig, LoginOptions, RequestConfig, RequestOptions, Session, TokenBundle, TokenKitConfig } from '../types';
 import { TokenManager } from '../auth/manager';
 /**
  * API Client

package/dist/client/client.js

@@ -305,7 +305,7 @@ export class APIClient {
                 throw new Error('Auth is not configured for this client');
             }
             const context = getContextStore();
-            return this.tokenManager.login(context, credentials, options);
+            return yield this.tokenManager.login(context, credentials, options);
         });
     }
     /**

package/dist/client/idle-manager.d.ts

@@ -0,0 +1,30 @@
+import type { IdleConfig } from '../types';
+/**
+ * IdleManager handles user inactivity across multiple tabs.
+ * It uses BroadcastChannel to synchronize activity and logout events.
+ */
+export declare class IdleManager {
+    private channel;
+    private timeout;
+    private onIdle;
+    private activeTabOnly;
+    private rafId;
+    private lastCheck;
+    private isIdle;
+    private eventHandler;
+    private config;
+    private isMonitoring;
+    private lastActivity;
+    private expiredTimeKey;
+    constructor(config: IdleConfig);
+    private start;
+    private loop;
+    private setupEventListeners;
+    private addTrackers;
+    private removeTrackers;
+    private reportActivity;
+    private updateExpiredTimeLocal;
+    private handleTimeout;
+    private triggerIdle;
+    cleanup(): void;
+}

package/dist/client/idle-manager.js

@@ -0,0 +1,138 @@
+/**
+ * IdleManager handles user inactivity across multiple tabs.
+ * It uses BroadcastChannel to synchronize activity and logout events.
+ */
+export class IdleManager {
+    constructor(config) {
+        var _a;
+        this.channel = null;
+        this.rafId = null;
+        this.lastCheck = 0;
+        this.isIdle = false;
+        this.isMonitoring = false;
+        this.lastActivity = 0;
+        this.config = config;
+        this.timeout = config.timeout;
+        this.onIdle = config.onIdle || (() => { });
+        this.activeTabOnly = (_a = config.activeTabOnly) !== null && _a !== void 0 ? _a : true;
+        this.expiredTimeKey = '_tk_idle_expires';
+        this.eventHandler = this.reportActivity.bind(this);
+        this.isIdle = false;
+        if (typeof window === 'undefined')
+            return;
+        try {
+            this.channel = new BroadcastChannel('tk_idle_channel');
+            this.channel.onmessage = (event) => {
+                if (event.data === 'activity') {
+                    this.updateExpiredTimeLocal();
+                }
+                else if (event.data === 'logout') {
+                    this.triggerIdle();
+                }
+            };
+        }
+        catch (e) {
+            // BroadcastChannel might fail in some environments (e.g. private mode)
+        }
+        this.start();
+    }
+    start() {
+        if (typeof window === 'undefined')
+            return;
+        this.updateExpiredTimeLocal();
+        this.setupEventListeners();
+        this.loop();
+    }
+    loop() {
+        if (this.isIdle)
+            return;
+        const now = Date.now();
+        // Check every 1 second
+        if (now - this.lastCheck >= 1000) {
+            const expiredTime = parseInt(localStorage.getItem(this.expiredTimeKey) || '0', 10);
+            if (expiredTime > 0 && now > expiredTime) {
+                this.handleTimeout();
+                return;
+            }
+            this.lastCheck = now;
+        }
+        this.rafId = requestAnimationFrame(() => this.loop());
+    }
+    setupEventListeners() {
+        if (this.activeTabOnly) {
+            document.addEventListener('visibilitychange', () => {
+                if (document.visibilityState === 'visible') {
+                    this.addTrackers();
+                }
+                else {
+                    this.removeTrackers();
+                }
+            });
+            if (document.visibilityState === 'visible') {
+                this.addTrackers();
+            }
+        }
+        else {
+            this.addTrackers();
+        }
+    }
+    addTrackers() {
+        if (this.isMonitoring)
+            return;
+        const events = ['mousemove', 'keydown', 'scroll', 'click', 'touchstart'];
+        events.forEach(e => window.addEventListener(e, this.eventHandler, { passive: true }));
+        this.isMonitoring = true;
+    }
+    removeTrackers() {
+        if (!this.isMonitoring)
+            return;
+        const events = ['mousemove', 'keydown', 'scroll', 'click', 'touchstart'];
+        events.forEach(e => window.removeEventListener(e, this.eventHandler));
+        this.isMonitoring = false;
+    }
+    reportActivity() {
+        const now = Date.now();
+        // Throttle reporting to every 1 second to reduce overhead
+        if (now - this.lastActivity < 1000)
+            return;
+        this.lastActivity = now;
+        this.updateExpiredTimeLocal();
+        if (this.channel) {
+            this.channel.postMessage('activity');
+        }
+    }
+    updateExpiredTimeLocal() {
+        const expires = Date.now() + (this.timeout * 1000);
+        localStorage.setItem(this.expiredTimeKey, expires.toString());
+    }
+    handleTimeout() {
+        if (this.isIdle)
+            return;
+        if (this.channel) {
+            this.channel.postMessage('logout');
+        }
+        this.triggerIdle();
+    }
+    triggerIdle() {
+        if (this.isIdle)
+            return;
+        this.isIdle = true;
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('tk:idle', { detail: this.config }));
+        }
+        this.cleanup();
+        this.onIdle();
+    }
+    cleanup() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        this.removeTrackers();
+        if (this.channel) {
+            this.channel.close();
+            this.channel = null;
+        }
+        localStorage.removeItem(this.expiredTimeKey);
+    }
+}

package/dist/client/tk-client.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/tk-client.js

@@ -0,0 +1,22 @@
+import { IdleManager } from './idle-manager';
+if (typeof window !== 'undefined') {
+    const config = typeof __TOKENKIT_CONFIG__ !== 'undefined' ? __TOKENKIT_CONFIG__ : {};
+    // Initialize Idle Monitoring if configured
+    if (config.idle && config.idle.timeout > 0) {
+        new IdleManager(Object.assign(Object.assign({}, config.idle), { onIdle: () => {
+                var _a;
+                // Note: IdleManager dispatches 'tk:idle' automatically
+                if (config.idle.autoLogout !== false && ((_a = config.auth) === null || _a === void 0 ? void 0 : _a.logout)) {
+                    const logoutURL = config.auth.logout.startsWith('http')
+                        ? config.auth.logout
+                        : (config.baseURL || '') + config.auth.logout;
+                    fetch(logoutURL, {
+                        method: 'POST',
+                        credentials: 'include'
+                    }).finally(() => {
+                        window.location.reload();
+                    });
+                }
+            } }));
+    }
+}

package/dist/index.cjs

@@ -1227,7 +1227,7 @@ class APIClient {
                 throw new Error('Auth is not configured for this client');
             }
             const context = getContextStore();
-            return this.tokenManager.login(context, credentials, options);
+            return yield this.tokenManager.login(context, credentials, options);
         });
     }
     /**
@@ -1284,6 +1284,13 @@ function createClient(config) {
  * Astro integration for TokenKit
  *
  * This integration facilitates the setup of TokenKit in an Astro project.
+ * It performs the following:
+ * - Sets the global configuration for the API client.
+ * - Injects the configuration into the client-side via Vite's `define`.
+ * - Automatically registers the TokenKit middleware (unless `autoMiddleware` is set to `false`).
+ * - Injects a client-side script (`astro-tokenkit/client-init`) to handle idle session monitoring and automatic logout.
+ *
+ * @param config - TokenKit configuration options.
  *
  * @example
  * ```ts
@@ -1297,6 +1304,10 @@ function createClient(config) {
  *       auth: {
  *         login: '/auth/login',
  *         refresh: '/auth/refresh',
+ *       },
+ *       idle: {
+ *         timeout: 3600, // 1 hour
+ *         alert: { title: 'Session Expired' }
  *       }
  *     })
  *   ]
@@ -1314,7 +1325,7 @@ function tokenKit(config) {
     return {
         name: 'astro-tokenkit',
         hooks: {
-            'astro:config:setup': ({ updateConfig, addMiddleware }) => {
+            'astro:config:setup': ({ updateConfig, addMiddleware, injectScript }) => {
                 updateConfig({
                     vite: {
                         define: {
@@ -1329,13 +1340,26 @@ function tokenKit(config) {
                         order: 'pre'
                     });
                 }
+                // Always inject the client-side script for idle monitoring
+                injectScript('page', `import 'astro-tokenkit/client-init';`);
                 logger.debug('[TokenKit] Integration initialized');
             },
         },
     };
 }
 /**
- * Helper to define middleware in a separate file if needed
+ * Helper to create the TokenKit middleware.
+ *
+ * Use this if you have `autoMiddleware: false` in your integration configuration
+ * and want to manually register the middleware in your `src/middleware.ts` file.
+ *
+ * @example
+ * ```ts
+ * // src/middleware.ts
+ * import { defineMiddleware } from 'astro-tokenkit';
+ *
+ * export const onRequest = defineMiddleware();
+ * ```
  */
 const defineMiddleware = () => createMiddleware();