fix(clerk-js): Require email or phone when password field is visible

.changeset/fair-olives-wish.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bugfix: Fixed incorrect field validation when using password authentication with email or phone number during sign-up. Optional email and phone fields now correctly display their requirement status.

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.spec.tsx

@@ -88,14 +88,20 @@ describe('SignUpStart', () => {
       screen.getByText('Password');
     });
 
-    it('enables optional email', async () => {
+    it('should keep email optional when phone is primary with password', async () => {
       const { wrapper } = await createFixtures(f => {
         f.withEmailAddress({ required: false });
         f.withPhoneNumber({ required: true });
         f.withPassword({ required: true });
       });
       render(<SignUpStart />, { wrapper });
-      expect(screen.getByText('Email address').nextElementSibling?.textContent).toBe('Optional');
+
+      const emailAddress = screen.getByLabelText('Email address', { selector: 'input' });
+      expect(emailAddress.ariaRequired).toBe('false');
+      expect(screen.getByText('Optional')).toBeInTheDocument();
+
+      const phoneInput = screen.getByLabelText('Phone number', { selector: 'input' });
+      expect(phoneInput.ariaRequired).toBe('true');
     });
 
     it('enables optional phone number', async () => {

packages/clerk-js/src/ui/components/SignUp/__tests__/signUpFormHelpers.test.ts

@@ -536,6 +536,118 @@ describe('determineActiveFields()', () => {
 
       expect(res).toEqual(result);
     });
+
+    describe('email or phone requirements with password', () => {
+      type Scenario = [string, any, any];
+      const scenaria: Scenario[] = [
+        [
+          'email optional, phone primary required with password',
+          {
+            ...mockDefaultAttributesProgressive,
+            email_address: {
+              enabled: true,
+              required: false,
+              used_for_first_factor: true,
+            },
+            phone_number: {
+              enabled: true,
+              required: true,
+              used_for_first_factor: true,
+            },
+            password: {
+              enabled: true,
+              required: true,
+            },
+          },
+          {
+            emailAddress: {
+              required: false,
+              disabled: false,
+            },
+            phoneNumber: {
+              required: true,
+            },
+            password: {
+              required: true,
+            },
+          },
+        ],
+        [
+          'phone optional, email required with password',
+          {
+            ...mockDefaultAttributesProgressive,
+            email_address: {
+              enabled: true,
+              required: true,
+              used_for_first_factor: true,
+            },
+            phone_number: {
+              enabled: true,
+              required: false,
+              used_for_first_factor: true,
+            },
+            password: {
+              enabled: true,
+              required: true,
+            },
+          },
+          {
+            emailAddress: {
+              required: true,
+              disabled: false,
+            },
+            phoneNumber: {
+              required: false,
+            },
+            password: {
+              required: true,
+            },
+          },
+        ],
+        [
+          'email and phone required with password',
+          {
+            ...mockDefaultAttributesProgressive,
+            email_address: {
+              enabled: true,
+              required: true,
+              used_for_first_factor: true,
+            },
+            phone_number: {
+              enabled: true,
+              required: true,
+              used_for_first_factor: true,
+            },
+            password: {
+              enabled: true,
+              required: true,
+            },
+          },
+          {
+            emailAddress: {
+              required: true,
+              disabled: false,
+            },
+            phoneNumber: {
+              required: true,
+            },
+            password: {
+              required: true,
+            },
+          },
+        ],
+      ];
+
+      it.each(scenaria)('%s', (___, attributes, result) => {
+        const actualResult = determineActiveFields({
+          attributes: attributes,
+          activeCommIdentifierType: getInitialActiveIdentifier(attributes, isProgressiveSignUp),
+          isProgressiveSignUp,
+        });
+
+        expect(actualResult).toEqual(result);
+      });
+    });
   });
 });
 

packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts

@@ -178,6 +178,10 @@ function getEmailAddressField({
   isProgressiveSignUp,
 }: FieldDeterminationProps): Field | undefined {
   if (isProgressiveSignUp) {
+    const isPasswordVisible = Boolean(attributes.password?.enabled && attributes.password.required);
+    const isPhoneRequired = Boolean(attributes.phone_number?.enabled && attributes.phone_number?.required);
+    const isEmailActive = activeCommIdentifierType === 'emailAddress';
+
     // If there is no ticket, or there is a ticket along with an email, and email address is enabled,
     // we have to show it in the SignUp form
     const show = (!hasTicket || (hasTicket && hasEmail)) && attributes.email_address?.enabled;
@@ -192,8 +196,11 @@ function getEmailAddressField({
       return;
     }
 
+    const shouldBeRequired =
+      Boolean(attributes.email_address?.required) || (isPasswordVisible && isEmailActive && !isPhoneRequired);
+
     return {
-      required: Boolean(attributes.email_address?.required),
+      required: shouldBeRequired,
       disabled: !!hasTicket && !!hasEmail,
     };
   }
@@ -221,6 +228,10 @@ function getPhoneNumberField({
   isProgressiveSignUp,
 }: FieldDeterminationProps): Field | undefined {
   if (isProgressiveSignUp) {
+    const isPasswordVisible = Boolean(attributes.password?.enabled && attributes.password.required);
+    const isEmailRequired = Boolean(attributes.email_address?.enabled && attributes.email_address?.required);
+    const isPhoneActive = activeCommIdentifierType === 'phoneNumber';
+
     // If there is no ticket and phone number is enabled, we have to show it in the SignUp form
     const show = attributes.phone_number?.enabled;
 
@@ -234,8 +245,11 @@ function getPhoneNumberField({
       return;
     }
 
+    const shouldBeRequired =
+      Boolean(attributes.phone_number?.required) || (isPasswordVisible && isPhoneActive && !isEmailRequired);
+
     return {
-      required: Boolean(attributes.phone_number?.required),
+      required: shouldBeRequired,
     };
   }