Add lru map to prevent unbounded growth

Author: jacekradko

packages/clerk-js/src/core/resources/Session.ts

@@ -28,6 +28,7 @@ import { isWebAuthnSupported as isWebAuthnSupportedOnWindow } from '@clerk/share
 
 import { unixEpochToDate } from '@/utils/date';
 import { debugLogger } from '@/utils/debug';
+import { LruMap } from '@/utils/lru-map';
 import {
   convertJSONToPublicKeyRequestOptions,
   serializePublicKeyCredentialAssertion,
@@ -46,13 +47,12 @@ import { SessionVerification } from './SessionVerification';
  * Cache of per-tokenId locks for cross-tab coordination.
  * Each unique tokenId gets its own lock, allowing different token types
  * (e.g., different orgs, JWT templates) to be fetched in parallel.
+ * Uses LRU eviction to prevent unbounded growth.
  */
-const tokenLocks = new Map<string, ReturnType<typeof SafeLock>>();
+const tokenLocks = new LruMap<string, ReturnType<typeof SafeLock>>(50);
 
 /**
  * Gets or creates a cross-tab lock for a specific tokenId.
- * Using per-tokenId locks allows different token types to be fetched in parallel
- * while still preventing duplicate fetches for the same token across tabs.
  */
 function getTokenLock(tokenId: string) {
   let lock = tokenLocks.get(tokenId);

packages/clerk-js/src/utils/__tests__/lru-map.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+
+import { LruMap } from '../lru-map';
+
+describe('LruMap', () => {
+  it('stores and retrieves values', () => {
+    const map = new LruMap<string, number>(3);
+    map.set('a', 1);
+    map.set('b', 2);
+
+    expect(map.get('a')).toBe(1);
+    expect(map.get('b')).toBe(2);
+    expect(map.get('c')).toBeUndefined();
+  });
+
+  it('evicts oldest entry when exceeding max size', () => {
+    const map = new LruMap<string, number>(3);
+    map.set('a', 1);
+    map.set('b', 2);
+    map.set('c', 3);
+    map.set('d', 4);
+
+    expect(map.get('a')).toBeUndefined();
+    expect(map.get('b')).toBe(2);
+    expect(map.get('c')).toBe(3);
+    expect(map.get('d')).toBe(4);
+    expect(map.size).toBe(3);
+  });
+
+  it('moves accessed entry to most recent position', () => {
+    const map = new LruMap<string, number>(3);
+    map.set('a', 1);
+    map.set('b', 2);
+    map.set('c', 3);
+
+    map.get('a');
+
+    map.set('d', 4);
+
+    expect(map.get('a')).toBe(1);
+    expect(map.get('b')).toBeUndefined();
+    expect(map.get('c')).toBe(3);
+    expect(map.get('d')).toBe(4);
+  });
+
+  it('updates existing entry without eviction', () => {
+    const map = new LruMap<string, number>(3);
+    map.set('a', 1);
+    map.set('b', 2);
+    map.set('c', 3);
+
+    map.set('a', 100);
+
+    expect(map.get('a')).toBe(100);
+    expect(map.size).toBe(3);
+
+    map.set('d', 4);
+
+    expect(map.get('a')).toBe(100);
+    expect(map.get('b')).toBeUndefined();
+    expect(map.size).toBe(3);
+  });
+
+  it('handles max size of 1', () => {
+    const map = new LruMap<string, number>(1);
+    map.set('a', 1);
+    map.set('b', 2);
+
+    expect(map.get('a')).toBeUndefined();
+    expect(map.get('b')).toBe(2);
+    expect(map.size).toBe(1);
+  });
+});

packages/clerk-js/src/utils/lru-map.ts

@@ -0,0 +1,34 @@
+/**
+ * A simple Map with LRU (Least Recently Used) eviction.
+ * When the map exceeds maxSize, the oldest entries are removed.
+ */
+export class LruMap<K, V> extends Map<K, V> {
+  constructor(private maxSize: number) {
+    super();
+  }
+
+  override get(key: K): V | undefined {
+    const value = super.get(key);
+    if (value !== undefined) {
+      super.delete(key);
+      super.set(key, value);
+    }
+    return value;
+  }
+
+  override set(key: K, value: V): this {
+    if (super.has(key)) {
+      super.delete(key);
+    } else {
+      while (this.size >= this.maxSize) {
+        const oldest = super.keys().next().value;
+        if (oldest !== undefined) {
+          super.delete(oldest);
+        } else {
+          break;
+        }
+      }
+    }
+    return super.set(key, value);
+  }
+}