fix(ui): route an OAuth transfer to the sign-up continue step over a native transport

Author: jeremy-clerk

.changeset/signin-transport-transfer-next-step.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Route an OAuth transfer to the sign-up continue step when sign-in uses a native OAuth transport. The callback previously navigated with hash-style URLs (`<sign-up-url>#/continue`) that the in-place component router cannot resolve, landing transferred sign-ups on the start card where submitting created a fresh sign-up without the verified external account.

packages/ui/src/components/SignIn/__tests__/buildOAuthCallbackParams.test.ts

@@ -55,22 +55,57 @@ describe('buildSignInOAuthTransportCallbackParams', () => {
       unsafeMetadata: { a: 1 },
     } as any;
 
+    const origin = window.location.origin;
+
     expect(buildSignInOAuthTransportCallbackParams(ctx)).toEqual({
       signUpUrl: '/sign-up',
       signInUrl: '/sign-in',
       signInForceRedirectUrl: '/after-in',
       signUpForceRedirectUrl: '/after-up',
-      continueSignUpUrl: '/continue',
       transferable: true,
       firstFactorUrl: 'factor-one',
       secondFactorUrl: 'factor-two',
       resetPasswordUrl: 'reset-password',
-      // Relative to the SignIn start route; the sign-up gate URL stays absolute (combined-aware).
       signInProtectCheckUrl: 'protect-check',
-      signUpProtectCheckUrl: '/sign-up-protect-check',
+      // Sign-up steps are path routes on the sign-up component; hash-style URLs would lose their
+      // hash in the virtual router and land a transferred sign-up on the start card.
+      continueSignUpUrl: `${origin}/sign-up/continue`,
+      verifyEmailAddressUrl: `${origin}/sign-up/verify-email-address`,
+      verifyPhoneNumberUrl: `${origin}/sign-up/verify-phone-number`,
+      signUpProtectCheckUrl: `${origin}/sign-up/protect-check`,
       unsafeMetadata: { a: 1 },
     });
   });
+
+  it('targets the virtual sign-up routes for modal transport callbacks', () => {
+    const ctx = {
+      signUpUrl: '/CLERK-ROUTER/VIRTUAL/sign-up',
+      signInUrl: '/CLERK-ROUTER/VIRTUAL/sign-in',
+    } as any;
+
+    const params = buildSignInOAuthTransportCallbackParams(ctx);
+    const origin = window.location.origin;
+
+    expect(params.continueSignUpUrl).toBe(`${origin}/CLERK-ROUTER/VIRTUAL/sign-up/continue`);
+    expect(params.verifyEmailAddressUrl).toBe(`${origin}/CLERK-ROUTER/VIRTUAL/sign-up/verify-email-address`);
+    expect(params.verifyPhoneNumberUrl).toBe(`${origin}/CLERK-ROUTER/VIRTUAL/sign-up/verify-phone-number`);
+    expect(params.signUpProtectCheckUrl).toBe(`${origin}/CLERK-ROUTER/VIRTUAL/sign-up/protect-check`);
+  });
+
+  it('targets the embedded create subtree in the combined flow', () => {
+    const ctx = {
+      signUpUrl: '/sign-in#/create',
+      signInUrl: '/sign-in',
+      isCombinedFlow: true,
+    } as any;
+
+    const params = buildSignInOAuthTransportCallbackParams(ctx);
+
+    expect(params.continueSignUpUrl).toBe('create/continue');
+    expect(params.verifyEmailAddressUrl).toBe('create/verify-email-address');
+    expect(params.verifyPhoneNumberUrl).toBe('create/verify-phone-number');
+    expect(params.signUpProtectCheckUrl).toBe('create/protect-check');
+  });
 });
 
 describe('buildSignUpOAuthCallbackParams', () => {

packages/ui/src/components/SignIn/buildOAuthCallbackParams.ts

@@ -1,3 +1,4 @@
+import { buildURL, trimTrailingSlash } from '@clerk/shared/internal/clerk-js/url';
 import type { HandleOAuthCallbackParams } from '@clerk/shared/types';
 
 import type { SignInContextType } from '../../contexts/components/SignIn';
@@ -23,12 +24,27 @@ export function buildSignInOAuthCallbackParams(ctx: SignInContextType): HandleOA
 }
 
 export function buildSignInOAuthTransportCallbackParams(ctx: SignInContextType): HandleOAuthCallbackParams {
+  // Path form, not `#/step`: the in-place component router matches on pathname only and would drop the hash.
+  const signUpStepUrl = (step: string): string => {
+    if (ctx.isCombinedFlow) {
+      return `create/${step}`;
+    }
+    const url = buildURL({ base: ctx.signUpUrl }, { stringify: false });
+    url.pathname = `${trimTrailingSlash(url.pathname)}/${step}`;
+    url.hash = '';
+    return url.href;
+  };
+
   return {
     ...buildSignInOAuthCallbackParams(ctx),
     firstFactorUrl: 'factor-one',
     secondFactorUrl: 'factor-two',
     resetPasswordUrl: 'reset-password',
     signInProtectCheckUrl: 'protect-check',
+    continueSignUpUrl: signUpStepUrl('continue'),
+    verifyEmailAddressUrl: signUpStepUrl('verify-email-address'),
+    verifyPhoneNumberUrl: signUpStepUrl('verify-phone-number'),
+    signUpProtectCheckUrl: signUpStepUrl('protect-check'),
   };
 }