Trigger navigation on client-piggybacking

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

@@ -891,11 +891,9 @@ export class Clerk implements ClerkInterface {
 
     let newSession = session === undefined ? this.session : session;
 
-    // todo - handle the transition on token poller
-    const hasNewTask = newSession && !!newSession?.tasks;
-    if (hasNewTask && newSession) {
-      eventBus.dispatch(events.NewSessionTask, newSession);
-    }
+    const isResolvingSessionTasks =
+      !!newSession?.currentTask ||
+      window.location.href.includes(this.internal__buildTasksUrl({ task: newSession?.currentTask }));
 
     // At this point, the `session` variable should contain either an `SignedInSessionResource`
     // ,`null` or `undefined`.
@@ -954,7 +952,7 @@ export class Clerk implements ClerkInterface {
       beforeUnloadTracker?.stopTracking();
     }
 
-    if (redirectUrl && !beforeEmit && !hasNewTask) {
+    if (redirectUrl && !beforeEmit && !isResolvingSessionTasks) {
       beforeUnloadTracker?.startTracking();
       this.#setTransitiveState();
 
@@ -1012,6 +1010,8 @@ export class Clerk implements ClerkInterface {
       return;
     }
 
+    console.log({ to });
+
     /**
      * Trigger all navigation listeners. In order for modal UI components to close.
      */
@@ -1122,19 +1122,18 @@ export class Clerk implements ClerkInterface {
     return buildURL({ base: waitlistUrl, hashSearchParams: [initValues] }, { stringify: true });
   }
 
-  // todo(fix sign up navigation)
-  public buildTasksUrl({ task, origin }: RedirectToTasksUrlOptions): string {
+  public internal__buildTasksUrl({ task, origin }: RedirectToTasksUrlOptions): string {
     if (!task) {
       return '';
     }
 
     const signUpUrl = this.#options.signUpUrl || this.environment?.displayConfig.signUpUrl;
-    const referrerIsSignUpUrl = signUpUrl && window.location.href.startsWith(signUpUrl);
+    const referrerIsSignUpUrl = signUpUrl && window.location.href.includes(signUpUrl);
 
     const originWithDefault = origin ?? (referrerIsSignUpUrl ? 'SignUp' : 'SignIn');
     const defaultUrlByOrigin = originWithDefault === 'SignIn' ? this.#options.signInUrl : this.#options.signUpUrl;
 
-    return buildURL({ base: `${defaultUrlByOrigin}/${sessionTaskRoutePaths[task.key]}` }, { stringify: true });
+    return buildURL({ base: defaultUrlByOrigin, hashPath: sessionTaskRoutePaths[task.key] }, { stringify: true });
   }
 
   public buildAfterMultiSessionSingleSignOutUrl(): string {
@@ -1260,7 +1259,7 @@ export class Clerk implements ClerkInterface {
 
   public redirectToTasks = async (options: RedirectToTasksUrlOptions): Promise<unknown> => {
     if (inBrowser()) {
-      return this.navigate(this.buildTasksUrl(options));
+      return this.navigate(this.internal__buildTasksUrl(options));
     }
     return;
   };
@@ -1758,11 +1757,21 @@ export class Clerk implements ClerkInterface {
     if (this.session) {
       const session = this.#getSessionFromClient(this.session.id);
 
+      const hasResolvedPreviousTask = this.session.currentTask != session?.currentTask;
+
       // Note: this might set this.session to null
       this.#setAccessors(session);
 
       // A client response contains its associated sessions, along with a fresh token, so we dispatch a token update event.
       eventBus.dispatch(events.TokenUpdate, { token: this.session?.lastActiveToken });
+
+      // Any FAPI call could lead to a task being unsatisfied such as app owners
+      // actions therefore the check must be done on client piggybacking
+      if (session?.currentTask) {
+        eventBus.dispatch(events.NewSessionTask, session);
+      } else if (session && hasResolvedPreviousTask) {
+        eventBus.dispatch(events.ResolvedSessionTask, session);
+      }
     }
 
     this.#emit();
@@ -2108,9 +2117,14 @@ export class Clerk implements ClerkInterface {
     });
 
     eventBus.on(events.NewSessionTask, session => {
-      console.log('new task 🍪');
+      console.log('new session task');
       void this.redirectToTasks({ task: session.currentTask });
     });
+
+    eventBus.on(events.ResolvedSessionTask, () => {
+      console.log('resolved task');
+      void this.redirectToAfterSignIn();
+    });
   };
 
   // TODO: Be more conservative about touches. Throttle, don't touch when only one user, etc

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

@@ -4,6 +4,7 @@ export const events = {
   TokenUpdate: 'token:update',
   UserSignOut: 'user:signOut',
   NewSessionTask: 'sessionTask:new',
+  ResolvedSessionTask: 'sessionTask:resolve',
 } as const;
 
 type ClerkEvent = (typeof events)[keyof typeof events];
@@ -15,6 +16,7 @@ type EventPayload = {
   [events.TokenUpdate]: TokenUpdatePayload;
   [events.UserSignOut]: null;
   [events.NewSessionTask]: SignedInSessionResource;
+  [events.ResolvedSessionTask]: SignedInSessionResource;
 };
 
 const createEventBus = () => {

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -63,7 +63,7 @@ export const withRedirectToAfterSignIn = <P extends AvailableComponentProps>(Com
       isSignedInAndSingleSessionModeEnabled,
       ({ clerk }) =>
         clerk.session?.currentTask
-          ? clerk.buildTasksUrl({ task: clerk.session?.currentTask, origin: 'SignIn' })
+          ? clerk.internal__buildTasksUrl({ task: clerk.session?.currentTask, origin: 'SignIn' })
           : signInCtx.afterSignInUrl || clerk.buildAfterSignInUrl(),
       warnings.cannotRenderSignInComponentWhenSessionExists,
     )(props);
@@ -85,7 +85,7 @@ export const withRedirectToAfterSignUp = <P extends AvailableComponentProps>(Com
       isSignedInAndSingleSessionModeEnabled,
       ({ clerk }) =>
         clerk.session?.currentTask
-          ? clerk.buildTasksUrl({ task: clerk.session?.currentTask, origin: 'SignUp' })
+          ? clerk.internal__buildTasksUrl({ task: clerk.session?.currentTask, origin: 'SignUp' })
           : signUpCtx.afterSignInUrl || clerk.buildAfterSignInUrl(),
       warnings.cannotRenderSignUpComponentWhenSessionExists,
     )(props);

packages/clerk-js/src/ui/router/BaseRouter.tsx

@@ -116,6 +116,7 @@ export const BaseRouter = ({
 
       toURL.search = stringifyQueryParams(toQueryParams);
     }
+    console.log({ toURL });
     const internalNavRes = await internalNavigate(toURL, { metadata: { navigationType: 'internal' } });
     setRouteParts({ path: toURL.pathname, queryString: toURL.search });
     return internalNavRes;

packages/react/src/isomorphicClerk.ts

@@ -420,12 +420,12 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  buildTasksUrl = (opts: RedirectToTasksUrlOptions): string | void => {
-    const callback = () => this.clerkjs?.buildTasksUrl(opts) || '';
+  internal__buildTasksUrl = (opts: RedirectToTasksUrlOptions): string | void => {
+    const callback = () => this.clerkjs?.internal__buildTasksUrl(opts) || '';
     if (this.clerkjs && this.#loaded) {
       return callback();
     } else {
-      this.premountMethodCalls.set('buildTasksUrl', callback);
+      this.premountMethodCalls.set('internal__buildTasksUrl', callback);
     }
   };
 

packages/types/src/clerk.ts

@@ -477,9 +477,9 @@ export interface Clerk {
   buildWaitlistUrl(opts?: { initialValues?: Record<string, string> }): string;
 
   /**
-   * Returns the url where a custom task page is rendered.
+   * Returns the url where a task page is rendered.
    */
-  buildTasksUrl(options: { task?: SessionTask; origin?: 'SignIn' | 'SignUp' }): string;
+  internal__buildTasksUrl(options: { task?: SessionTask; origin?: 'SignIn' | 'SignUp' }): string;
 
   /**
    *