fix(clerk-js): Broadcast sign out to all tabs on long lived clients #5133

panteliselef · 2025-02-11T15:13:30Z

Description

Seems like our broadcasting logic inside setActive really depended on having the client being deleted and so that updateClient would never be called to update Clerk.user and Clerk.session.

Since Long lived clients, we are no longer deleting the client, which means updateClient would run before setActive causing the broadcasting logic to always be skipped.

The solution the PR suggests is to explicitly broadcast when signOut() is called. As in improvement, we should broadcast the sign out event when user.delete() gets called.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-02-11T15:13:34Z

🦋 Changeset detected

Latest commit: 3cd011e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-02-11T15:13:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 18, 2025 9:34am

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

…pdate

panteliselef · 2025-02-13T15:55:56Z

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

-    // 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;
-    if (shouldSignOutSession) {
-      this.#broadcastSignOutEvent();
-      eventBus.dispatch(events.TokenUpdate, { token: null });
-    }
-


Since we are no longer delete the client on sign out, this.session would always be null, causing broadcasting to never occur.

Also removing eventBus.dispatch(events.TokenUpdate, { token: null }) does not cause issues, because the code a few lines below will handle it appropriately.

panteliselef · 2025-02-17T20:34:53Z

integration/tests/sign-out-smoke.test.ts

    });

-    await mainTab.po.expect.toBeSignedOut();
+    await mainTab.po.expect.toBeSignedOut({ timeOut: 2 * 1_000 });


Previously the test was passing after 40-50 seconds because either /touch or /tokens would force update the state.

panteliselef · 2025-02-17T20:36:03Z

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

+
+      // Notify other tabs that user is signing out.
+      this.__internal_broadcastSignOutEvent();


Explicitly broadcast inside signOut() instead of attempting to detect if setActive({ session: null}) should notify

panteliselef · 2025-02-17T20:36:48Z

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

    });
  };

+  // TODO: Deprecate this one, and mark it as internal. Is there actual benefit for external developers to use this ? Should they ever reach for it ?


What do you think about this ? Would we ever ask people to use this in a custom flow ?

Most likely not, it should really be something that's handled internally.

panteliselef · 2025-02-17T20:37:56Z

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

  };

-  #broadcastSignOutEvent = () => {
+  public __internal_broadcastSignOutEvent = () => {


Alternatively we could use the event bus

👍 let's use the event bus, that way we can avoid a new Clerk method.

brkalow · 2025-02-17T21:00:10Z

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

  };

-  #broadcastSignOutEvent = () => {
+  public __internal_broadcastSignOutEvent = () => {


👍 let's use the event bus, that way we can avoid a new Clerk method.

brkalow · 2025-02-17T21:00:32Z

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

    });
  };

+  // TODO: Deprecate this one, and mark it as internal. Is there actual benefit for external developers to use this ? Should they ever reach for it ?


Most likely not, it should really be something that's handled internally.

brkalow · 2025-02-17T21:02:08Z

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

      path: this.path() + '/sessions',
-    }) as unknown as Promise<ClientResource>;
+    }).then(e => {
+      SessionTokenCache.clear();


I don't think this is the right place for this call. What's the desired behavior? SessionTokenCache is cleared on sign out?

Correct, clearing the cache on sign out.

We're calling SessionTokenCache.clear() on Client.destroy(), on Session.end(), and on Session.remove(). Giving the fact that we clear the cache on an individual session removal, i think we should do the same when removing all of them.

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

brkalow · 2025-02-18T14:49:04Z

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

+      // Notify other tabs that user is signing out.
+      eventBus.dispatch(events.UserSignOut, null);


❓ should we be doing this later in the sign out flow?

Previously inside setActive it was one of the first things that got called. And since by that point we have already cleared cookies seems appropriate.

brkalow · 2025-02-18T14:50:03Z

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


 export const events = {
  TokenUpdate: 'token:update',
+  UserSignOut: 'user:signOut',


💭 (optional) what do you think about just calling this even signOut? I'm not sure we need the user: scope.

I was thinking the same, I added the scope to respect the pattern. Since it does not do any harm, I think I'll leave it as is.

Fair enough, I wouldn't say 1 event indicates a pattern though 😉

fix(clerk-js): Avoid updating client when removing all sessions

d28680c

clerk-cookie added clerk-js integration labels Feb 11, 2025

vercel bot deployed to Preview February 11, 2025 15:15 View deployment

allow unit tests to pass

4e926cd

vercel bot deployed to Preview February 11, 2025 16:17 View deployment

panteliselef commented Feb 11, 2025

View reviewed changes

packages/clerk-js/src/core/resources/Client.ts Outdated Show resolved Hide resolved

panteliselef added 3 commits February 13, 2025 13:57

Merge branch 'refs/heads/main' into elef/fix-remove-sessions-client-u…

16aa646

…pdate

do not depend on client to broadcast

e8c1e29

avoid using signOut on delete

8c98956

vercel bot deployed to Preview February 13, 2025 15:50 View deployment

clean up

8e613d3

vercel bot deployed to Preview February 13, 2025 15:54 View deployment

panteliselef commented Feb 13, 2025

View reviewed changes

panteliselef self-assigned this Feb 13, 2025

panteliselef added 2 commits February 17, 2025 22:31

revert skipping client update

b71c79b

Merge branch 'main' into elef/fix-remove-sessions-client-update

3539358

vercel bot deployed to Preview February 17, 2025 20:33 View deployment

update changeset

0bcd8b1

vercel bot deployed to Preview February 17, 2025 20:35 View deployment

panteliselef commented Feb 17, 2025

View reviewed changes

panteliselef changed the title ~~fix(clerk-js): Avoid updating client when removing all sessions~~ fix(clerk-js): Broadcast sign out to all tabs on long lived clients Feb 17, 2025

panteliselef marked this pull request as ready for review February 17, 2025 20:44

brkalow reviewed Feb 17, 2025

View reviewed changes

use event bus

3cd011e

vercel bot deployed to Preview February 18, 2025 09:34 View deployment

brkalow reviewed Feb 18, 2025

View reviewed changes

panteliselef requested a review from brkalow February 18, 2025 21:13

brkalow approved these changes Feb 18, 2025

View reviewed changes

panteliselef merged commit 14c1bfa into main Feb 19, 2025
29 checks passed

panteliselef deleted the elef/fix-remove-sessions-client-update branch February 19, 2025 11:12

clerk-cookie mentioned this pull request Feb 19, 2025

ci(repo): Version packages #5193

Merged


		// Notify other tabs that user is signing out.
		this.__internal_broadcastSignOutEvent();

		// Notify other tabs that user is signing out.
		eventBus.dispatch(events.UserSignOut, null);

fix(clerk-js): Broadcast sign out to all tabs on long lived clients #5133

fix(clerk-js): Broadcast sign out to all tabs on long lived clients #5133

Uh oh!

Conversation

panteliselef commented Feb 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot bot commented Feb 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Feb 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

panteliselef commented Feb 11, 2025 •

edited

Loading

changeset-bot bot commented Feb 11, 2025 •

edited

Loading

vercel bot commented Feb 11, 2025 •

edited

Loading