Rename setAccessors -> updateAccessors and make it emit

Author: Ephem

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

@@ -491,8 +491,7 @@ export class Clerk implements ClerkInterface {
      * with the new token to the state listeners.
      */
     eventBus.on(events.SessionTokenResolved, () => {
-      this.#setAccessors(this.session);
-      this.#emit();
+      this.#updateAccessors(this.session);
     });
 
     if (this.#options.sdkMetadata) {
@@ -601,8 +600,7 @@ export class Clerk implements ClerkInterface {
         return;
       }
 
-      this.#setAccessors();
-      this.#emit();
+      this.#updateAccessors();
 
       await onAfterSetActive();
     };
@@ -1449,8 +1447,7 @@ export class Clerk implements ClerkInterface {
         return;
       }
 
-      this.#setAccessors(newSession);
-      this.#emit();
+      this.#updateAccessors(newSession);
 
       // Do not revalidate server cache for pending sessions to avoid unmount of `SignIn/SignUp` AIOs when navigating to task
       // newSession can be mutated by the time we get here (org change session touch)
@@ -2365,14 +2362,16 @@ export class Clerk implements ClerkInterface {
       const session = this.#options.selectInitialSession
         ? this.#options.selectInitialSession(newClient)
         : this.#defaultSession(newClient);
-      this.#setAccessors(session);
+
+      this.#updateAccessors(session, { dangerouslySkipEmit: true });
     }
+
     this.client = newClient;
 
     if (this.session) {
-      const session = this.#getSessionFromClient(this.session.id);
+      const newSession = this.#getSessionFromClient(this.session.id, newClient);
 
-      const hasTransitionedToPendingStatus = this.session.status === 'active' && session?.status === 'pending';
+      const hasTransitionedToPendingStatus = this.session.status === 'active' && newSession?.status === 'pending';
       if (hasTransitionedToPendingStatus) {
         const onAfterSetActive: SetActiveHook =
           typeof window !== 'undefined' && typeof window.__unstable__onAfterSetActive === 'function'
@@ -2385,7 +2384,10 @@ export class Clerk implements ClerkInterface {
       }
 
       // Note: this might set this.session to null
-      this.#setAccessors(session);
+      // We need to set these values before emitting the token update, as handling that relies on these values being set.
+      // We don't want to emit here though, as we want to emit the token update first. That happens synchronously, so it
+      // should be safe as long as we call #emit() right after.
+      this.#updateAccessors(newSession, { dangerouslySkipEmit: true });
 
       // A client response contains its associated sessions, along with a fresh token, so we dispatch a token update event.
       if (!this.session?.lastActiveToken && !isValidBrowserOnline()) {
@@ -2835,21 +2837,37 @@ export class Clerk implements ClerkInterface {
     this.#emit();
   };
 
-  #getLastActiveOrganizationFromSession = () => {
-    const orgMemberships = this.session?.user.organizationMemberships || [];
-    return (
-      orgMemberships.map(om => om.organization).find(org => org.id === this.session?.lastActiveOrganizationId) || null
-    );
+  #getLastActiveOrganizationFromSession = (session = this.session) => {
+    const orgMemberships = session?.user.organizationMemberships || [];
+    return orgMemberships.map(om => om.organization).find(org => org.id === session?.lastActiveOrganizationId) || null;
+  };
+
+  #getAccessorsFromSession = (session = this.session) => {
+    return {
+      session: session || null,
+      organization: this.#getLastActiveOrganizationFromSession(session),
+      user: session ? session.user : null,
+    };
   };
 
-  #setAccessors = (session?: SignedInSessionResource | null) => {
-    this.session = session || null;
-    this.organization = this.#getLastActiveOrganizationFromSession();
-    this.user = this.session ? this.session.user : null;
+  /**
+   * Updates the accessors for the Clerk singleton and emits.
+   * If dangerouslySkipEmit is true, the emit will be skipped and you are responsible for calling #emit() yourself. This is dangerous because if there is a gap between setting these and emitting, library consumers that both read state directly and set up listeners could end up in a inconsistent state.
+   */
+  #updateAccessors = (session?: SignedInSessionResource | null, options?: { dangerouslySkipEmit?: boolean }) => {
+    const { session: newSession, organization, user } = this.#getAccessorsFromSession(session);
+
+    this.session = newSession;
+    this.organization = organization;
+    this.user = user;
+
+    if (!options?.dangerouslySkipEmit) {
+      this.#emit();
+    }
   };
 
-  #getSessionFromClient = (sessionId: string | undefined): SignedInSessionResource | null => {
-    return this.client?.signedInSessions.find(x => x.id === sessionId) || null;
+  #getSessionFromClient = (sessionId: string | undefined, client = this.client): SignedInSessionResource | null => {
+    return client?.signedInSessions.find(x => x.id === sessionId) || null;
   };
 
   #handleImpersonationFab = () => {