fix(clerk-js): Keep the session cookie while cache is being invalidated

Otherwise, in Nextjs apps the invalidate cache server action will result in a 404 if current route is being protected by auth().protect()

Author: nikosdouvlis

.changeset/sixty-kids-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Fix 404s after signing out in NextJS apps by keeping the session cookie while cache is being invalidated

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

@@ -225,25 +225,6 @@ describe('Clerk singleton', () => {
       expect(mockSession.touch).toHaveBeenCalled();
     });
 
-    /**
-     * The __session cookie needs to be cleared before calling __unstable__onBeforeSetActive
-     * as the callback may rely on the absence of the cookie to determine the user is logged out or not
-     * For example, for NextJS integration, calling __unstable__onBeforeSetActive before clearing the cookie
-     * would result in hitting the middleware with a valid session cookie (until it expires), even if the session no longer exists
-     */
-    it('clears __session cookie before calling __unstable__onBeforeSetActive', async () => {
-      mockSession.touch.mockReturnValueOnce(Promise.resolve());
-      mockClientFetch.mockReturnValue(Promise.resolve({ activeSessions: [mockSession] }));
-
-      (window as any).__unstable__onBeforeSetActive = () => {
-        expect(eventBusSpy).toHaveBeenCalledWith('token:update', { token: null });
-      };
-
-      const sut = new Clerk(productionPublishableKey);
-      await sut.load();
-      await sut.setActive({ session: null });
-    });
-
     it('sets __session and __client_uat cookie before calling __unstable__onBeforeSetActive', async () => {
       mockSession.touch.mockReturnValueOnce(Promise.resolve());
       mockClientFetch.mockReturnValue(Promise.resolve({ activeSessions: [mockSession] }));

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

@@ -731,6 +731,12 @@ export class Clerk implements ClerkInterface {
       }
     }
 
+    if (session?.lastActiveToken) {
+      eventBus.dispatch(events.TokenUpdate, { token: session.lastActiveToken });
+    }
+
+    await onBeforeSetActive();
+
     // If this.session exists, then signOut was triggered by the current tab
     // and should emit. Other tabs should not emit the same event again
     const shouldSignOutSession = this.session && newSession === null;
@@ -739,12 +745,6 @@ export class Clerk implements ClerkInterface {
       eventBus.dispatch(events.TokenUpdate, { token: null });
     }
 
-    if (session?.lastActiveToken) {
-      eventBus.dispatch(events.TokenUpdate, { token: session.lastActiveToken });
-    }
-
-    await onBeforeSetActive();
-
     //1. setLastActiveSession to passed user session (add a param).
     //   Note that this will also update the session's active organization
     //   id.