feat(clerk-js): Support collecting optional fields in combined flow (#…

…4795)

.changeset/twelve-goats-shake.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Redirect to sign up start step within combined flow when there are optional fields.

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

@@ -1,4 +1,4 @@
-import type { LoadedClerk, SignUpModes } from '@clerk/types';
+import type { LoadedClerk, SignUpModes, SignUpResource } from '@clerk/types';
 
 import { SIGN_UP_MODES } from '../../../core/constants';
 import { completeSignUpFlow } from '../SignUp/util';
@@ -51,9 +51,12 @@ export function handleCombinedFlowTransfer({
     paramsToForward.set('__clerk_ticket', organizationTicket);
   }
 
-  // Attempt to transfer directly to sign up verification if email or phone was used. The signUp.create() call will
+  // Attempt to transfer directly to sign up verification if email or phone was used and there are no optional fields. The signUp.create() call will
   // inform us if the instance is eligible for moving directly to verification.
-  if (identifierAttribute === 'emailAddress' || identifierAttribute === 'phoneNumber') {
+  if (
+    (!hasOptionalFields(clerk.client.signUp) && identifierAttribute === 'emailAddress') ||
+    identifierAttribute === 'phoneNumber'
+  ) {
     return clerk.client.signUp
       .create({
         [identifierAttribute]: identifierValue,
@@ -74,3 +77,15 @@ export function handleCombinedFlowTransfer({
 
   return navigate(`create?${paramsToForward.toString()}`);
 }
+
+function hasOptionalFields(signUp: SignUpResource) {
+  const filteredFields = signUp.optionalFields.filter(
+    field =>
+      !field.startsWith('oauth_') &&
+      !field.startsWith('web3_') &&
+      field !== 'password' &&
+      field !== 'enterprise_sso' &&
+      field !== 'saml',
+  );
+  return filteredFields.length > 0;
+}