From ff2c712219f7b42b79a6b7392923cb8dddb00b99 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Mon, 13 May 2024 12:36:10 +0300 Subject: [PATCH 1/7] fix(nextjs): Fix auth state not updated correctly in app router after sign out --- packages/nextjs/src/app-router/client/ClerkProvider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nextjs/src/app-router/client/ClerkProvider.tsx b/packages/nextjs/src/app-router/client/ClerkProvider.tsx index 09cd7270b6d..d31d3c7151c 100644 --- a/packages/nextjs/src/app-router/client/ClerkProvider.tsx +++ b/packages/nextjs/src/app-router/client/ClerkProvider.tsx @@ -55,6 +55,7 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => { window.__clerk_internal_invalidateCachePromise = res; startTransition(() => { router.refresh(); + router.push(window.location.href); }); }); }; From 71a864ede7c30395d0727bed846012ab6754d3fb Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Mon, 13 May 2024 13:11:10 +0300 Subject: [PATCH 2/7] chore(repo): Add Changeset --- .changeset/fluffy-turtles-applaud.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fluffy-turtles-applaud.md diff --git a/.changeset/fluffy-turtles-applaud.md b/.changeset/fluffy-turtles-applaud.md new file mode 100644 index 00000000000..0d0678fcad6 --- /dev/null +++ b/.changeset/fluffy-turtles-applaud.md @@ -0,0 +1,5 @@ +--- +'@clerk/nextjs': patch +--- + +Fix to update auth state after signing out From c5aa750307c8ced9382194dc4bec8eedb3cdecb7 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Tue, 14 May 2024 23:23:18 +0300 Subject: [PATCH 3/7] fix(clerk-js,nextjs): Remove cookie before calling beforeSetActive when signing out --- packages/clerk-js/src/core/clerk.ts | 1 + packages/nextjs/src/app-router/client/ClerkProvider.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 855d57a6072..0ebb040d50e 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -728,6 +728,7 @@ export class Clerk implements ClerkInterface { const shouldSignOutSession = this.session && newSession === null; if (shouldSignOutSession) { this.#broadcastSignOutEvent(); + removeSessionCookie(); } await onBeforeSetActive(); diff --git a/packages/nextjs/src/app-router/client/ClerkProvider.tsx b/packages/nextjs/src/app-router/client/ClerkProvider.tsx index d31d3c7151c..09cd7270b6d 100644 --- a/packages/nextjs/src/app-router/client/ClerkProvider.tsx +++ b/packages/nextjs/src/app-router/client/ClerkProvider.tsx @@ -55,7 +55,6 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => { window.__clerk_internal_invalidateCachePromise = res; startTransition(() => { router.refresh(); - router.push(window.location.href); }); }); }; From 28d01fd98e2ae199c42a60afe24ee864d4585435 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 15 May 2024 14:01:52 +0300 Subject: [PATCH 4/7] fix(clerk-js): Use TokenUpdate event to remove the session token --- packages/clerk-js/src/core/clerk.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 0ebb040d50e..66a4d5eac42 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -728,7 +728,7 @@ export class Clerk implements ClerkInterface { const shouldSignOutSession = this.session && newSession === null; if (shouldSignOutSession) { this.#broadcastSignOutEvent(); - removeSessionCookie(); + eventBus.dispatch(events.TokenUpdate, { token: null }); } await onBeforeSetActive(); From 0feec52f553cf9142500c23ec73f1fc43c7b7538 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 15 May 2024 16:05:31 +0300 Subject: [PATCH 5/7] chore(clerk-js): Remove uneeded events.TokenUpdate dispatch --- packages/clerk-js/src/core/clerk.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 66a4d5eac42..90a97ab86f2 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -742,13 +742,9 @@ export class Clerk implements ClerkInterface { newSession = this.#getSessionFromClient(newSession?.id); } - // Sync __session and __client_uat to cookies using events.TokenUpdate dispatched event - // only for newSession is null since the getToken will not be executed. Since getToken - // triggers internally a events.TokenUpdate there is no need to trigger it when the newSession exists. - const token = await newSession?.getToken(); - if (!token) { - eventBus.dispatch(events.TokenUpdate, { token: null }); - } + // getToken syncs __session and __client_uat to cookies using events.TokenUpdate dispatched event. + await newSession?.getToken(); + //2. If there's a beforeEmit, typically we're navigating. Emit the session as // undefined, then wait for beforeEmit to complete before emitting the new session. // When undefined, neither SignedIn nor SignedOut renders, which avoids flickers or From c444488ae4bd829e385a87c9435e2e0e82e4cbe3 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 15 May 2024 16:51:07 +0300 Subject: [PATCH 6/7] chore(clerk-js): Update changeset --- .changeset/fluffy-turtles-applaud.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/fluffy-turtles-applaud.md b/.changeset/fluffy-turtles-applaud.md index 0d0678fcad6..f9dd5e8d3b9 100644 --- a/.changeset/fluffy-turtles-applaud.md +++ b/.changeset/fluffy-turtles-applaud.md @@ -1,5 +1,5 @@ --- -'@clerk/nextjs': patch +'@clerk/clerk-js': patch --- -Fix to update auth state after signing out +Remove cookie when signing out before running `onBeforeSetActive` to resolve issues where we do navigations in `onBeforeSetActive`. From c469a322c848021c757fe14010778e07ff0c5dab Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Thu, 16 May 2024 04:16:33 +0300 Subject: [PATCH 7/7] chore(clerk-js): Add test --- .../clerk-js/src/core/__tests__/clerk.test.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/clerk-js/src/core/__tests__/clerk.test.ts b/packages/clerk-js/src/core/__tests__/clerk.test.ts index b18787dda80..97b33b49d4f 100644 --- a/packages/clerk-js/src/core/__tests__/clerk.test.ts +++ b/packages/clerk-js/src/core/__tests__/clerk.test.ts @@ -224,6 +224,25 @@ 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(evenBusSpy).toHaveBeenCalledWith('token:update', { token: null }); + }; + + const sut = new Clerk(productionPublishableKey); + await sut.load(); + await sut.setActive({ session: null }); + }); + it('calls __unstable__onAfterSetActive after beforeEmit and session.touch', async () => { const beforeEmitMock = jest.fn(); mockSession.touch.mockReturnValueOnce(Promise.resolve());