fix(clerk-js): Ensure cookies get unset on sign out (#6368)

Author: brkalow

.changeset/famous-news-judge.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Fixes an issue where cookies were not properly cleared on sign out when using non-default cookie attributes.

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

@@ -68,6 +68,8 @@ export class AuthCookieService {
       this.setClientUatCookieForDevelopmentInstances();
     });
 
+    eventBus.on(events.UserSignOut, () => this.handleSignOut());
+
     this.refreshTokenOnFocus();
     this.startPollingForToken();
 
@@ -212,6 +214,12 @@ export class AuthCookieService {
     // --------
   }
 
+  private handleSignOut() {
+    this.activeCookie.remove();
+    this.sessionCookie.remove();
+    this.setClientUatCookieForDevelopmentInstances();
+  }
+
   /**
    * The below methods handle active context tracking (session and organization) to ensure
    * only tabs with matching context can update the session cookie.

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

@@ -71,6 +71,30 @@ describe('createSessionCookie', () => {
     expect(mockRemove).toHaveBeenCalledTimes(2);
   });
 
+  it('should remove cookies with the same attributes as set', () => {
+    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    cookieHandler.set(mockToken);
+    cookieHandler.remove();
+
+    const expectedAttributes = {
+      sameSite: 'Lax',
+      secure: true,
+      partitioned: false,
+    };
+
+    expect(mockSet).toHaveBeenCalledWith(mockToken, {
+      expires: mockExpires,
+      sameSite: 'Lax',
+      secure: true,
+      partitioned: false,
+    });
+
+    expect(mockRemove).toHaveBeenCalledWith(expectedAttributes);
+    expect(mockRemove).toHaveBeenCalledTimes(2);
+    expect(mockRemove).toHaveBeenNthCalledWith(1, expectedAttributes);
+    expect(mockRemove).toHaveBeenNthCalledWith(2, expectedAttributes);
+  });
+
   it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
     mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');
 

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

@@ -12,6 +12,12 @@ export type DevBrowserCookieHandler = {
   remove: () => void;
 };
 
+const getCookieAttributes = (): { sameSite: string; secure: boolean } => {
+  const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
+  const secure = getSecureAttribute(sameSite);
+  return { sameSite, secure };
+};
+
 /**
  * Create a long-lived JS cookie to store the dev browser token
  * ONLY for development instances.
@@ -26,16 +32,16 @@ export const createDevBrowserCookie = (cookieSuffix: string): DevBrowserCookieHa
 
   const set = (jwt: string) => {
     const expires = addYears(Date.now(), 1);
-    const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
-    const secure = getSecureAttribute(sameSite);
+    const { sameSite, secure } = getCookieAttributes();
 
     suffixedDevBrowserCookie.set(jwt, { expires, sameSite, secure });
     devBrowserCookie.set(jwt, { expires, sameSite, secure });
   };
 
   const remove = () => {
-    suffixedDevBrowserCookie.remove();
-    devBrowserCookie.remove();
+    const attributes = getCookieAttributes();
+    suffixedDevBrowserCookie.remove(attributes);
+    devBrowserCookie.remove(attributes);
   };
 
   return {

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

@@ -13,6 +13,13 @@ export type SessionCookieHandler = {
   get: () => string | undefined;
 };
 
+const getCookieAttributes = (): { sameSite: string; secure: boolean; partitioned: boolean } => {
+  const sameSite = __BUILD_VARIANT_CHIPS__ ? 'None' : inCrossOriginIframe() ? 'None' : 'Lax';
+  const secure = getSecureAttribute(sameSite);
+  const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
+  return { sameSite, secure, partitioned };
+};
+
 /**
  * Create a short-lived JS cookie to store the current user JWT.
  * The cookie is used by the Clerk backend SDKs to identify
@@ -23,15 +30,14 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
   const suffixedSessionCookie = createCookieHandler(getSuffixedCookieName(SESSION_COOKIE_NAME, cookieSuffix));
 
   const remove = () => {
-    sessionCookie.remove();
-    suffixedSessionCookie.remove();
+    const attributes = getCookieAttributes();
+    sessionCookie.remove(attributes);
+    suffixedSessionCookie.remove(attributes);
   };
 
   const set = (token: string) => {
     const expires = addYears(Date.now(), 1);
-    const sameSite = __BUILD_VARIANT_CHIPS__ ? 'None' : inCrossOriginIframe() ? 'None' : 'Lax';
-    const secure = getSecureAttribute(sameSite);
-    const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
+    const { sameSite, secure, partitioned } = getCookieAttributes();
 
     // If setting Partitioned to true, remove the existing session cookies.
     // This is to avoid conflicts with the same cookie name without Partitioned attribute.

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

@@ -485,10 +485,8 @@ export class Clerk implements ClerkInterface {
     const executeSignOut = async () => {
       const tracker = createBeforeUnloadTracker(this.#options.standardBrowser);
 
-      // Notify other tabs that user is signing out.
+      // Notify other tabs that user is signing out and clean up cookies.
       eventBus.emit(events.UserSignOut, null);
-      // Clean up cookies
-      eventBus.emit(events.TokenUpdate, { token: null });
 
       this.#setTransitiveState();
 

packages/shared/src/cookie.ts

@@ -1,10 +1,17 @@
 import Cookies from 'js-cookie';
 
-type LocationAttributes = {
-  path?: string;
-  domain?: string;
-};
-
+/**
+ * Creates helper methods for dealing with a specific cookie.
+ *
+ * @example
+ * ```ts
+ * const cookie = createCookieHandler('my_cookie')
+ *
+ * cookie.set('my_value');
+ * cookie.get() // 'my_value';
+ * cookie.remove()
+ * ```
+ */
 export function createCookieHandler(cookieName: string) {
   return {
     get() {
@@ -18,10 +25,12 @@ export function createCookieHandler(cookieName: string) {
     },
     /**
      * On removing a cookie, you have to pass the exact same path/domain attributes used to set it initially
+     * > IMPORTANT! When deleting a cookie and you're not relying on the default attributes, you must pass the exact same path, domain, secure and sameSite attributes that were used to set the cookie.
+     *
      * @see https://github.com/js-cookie/js-cookie#basic-usage
      */
-    remove(locationAttributes?: LocationAttributes) {
-      Cookies.remove(cookieName, locationAttributes);
+    remove(cookieAttributes?: Cookies.CookieAttributes) {
+      Cookies.remove(cookieName, cookieAttributes);
     },
   };
 }