Remove #handlePendingSession branch and introduce navigate option

Co-authored-by: Laura Beatris <[email protected]>

Author: nikosdouvlis

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

@@ -28,9 +28,9 @@ import type {
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
-  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
+  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -54,7 +54,6 @@ import type {
   OrganizationProfileProps,
   OrganizationResource,
   OrganizationSwitcherProps,
-  PendingSessionResource,
   PricingTableProps,
   PublicKeyCredentialCreationOptionsWithoutExtensions,
   PublicKeyCredentialRequestOptionsWithoutExtensions,
@@ -119,7 +118,7 @@ import {
   stripOrigin,
   windowNavigate,
 } from '../utils';
-import { assertNoLegacyProp, warnNoTaskOptions } from '../utils/assertNoLegacyProp';
+import { assertNoLegacyProp } from '../utils/assertNoLegacyProp';
 import { CLERK_ENVIRONMENT_STORAGE_ENTRY, SafeLocalStorage } from '../utils/localStorage';
 import { memoizeListenerCallback } from '../utils/memoizeStateListenerCallback';
 import { RedirectUrls } from '../utils/redirectUrls';
@@ -1199,14 +1198,11 @@ export class Clerk implements ClerkInterface {
   /**
    * `setActive` can be used to set the active session and/or organization.
    */
-  public setActive = async ({
-    session,
-    organization,
-    beforeEmit,
-    redirectUrl,
-    onPendingSession,
-  }: SetActiveParams): Promise<void> => {
+  public setActive = async (params: SetActiveParams): Promise<void> => {
+    const { organization, beforeEmit, redirectUrl, navigate: setActiveNavigate } = params;
+    let { session } = params;
     this.__internal_setActiveInProgress = true;
+
     try {
       if (!this.client) {
         throw new Error('setActive is being called before the client is loaded. Wait for init.');
@@ -1218,6 +1214,10 @@ export class Clerk implements ClerkInterface {
         );
       }
 
+      if (typeof session === 'string') {
+        session = (this.client.sessions.find(x => x.id === session) as SignedInSessionResource) || null;
+      }
+
       const onBeforeSetActive: SetActiveHook =
         typeof window !== 'undefined' && typeof window.__unstable__onBeforeSetActive === 'function'
           ? window.__unstable__onBeforeSetActive
@@ -1228,11 +1228,8 @@ export class Clerk implements ClerkInterface {
           ? window.__unstable__onAfterSetActive
           : noop;
 
-      if (typeof session === 'string') {
-        session = (this.client.sessions.find(x => x.id === session) as SignedInSessionResource) || null;
-      }
-
       let newSession = session === undefined ? this.session : session;
+      const sessionIsPending = newSession?.status === 'pending';
 
       // At this point, the `session` variable should contain either an `SignedInSessionResource`
       // ,`null` or `undefined`.
@@ -1263,20 +1260,14 @@ export class Clerk implements ClerkInterface {
         }
       }
 
-      if (newSession?.status === 'pending') {
-        warnNoTaskOptions({
-          ...this.#options,
-          onPendingSession: this.#options['onPendingSession'] ?? onPendingSession,
-        });
-        await this.#handlePendingSession(newSession, onPendingSession);
-        return;
+      // Do not revalidate server cache for pending sessions to avoid unmount of `SignIn/SignUp` AIOs when navigating to task
+      if (!sessionIsPending) {
+        /**
+         * Hint to each framework, that the user will be signed out when `{session: null}` is provided.
+         */
+        await onBeforeSetActive(newSession === null ? 'sign-out' : undefined);
       }
 
-      /**
-       * Hint to each framework, that the user will be signed out when `{session: null}` is provided.
-       */
-      await onBeforeSetActive(newSession === null ? 'sign-out' : undefined);
-
       //1. setLastActiveSession to passed user session (add a param).
       //   Note that this will also update the session's active organization
       //   id.
@@ -1309,19 +1300,44 @@ export class Clerk implements ClerkInterface {
         });
       }
 
-      if (redirectUrl && !beforeEmit) {
+      const shouldNavigate = (redirectUrl || setActiveNavigate) && !beforeEmit;
+      if (shouldNavigate) {
         await tracker.track(async () => {
           if (!this.client) {
             // Typescript is not happy because since thinks this.client might have changed to undefined because the function is asynchronous.
             return;
           }
-          this.#setTransitiveState();
-          if (this.client.isEligibleForTouch()) {
-            const absoluteRedirectUrl = new URL(redirectUrl, window.location.href);
-            await this.navigate(this.buildUrlWithAuth(this.client.buildTouchUrl({ redirectUrl: absoluteRedirectUrl })));
-          } else {
+
+          if (sessionIsPending) {
+            this.#setTransitiveState();
+          }
+
+          if (setActiveNavigate) {
+            await setActiveNavigate();
+            return;
+          }
+
+          const taskUrl =
+            sessionIsPending && this.session?.currentTask && this.#options.taskUrls?.[this.session?.currentTask.key];
+          if (taskUrl) {
+            await this.navigate(taskUrl);
+            return;
+          }
+
+          if (!redirectUrl) {
+            return;
+          }
+
+          if (!this.client.isEligibleForTouch()) {
             await this.navigate(redirectUrl);
+            return;
           }
+
+          const absoluteRedirectUrl = new URL(redirectUrl, window.location.href);
+          const redirectUrlWithAuth = this.buildUrlWithAuth(
+            this.client.buildTouchUrl({ redirectUrl: absoluteRedirectUrl }),
+          );
+          await this.navigate(redirectUrlWithAuth);
         });
       }
 
@@ -1332,54 +1348,14 @@ export class Clerk implements ClerkInterface {
 
       this.#setAccessors(newSession);
       this.#emit();
-      await onAfterSetActive();
-    } finally {
-      this.__internal_setActiveInProgress = false;
-    }
-  };
-
-  #handlePendingSession = async (session: PendingSessionResource, onPendingSession?: OnPendingSessionFn) => {
-    if (!this.environment) {
-      return;
-    }
-
-    let currentSession: SignedInSessionResource | null = session;
-
-    if (inActiveBrowserTab() || !this.#options.standardBrowser) {
-      // Handles multi-session scenario when switching between `pending` sessions
-      // and satisfying task requirements such as organization selection
-      await this.#touchCurrentSession(session);
-      currentSession = this.#getSessionFromClient(session.id) ?? session;
-    }
-
-    // Syncs __session and __client_uat, in case the `pending` session
-    // has expired, it needs to trigger a sign-out
-    const token = await session.getToken();
-    if (!token) {
-      eventBus.emit(events.TokenUpdate, { token: null });
-    }
 
-    if (currentSession.status === 'pending') {
-      const tracker = createBeforeUnloadTracker(this.#options.standardBrowser);
-
-      const onPendingSessionHook = onPendingSession ?? this.#options['onPendingSession'];
-      const taskUrls = this.#options['taskUrls'];
-
-      await tracker.track(async () => {
-        if (onPendingSessionHook) {
-          await onPendingSessionHook({ session: currentSession });
-        } else if (taskUrls) {
-          await this.navigate(taskUrls[session.currentTask.key]);
-        }
-      });
-
-      if (tracker.isUnloading()) {
-        return;
+      // Do not revalidate server cache for pending sessions to avoid unmount of `SignIn/SignUp` AIOs when navigating to task
+      if (!sessionIsPending) {
+        await onAfterSetActive();
       }
+    } finally {
+      this.__internal_setActiveInProgress = false;
     }
-
-    this.#setAccessors(currentSession);
-    this.#emit();
   };
 
   public addListener = (listener: ListenerCallback): UnsubscribeCallback => {
@@ -2370,8 +2346,8 @@ export class Clerk implements ClerkInterface {
     this.#authService = await AuthCookieService.create(
       this,
       this.#fapiClient,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.#instanceType!,
+
+      this.#instanceType,
       this.#publicEventBus,
     );
 

packages/types/src/clerk.ts

@@ -1069,11 +1069,6 @@ export type ClerkOptions = ClerkOptionsNavigation &
      * @default undefined - Uses Clerk's default task flow URLs
      */
     taskUrls?: Record<SessionTask['key'], string>;
-
-    /**
-     * Event handler called when a session transitions to `pending` status after successful sign-in.
-     */
-    onPendingSession?: OnPendingSessionFn;
   };
 
 export interface NavigateOptions {
@@ -1200,9 +1195,9 @@ export type SetActiveParams = {
   redirectUrl?: string;
 
   /**
-   * Event handler called when a session transitions to `pending` status after successful sign-in.
+   * TODO
    */
-  onPendingSession?: OnPendingSessionFn;
+  navigate?: SetActiveNavigate;
 };
 
 /**