Trigger internal navigation with event bus

The following changes leverage `eventBus` to trigger a internal component navigation from a `Clerk` method, in this case, `setActive`

It detects if there are listeners for the `InternalTaskNavigate` event, and if so execute it, otherwise fallbacks to `Clerk.navigate` for custom flows

Author: LauraBeatris

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

@@ -927,6 +927,16 @@ export class Clerk implements ClerkInterface {
     }
 
     const hasSessionTaskToResolve = !!newSession?.tasks?.length;
+    if (hasSessionTaskToResolve && this.#options.standardBrowser) {
+      const hasEventHandler = eventBus.has(events.InternalComponentNavigate);
+      if (hasEventHandler) {
+        await new Promise<void>(resolveNavigation =>
+          eventBus.dispatch(events.InternalComponentNavigate, resolveNavigation),
+        );
+      } else {
+        await this.navigate(this.internal__buildSessionTaskUrl());
+      }
+    }
 
     //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.
@@ -940,15 +950,14 @@ export class Clerk implements ClerkInterface {
       );
       beforeUnloadTracker?.startTracking();
 
-      // Do not unmount SignIn/SignUp for in-component navigation on new session tasks
-      if (!hasSessionTaskToResolve) {
-        this.#setTransitiveState();
-      }
+      this.#setTransitiveState();
 
       await beforeEmit(newSession);
       beforeUnloadTracker?.stopTracking();
     }
 
+    // `hasSessionTaskToResolve` needs to be checked in order to override
+    // redirects to `afterSignInUrl/afterSignUpUrl` when there are pending tasks
     if (redirectUrl && !beforeEmit && !hasSessionTaskToResolve) {
       beforeUnloadTracker?.startTracking();
       this.#setTransitiveState();
@@ -1148,21 +1157,22 @@ export class Clerk implements ClerkInterface {
     return this.buildUrlWithAuth(this.environment.displayConfig.organizationProfileUrl);
   }
 
-  public buildSessionTaskUrl(): string {
+  // pass this to the session object as internal
+  public internal__buildSessionTaskUrl(): string {
     const [currentTask] = this.session?.tasks ?? [];
 
     if (!currentTask || !this.environment || !this.environment.displayConfig) {
       return '';
     }
 
-    // TODO - Make it type safe and abstracted
-    const mapTaskRoutePathFromKey = {
-      orgs: '/add-organization',
-    };
-
     const signInUrl = this.#options['signInUrl'] || this.environment.displayConfig.signInUrl;
-    // TODO - Make it path dynamic by current session task
-    return buildURL({ base: `${signInUrl}`, hashPath: mapTaskRoutePathFromKey[currentTask.key] }, { stringify: true });
+    const signUpUrl = this.#options['signUpUrl'] || this.environment.displayConfig.signUpUrl;
+    const isReferrerSignUpUrl = window.location.href.startsWith(signUpUrl);
+
+    return buildURL(
+      { base: isReferrerSignUpUrl ? signUpUrl : signInUrl, hashPath: '/add-organization' },
+      { stringify: true },
+    );
   }
 
   #redirectToSatellite = async (): Promise<unknown> => {

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

@@ -3,6 +3,7 @@ import type { TokenResource } from '@clerk/types';
 export const events = {
   TokenUpdate: 'token:update',
   UserSignOut: 'user:signOut',
+  InternalComponentNavigate: 'task:internalNavigate',
 } as const;
 
 type ClerkEvent = (typeof events)[keyof typeof events];
@@ -13,6 +14,7 @@ type TokenUpdatePayload = { token: TokenResource | null };
 type EventPayload = {
   [events.TokenUpdate]: TokenUpdatePayload;
   [events.UserSignOut]: null;
+  [events.InternalComponentNavigate]: () => void;
 };
 
 const createEventBus = () => {
@@ -45,7 +47,11 @@ const createEventBus = () => {
     eventToHandlersMap.set(event, []);
   };
 
-  return { on, dispatch, off };
+  const has = <E extends ClerkEvent>(event: E) => {
+    return !!eventToHandlersMap.has(event);
+  };
+
+  return { on, dispatch, off, has };
 };
 
 export const eventBus = createEventBus();

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

@@ -29,8 +29,10 @@ export function withRedirect<P extends AvailableComponentProps>(
     const options = useOptions();
 
     const hasTaskAndSingleSessionMode = !!clerk.session?.tasks && environment?.authConfig.singleSessionMode;
-    const shouldRedirect = hasTaskAndSingleSessionMode || condition(clerk, environment, options);
-    const redirectUrlWithDefault = hasTaskAndSingleSessionMode ? () => clerk.buildSessionTaskUrl() : redirectUrl;
+    const shouldRedirect = hasTaskAndSingleSessionMode ? false : condition(clerk, environment, options);
+    const redirectUrlWithDefault = hasTaskAndSingleSessionMode
+      ? () => clerk.internal__buildSessionTaskUrl()
+      : redirectUrl;
 
     React.useEffect(() => {
       if (shouldRedirect) {

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -77,6 +77,10 @@ function SignInRoutes(): JSX.Element {
             redirectUrl='../factor-two'
           />
         </Route>
+        {/* Make it type safe based on the possible route paths / introduce abstraction */}
+        <Route path='add-organization'>
+          <Task />
+        </Route>
         {signInContext.isCombinedFlow && (
           <Route path='create'>
             <Route
@@ -133,13 +137,6 @@ function SignInRoutes(): JSX.Element {
             </Route>
           </Route>
         )}
-        {/* Make it type safe based on the possible route paths / introduce abstraction */}
-        <Route
-          path='add-organization'
-          canActivate={clerk => !!clerk.session?.tasks?.length}
-        >
-          <Task />
-        </Route>
         <Route index>
           <SignInStart />
         </Route>

packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx

@@ -68,11 +68,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
       .then(res => {
         switch (res.status) {
           case 'complete':
-            return setActive({
-              session: res.createdSessionId,
-              redirectUrl: afterSignInUrl,
-              beforeEmit: () => navigate('../add-organization'),
-            });
+            return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl });
           case 'needs_second_factor':
             return navigate('../factor-two');
           default:

packages/clerk-js/src/ui/contexts/components/SignIn.ts

@@ -1,8 +1,9 @@
 import { useClerk } from '@clerk/shared/react';
 import { isAbsoluteUrl } from '@clerk/shared/url';
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useEffect, useMemo } from 'react';
 
 import { SIGN_IN_INITIAL_VALUE_KEYS } from '../../../core/constants';
+import { eventBus, events } from '../../../core/events';
 import { buildURL } from '../../../utils';
 import { RedirectUrls } from '../../../utils/redirectUrls';
 import { buildRedirectUrl, MAGIC_LINK_VERIFY_PATH_ROUTE, SSO_CALLBACK_PATH_ROUTE } from '../../common/redirects';
@@ -111,6 +112,22 @@ export const useSignInContext = (): SignInContextType => {
 
   const signUpContinueUrl = buildURL({ base: signUpUrl, hashPath: '/continue' }, { stringify: true });
 
+  useEffect(() => {
+    eventBus.on(events.InternalComponentNavigate, async resolveNavigation => {
+      const tasksUrl = buildRedirectUrl({
+        routing: ctx.routing,
+        baseUrl: signInUrl,
+        path: ctx.path,
+        endpoint: '/add-organization',
+        authQueryString: null,
+      });
+
+      await navigate(tasksUrl);
+
+      resolveNavigation();
+    });
+  }, []);
+
   return {
     ...(ctx as SignInCtx),
     transferable: ctx.transferable ?? true,

packages/types/src/clerk.ts

@@ -476,7 +476,7 @@ export interface Clerk {
    */
   buildWaitlistUrl(opts?: { initialValues?: Record<string, string> }): string;
 
-  buildSessionTaskUrl(): string;
+  internal__buildSessionTaskUrl(): string;
 
   /**
    *