Use navigate for setActive on combined flow

Author: LauraBeatris

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

@@ -473,6 +473,7 @@ function SignInStartInternal(): JSX.Element {
         signUpMode: userSettings.signUp.mode,
         redirectUrl,
         redirectUrlComplete,
+        navigateOnSetActive,
         passwordEnabled: userSettings.attributes.password?.required ?? false,
         alternativePhoneCodeChannel:
           alternativePhoneCodeProvider?.channel ||

packages/clerk-js/src/ui/components/SignIn/__tests__/handleCombinedFlowTransfer.test.ts

@@ -40,6 +40,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
+      navigateOnSetActive: jest.fn(),
     });
 
     expect(mockCompleteSignUpFlow).toHaveBeenCalled();
@@ -64,6 +65,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
+      navigateOnSetActive: jest.fn(),
     });
 
     expect(mockNavigate).not.toHaveBeenCalled();
@@ -90,6 +92,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: true,
+      navigateOnSetActive: jest.fn(),
     });
 
     expect(mockNavigate).toHaveBeenCalled();
@@ -116,6 +119,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
+      navigateOnSetActive: jest.fn(),
     });
 
     expect(mockNavigate).toHaveBeenCalled();
@@ -142,6 +146,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
+      navigateOnSetActive: jest.fn(),
     });
 
     expect(mockNavigate).toHaveBeenCalled();

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

@@ -1,4 +1,11 @@
-import type { LoadedClerk, PhoneCodeChannel, PhoneCodeStrategy, SignUpModes, SignUpResource } from '@clerk/types';
+import type {
+  LoadedClerk,
+  PhoneCodeChannel,
+  PhoneCodeStrategy,
+  SessionResource,
+  SignUpModes,
+  SignUpResource,
+} from '@clerk/types';
 
 import { SIGN_UP_MODES } from '../../../core/constants';
 import type { RouteContextValue } from '../../router/RouteContext';
@@ -17,6 +24,7 @@ type HandleCombinedFlowTransferProps = {
   redirectUrlComplete?: string;
   passwordEnabled: boolean;
   alternativePhoneCodeChannel?: PhoneCodeChannel | null;
+  navigateOnSetActive: (opts: { session: SessionResource; redirectUrl: string }) => Promise<unknown>;
 };
 
 /**
@@ -35,6 +43,7 @@ export function handleCombinedFlowTransfer({
   redirectUrl,
   redirectUrlComplete,
   passwordEnabled,
+  navigateOnSetActive,
   alternativePhoneCodeChannel,
 }: HandleCombinedFlowTransferProps): Promise<unknown> | void {
   if (signUpMode === SIGN_UP_MODES.WAITLIST) {
@@ -83,7 +92,13 @@ export function handleCombinedFlowTransfer({
           signUp: res,
           verifyEmailPath: 'create/verify-email-address',
           verifyPhonePath: 'create/verify-phone-number',
-          handleComplete: () => clerk.setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl }),
+          handleComplete: () =>
+            clerk.setActive({
+              session: res.createdSessionId,
+              navigate: async ({ session }) => {
+                await navigateOnSetActive({ session, redirectUrl: afterSignUpUrl });
+              },
+            }),
           navigate,
           redirectUrl,
           redirectUrlComplete,