chore(clerk-js): Refactor SessionCookieService and auth/cookies handlers for consistency

There is also a fix for duplicate TokenUpdate event
and for cleaning the token in sign-out flow.

Author: dimkl

packages/clerk-js/src/core/auth/SessionCookieService.ts

@@ -1,35 +1,74 @@
+import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
 import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
-import type { Clerk, EnvironmentResource, SessionResource, TokenResource } from '@clerk/types';
+import type { Clerk, EnvironmentResource } from '@clerk/types';
 
-import { inBrowser } from '../../utils';
-import { clerkCoreErrorTokenRefreshFailed } from '../errors';
+import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
 import { eventBus, events } from '../events';
-import { setClientUatCookie } from './cookies/clientUat';
-import { removeSessionCookie, setSessionCookie } from './cookies/session';
+import type { FapiClient } from '../fapiClient';
+import type { ClientUatCookieHandler } from './cookies/clientUat';
+import { createClientUatCookie } from './cookies/clientUat';
+import type { SessionCookieHandler } from './cookies/session';
+import { createSessionCookie } from './cookies/session';
+import type { DevBrowser } from './devBrowser';
+import { createDevBrowser } from './devBrowser';
 import { SessionCookiePoller } from './SessionCookiePoller';
 
+// TODO: make SessionCookieService singleton since it handles updating cookies using a poller
+// and we need to avoid updating them concurrently.
 export class SessionCookieService {
   private environment: EnvironmentResource | undefined;
   private poller: SessionCookiePoller | null = null;
+  private clientUat: ClientUatCookieHandler;
+  private sessionCookie: SessionCookieHandler;
+  private devBrowser: DevBrowser;
 
-  constructor(private clerk: Clerk) {
+  constructor(private clerk: Clerk, fapiClient: FapiClient) {
     // set cookie on token update
     eventBus.on(events.TokenUpdate, ({ token }) => {
-      this.updateSessionCookie(token?.getRawString());
+      this.updateSessionCookie(token && token.getRawString());
+      this.setClientUatCookieForDevelopmentInstances();
     });
 
     this.refreshTokenOnVisibilityChange();
     this.startPollingForToken();
+
+    this.clientUat = createClientUatCookie();
+    this.sessionCookie = createSessionCookie();
+    this.devBrowser = createDevBrowser({
+      frontendApi: clerk.frontendApi,
+      fapiClient,
+    });
   }
 
   public setEnvironment(environment: EnvironmentResource) {
     this.environment = environment;
     this.setClientUatCookieForDevelopmentInstances();
   }
 
-  public async setAuthCookiesFromSession(session: SessionResource | undefined | null): Promise<void> {
-    this.updateSessionCookie(await session?.getToken());
-    this.setClientUatCookieForDevelopmentInstances();
+  public isSignedOut() {
+    return this.clientUat.get() <= 0;
+  }
+
+  public async setupDevelopment() {
+    await this.devBrowser.setup();
+  }
+
+  public setupProduction() {
+    this.devBrowser.clear();
+  }
+
+  public async handleUnauthenticatedDevBrowser() {
+    this.devBrowser.clear();
+    await this.devBrowser.setup();
+  }
+
+  public urlWithAuth(url: URL): URL {
+    const devBrowserJwt = this.devBrowser.getDevBrowserJWT();
+    if (!devBrowserJwt) {
+      return clerkMissingDevBrowserJwt();
+    }
+
+    return setDevBrowserJWTInURL(url, devBrowserJwt);
   }
 
   private startPollingForToken() {
@@ -40,10 +79,6 @@ export class SessionCookieService {
   }
 
   private refreshTokenOnVisibilityChange() {
-    if (!inBrowser()) {
-      return;
-    }
-
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState === 'visible') {
         void this.refreshSessionToken();
@@ -52,33 +87,24 @@ export class SessionCookieService {
   }
 
   private async refreshSessionToken(): Promise<void> {
-    if (!inBrowser()) {
-      return;
-    }
-
     if (!this.clerk.session) {
       return;
     }
 
     try {
-      this.updateSessionCookie(await this.clerk.session?.getToken());
+      await this.clerk.session.getToken();
     } catch (e) {
       return this.handleGetTokenError(e);
     }
   }
 
-  private updateSessionCookie(token: TokenResource | string | undefined | null) {
-    const rawToken = typeof token === 'string' ? token : token?.getRawString();
-
-    if (rawToken) {
-      return setSessionCookie(rawToken);
-    }
-    return removeSessionCookie();
+  private updateSessionCookie(token: string | null) {
+    return token ? this.sessionCookie.set(token) : this.sessionCookie.remove();
   }
 
   private setClientUatCookieForDevelopmentInstances() {
-    if (this.environment && this.environment.isDevelopmentOrStaging() && this.inCustomDevelopmentDomain()) {
-      setClientUatCookie(this.clerk.client);
+    if (this.environment?.isDevelopmentOrStaging() && this.inCustomDevelopmentDomain()) {
+      this.clientUat.set(this.clerk.client);
     }
   }
 

packages/clerk-js/src/core/auth/cookies/clientUat.ts

@@ -7,33 +7,45 @@ import { getCookieDomain } from '../getCookieDomain';
 
 const CLIENT_UAT_COOKIE_NAME = '__client_uat';
 
-export const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
-
-export const getClientUatCookie = (): number => {
-  return parseInt(clientUatCookie.get() || '0', 10);
+export type ClientUatCookieHandler = {
+  set: (client: ClientResource | undefined) => void;
+  get: () => number;
 };
 
-export const setClientUatCookie = (client: ClientResource | undefined) => {
-  const expires = addYears(Date.now(), 1);
-  const sameSite = inCrossOriginIframe() ? 'None' : 'Strict';
-  const secure = window.location.protocol === 'https:';
-  const domain = getCookieDomain();
-
-  // '0' indicates the user is signed out
-  let val = '0';
-
-  if (client && client.updatedAt && client.activeSessions.length > 0) {
-    // truncate timestamp to seconds, since this is a unix timestamp
-    val = Math.floor(client.updatedAt.getTime() / 1000).toString();
-  }
-
-  // Removes any existing cookies without a domain specified to ensure the change doesn't break existing sessions.
-  clientUatCookie.remove();
-
-  return clientUatCookie.set(val, {
-    expires,
-    sameSite,
-    domain,
-    secure,
-  });
+export const createClientUatCookie = (): ClientUatCookieHandler => {
+  const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
+
+  const get = (): number => {
+    return parseInt(clientUatCookie.get() || '0', 10);
+  };
+
+  const set = (client: ClientResource | undefined) => {
+    const expires = addYears(Date.now(), 1);
+    const sameSite = inCrossOriginIframe() ? 'None' : 'Strict';
+    const secure = window.location.protocol === 'https:';
+    const domain = getCookieDomain();
+
+    // '0' indicates the user is signed out
+    let val = '0';
+
+    if (client && client.updatedAt && client.activeSessions.length > 0) {
+      // truncate timestamp to seconds, since this is a unix timestamp
+      val = Math.floor(client.updatedAt.getTime() / 1000).toString();
+    }
+
+    // Removes any existing cookies without a domain specified to ensure the change doesn't break existing sessions.
+    clientUatCookie.remove();
+
+    return clientUatCookie.set(val, {
+      expires,
+      sameSite,
+      domain,
+      secure,
+    });
+  };
+
+  return {
+    set,
+    get,
+  };
 };

packages/clerk-js/src/core/auth/cookies/devBrowser.ts

@@ -4,20 +4,34 @@ import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 
 import { inCrossOriginIframe } from '../../../utils';
 
-export const devBrowserCookie = createCookieHandler(DEV_BROWSER_JWT_KEY);
+export type DevBrowserCookieHandler = {
+  set: (jwt: string) => void;
+  get: () => string | undefined;
+  remove: () => void;
+};
 
-export const getDevBrowserCookie = () => devBrowserCookie.get();
+export const createDevBrowserCookie = (): DevBrowserCookieHandler => {
+  const devBrowserCookie = createCookieHandler(DEV_BROWSER_JWT_KEY);
 
-export const setDevBrowserCookie = (jwt: string) => {
-  const expires = addYears(Date.now(), 1);
-  const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
-  const secure = window.location.protocol === 'https:';
+  const get = () => devBrowserCookie.get();
 
-  return devBrowserCookie.set(jwt, {
-    expires,
-    sameSite,
-    secure,
-  });
-};
+  const set = (jwt: string) => {
+    const expires = addYears(Date.now(), 1);
+    const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
+    const secure = window.location.protocol === 'https:';
+
+    return devBrowserCookie.set(jwt, {
+      expires,
+      sameSite,
+      secure,
+    });
+  };
 
-export const removeDevBrowserCookie = () => devBrowserCookie.remove();
+  const remove = () => devBrowserCookie.remove();
+
+  return {
+    get,
+    set,
+    remove,
+  };
+};

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -5,23 +5,35 @@ import { inCrossOriginIframe } from '../../../utils';
 
 const SESSION_COOKIE_NAME = '__session';
 
-/**
- *
- * This is a short-lived JS cookie used to store the current user JWT.
- *
- */
-export const sessionCookie = createCookieHandler(SESSION_COOKIE_NAME);
-
-export const removeSessionCookie = () => sessionCookie.remove();
-
-export const setSessionCookie = (token: string) => {
-  const expires = addYears(Date.now(), 1);
-  const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
-  const secure = window.location.protocol === 'https:';
-
-  return sessionCookie.set(token, {
-    expires,
-    sameSite,
-    secure,
-  });
+export type SessionCookieHandler = {
+  set: (token: string) => void;
+  remove: () => void;
+};
+
+export const createSessionCookie = (): SessionCookieHandler => {
+  /**
+   *
+   * This is a short-lived JS cookie used to store the current user JWT.
+   *
+   */
+  const sessionCookie = createCookieHandler(SESSION_COOKIE_NAME);
+
+  const remove = () => sessionCookie.remove();
+
+  const set = (token: string) => {
+    const expires = addYears(Date.now(), 1);
+    const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
+    const secure = window.location.protocol === 'https:';
+
+    return sessionCookie.set(token, {
+      expires,
+      sameSite,
+      secure,
+    });
+  };
+
+  return {
+    set,
+    remove,
+  };
 };

packages/clerk-js/src/core/auth/devBrowser.ts

@@ -5,7 +5,7 @@ import type { ClerkAPIErrorJSON } from '@clerk/types';
 import { isDevOrStagingUrl } from '../../utils';
 import { clerkErrorDevInitFailed } from '../errors';
 import type { FapiClient } from '../fapiClient';
-import { getDevBrowserCookie, removeDevBrowserCookie, setDevBrowserCookie } from './cookies/devBrowser';
+import { createDevBrowserCookie } from './cookies/devBrowser';
 
 export interface DevBrowser {
   clear(): void;
@@ -25,16 +25,18 @@ export type CreateDevBrowserOptions = {
 };
 
 export function createDevBrowser({ frontendApi, fapiClient }: CreateDevBrowserOptions): DevBrowser {
+  const devBrowserCookie = createDevBrowserCookie();
+
   function getDevBrowserJWT() {
-    return getDevBrowserCookie();
+    return devBrowserCookie.get();
   }
 
   function setDevBrowserJWT(jwt: string) {
-    setDevBrowserCookie(jwt);
+    devBrowserCookie.set(jwt);
   }
 
   function removeDevBrowserJWT() {
-    removeDevBrowserCookie();
+    devBrowserCookie.remove();
   }
 
   function clear() {
@@ -69,7 +71,7 @@ export function createDevBrowser({ frontendApi, fapiClient }: CreateDevBrowserOp
     }
 
     // 2. If no JWT is found in the first step, check if a JWT is already available in the __clerk_db_jwt JS cookie
-    if (getDevBrowserCookie()) {
+    if (devBrowserCookie.get()) {
       return;
     }