fix(clerk-js): Account for user clock skew in TokenCache

packages/clerk-js/src/core/errors.ts

@@ -54,10 +54,6 @@ export function clerkMissingFapiClientInResources(): never {
   throw new Error(`${errorPrefix} Missing FAPI client in resources.`);
 }
 
-export function clerkCoreErrorExpiredToken(expiresAt: number): never {
-  throw new Error(`${errorPrefix} Token has expired (exp='${expiresAt}').`);
-}
-
 export function clerkCoreErrorTokenRefreshFailed(message: string): never {
   throw new Error(`${errorPrefix} Token refresh failed (error='${message}')`);
 }

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

@@ -66,17 +66,13 @@ export class Session extends BaseResource implements SessionResource {
       return null;
     }
 
-    const { leewayInSeconds = 10, template, skipCache = false } = options || {};
-    if (!template && leewayInSeconds >= 60) {
+    const { leewayInSeconds, template, skipCache = false } = options || {};
+    if (!template && Number(leewayInSeconds) >= 60) {
       throw new Error('Leeway can not exceed the token lifespan (60 seconds)');
     }
 
-    if (!!template && this.#isLegacyIntegrationRequest(template)) {
-      return this.#handleLegacyIntegrationToken({
-        template,
-        leewayInSeconds,
-        skipCache,
-      });
+    if (this.#isLegacyIntegrationRequest(template)) {
+      return this.#handleLegacyIntegrationToken({ template, leewayInSeconds, skipCache });
     }
 
     const tokenId = this.#getCacheId(template);
@@ -91,7 +87,7 @@ export class Session extends BaseResource implements SessionResource {
     return tokenResolver.then(res => res.getRawString());
   };
 
-  #hydrateCache = (token: Token | null) => {
+  #hydrateCache = (token: TokenResource | null) => {
     if (token) {
       SessionTokenCache.set({
         tokenId: this.#getCacheId(),
@@ -109,7 +105,7 @@ export class Session extends BaseResource implements SessionResource {
   }
 
   #isLegacyIntegrationRequest = (template: string | undefined): boolean => {
-    return (template || '').startsWith('integration_');
+    return !!template && template.startsWith('integration_');
   };
 
   #removeLegacyIntegrationPrefix = (template: string | undefined): string => {

packages/clerk-js/src/core/tokenCache.test.ts

@@ -24,6 +24,34 @@ const jwt = jwtGen.sign(
 );
 
 describe('MemoryTokenCache', () => {
+  describe('clear()', () => {
+    it('removes all entries', () => {
+      const cache = SessionTokenCache;
+      const token = new Token({
+        object: 'token',
+        id: 'foo',
+        jwt,
+      });
+
+      const tokenResolver = new Promise<TokenResource>(resolve => setTimeout(() => resolve(token), 100));
+      const key = {
+        tokenId: 'foo',
+        audience: 'bar',
+      };
+
+      // Add a tokenResolver to cache
+      cache.set({ ...key, tokenResolver });
+
+      expect(cache.get(key)).toBeDefined();
+      expect(cache.size()).toEqual(1);
+
+      cache.clear();
+
+      expect(cache.get(key)).toBeUndefined();
+      expect(cache.size()).toEqual(0);
+    });
+  });
+
   it('caches tokenResolver while is pending until the JWT expiration', async () => {
     const cache = SessionTokenCache;
     const token = new Token({
@@ -77,11 +105,65 @@ describe('MemoryTokenCache', () => {
 
     // Add another tokenResolver to cache
     cache.set({ ...key, tokenResolver });
+  });
 
-    // Clear the cache
-    cache.clear();
+  describe('get(key, leeway)', () => {
+    it('includes 5 seconds sync leeway', async () => {
+      const cache = SessionTokenCache;
+      const token = new Token({
+        object: 'token',
+        id: 'foo',
+        jwt,
+      });
 
-    // Cache is empty, tokenResolver has been removed due to cache clearance
-    expect(cache.get(key)).toBeUndefined();
+      const tokenResolver = new Promise<TokenResource>(resolve => resolve(token));
+      const key = { tokenId: 'foo', audience: 'bar' };
+
+      cache.set({ ...key, tokenResolver });
+      // Wait tokenResolver to resolve
+      jest.advanceTimersByTime(100);
+      await tokenResolver;
+
+      expect(cache.get(key)).toMatchObject(key);
+
+      // 45s since token created
+      jest.advanceTimersByTime(45 * 1000);
+      expect(cache.get(key)).toMatchObject(key);
+
+      // 46s since token created
+      jest.advanceTimersByTime(1 * 1000);
+      expect(cache.get(key)).toBeUndefined();
+    });
+
+    it('includes 5 seconds sync leeway even if leeway is removed', async () => {
+      const cache = SessionTokenCache;
+      const token = new Token({
+        object: 'token',
+        id: 'foo',
+        jwt,
+      });
+
+      const tokenResolver = new Promise<TokenResource>(resolve => resolve(token));
+      const key = { tokenId: 'foo', audience: 'bar' };
+
+      cache.set({ ...key, tokenResolver });
+      // Wait tokenResolver to resolve
+      jest.advanceTimersByTime(100);
+      await tokenResolver;
+
+      expect(cache.get(key)).toMatchObject(key);
+
+      // 45s since token created
+      jest.advanceTimersByTime(45 * 1000);
+      expect(cache.get(key, 0)).toMatchObject(key);
+
+      // 54s since token created
+      jest.advanceTimersByTime(9 * 1000);
+      expect(cache.get(key, 0)).toMatchObject(key);
+
+      // 55s since token created
+      jest.advanceTimersByTime(1 * 1000);
+      expect(cache.get(key, 0)).toBeUndefined();
+    });
   });
 });

packages/clerk-js/src/core/tokenCache.ts

@@ -1,7 +1,5 @@
 import type { TokenResource } from '@clerk/types';
 
-import { clerkCoreErrorExpiredToken } from './errors';
-
 interface TokenCacheKeyJSON {
   audience?: string;
   tokenId: string;
@@ -11,10 +9,12 @@ interface TokenCacheEntry extends TokenCacheKeyJSON {
   tokenResolver: Promise<TokenResource>;
 }
 
+type Seconds = number;
+
 interface TokenCacheValue {
   entry: TokenCacheEntry;
-  expiresAt?: number;
-  expiresIn?: number;
+  createdAt: Seconds;
+  expiresIn?: Seconds;
 }
 
 interface TokenCache {
@@ -27,6 +27,8 @@ interface TokenCache {
 const KEY_PREFIX = 'clerk';
 const DELIMITER = '::';
 const LEEWAY = 10;
+// This value should have the same value as the INTERVAL_IN_MS in AuthenticationPoller
+const SYNC_LEEWAY = 5;
 
 export class TokenCacheKey {
   static fromKey(key: string): TokenCacheKey {
@@ -63,7 +65,9 @@ const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
     });
 
     const key = cacheKey.toKey();
-    const value: TokenCacheValue = { entry };
+
+    const createdAt = Math.floor(Date.now() / 1000);
+    const value: TokenCacheValue = { entry, createdAt };
 
     const deleteKey = () => {
       if (cache.get(key) === value) {
@@ -73,16 +77,11 @@ const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
 
     entry.tokenResolver
       .then(newToken => {
-        const nowSeconds = Math.floor(Date.now() / 1000);
         const expiresAt = newToken.jwt.claims.exp;
-        const expiresIn = expiresAt - nowSeconds;
-
-        if (expiresIn <= 0) {
-          clerkCoreErrorExpiredToken(expiresAt);
-        }
+        const issuedAt = newToken.jwt.claims.iat;
+        const expiresIn: Seconds = expiresAt - issuedAt;
 
         // Mutate cached value and set expirations
-        value.expiresAt = expiresAt;
         value.expiresIn = expiresIn;
         setTimeout(deleteKey, expiresIn * 1000);
       })
@@ -102,9 +101,12 @@ const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
     }
 
     const nowSeconds = Math.floor(Date.now() / 1000);
-    const willExpireSoon = value.expiresAt && value.expiresAt - leeway < nowSeconds;
+    const elapsedSeconds = nowSeconds - value.createdAt;
+    // We will include the authentication poller interval as part of the leeway to ensure
+    // that the cache value will be valid for more than the SYNC_LEEWAY or the leeway in the next poll.
+    const expiresSoon = value.expiresIn! - elapsedSeconds < (leeway || 1) + SYNC_LEEWAY;
 
-    if (willExpireSoon) {
+    if (expiresSoon) {
       cache.delete(cacheKey.toKey());
       return;
     }