fix: use username if present as Username parameter for signup (#6766)

Author: Simone319

.changeset/tiny-hounds-start.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': minor
+---
+
+fix: use username if present as Username parameter for signup

packages/ui/src/machines/authenticator/__tests__/utils.test.ts

@@ -83,4 +83,43 @@ describe('getUsernameSignUp', () => {
     const expected = '+268002428976';
     expect(output).toEqual(expected);
   });
+
+  it('returns sanitized phone when only phone_number is a login mechanism (phone as username mode)', () => {
+    const formValues = {
+      phone_number: '8002428976',
+      country_code: '+1',
+      password: 'P@ssw0rd',
+      confirm_password: 'P@ssw0rd',
+    };
+
+    const output = getUsernameSignUp({
+      formValues,
+      loginMechanisms: ['phone_number'] as LoginMechanism[],
+    } as unknown as AuthActorContext);
+
+    // When phone_number is the only mechanism (not alias mode), use it as username
+    expect(output).toEqual('+18002428976');
+  });
+
+  it('returns username when username, email, and phone_number are all login mechanisms regardless order', () => {
+    const formValues = {
+      username: 'testuser',
+      email: '[email protected]',
+      phone_number: '8002428976',
+      country_code: '+1',
+      password: 'P@ssw0rd',
+      confirm_password: 'P@ssw0rd',
+    };
+
+    const output = getUsernameSignUp({
+      formValues,
+      loginMechanisms: [
+        'email',
+        'username',
+        'phone_number',
+      ] as LoginMechanism[],
+    } as unknown as AuthActorContext);
+
+    expect(output).toEqual('testuser');
+  });
 });

packages/ui/src/machines/authenticator/utils.ts

@@ -86,12 +86,20 @@ export const getUsernameSignUp = ({
   formValues,
   loginMechanisms,
 }: AuthActorContext) => {
+  // When 'username' is in loginMechanisms, always use the username field for the Username parameter.
+  // This handles both username-only mode and alias mode (username + email/phone as sign-in options).
+  // See: https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html#user-pool-settings-aliases
+  if (loginMechanisms.includes('username')) {
+    return formValues.username;
+  }
+
   const loginMechanism = loginMechanisms[0];
 
   if (loginMechanism === 'phone_number') {
     const { country_code, phone_number } = formValues;
     return sanitizePhoneNumber(country_code, phone_number);
   }
 
+  // Otherwise, use the primary login mechanism (email as username)
   return formValues[loginMechanism];
 };