AmplifyConfirmSignUp usernameAlias="phone_number" not working

[adampblack]

Using the AmplifyConfirmSignUp from '@aws-amplify/ui-react'

I have set:
usernameAlias="phone_number"

Despite this setting when I try to verify the code it says username cannot be empty.

[adampblack]

Has anyone had a go at replicating issue with usernameAlias not working:

<AmplifyConfirmSignUp
headerText='Verify your mobile phone number'
slot="confirm-sign-up"
style={{
alignSelf: 'flex-start',
}}
submitButtonText='Confirm'
usernameAlias="phone_number"
/>

[humblepie]

@adampblack

This doesn't work for usernameAlias="email" either.
Appears that the error message will always specify username.

[adampblack]

This issue is still not fixed.

I did a yarn upgrade this morning on the ReactJS app I am working on - so all the libraries should be up-to-date.

I completed the signup and when it goes to the AmplifyConfirmSignUp component it says:
Username cannot be empty (as above with the original message)

Even though I have set the form field:
type: 'phone_number'

and

usernameAlias="phone_number"

@iartemiev any update one when this might be fixed?

[adampblack]

Should also mention this is occurring on the AmplifyForgotPassword component also

[wlee221]

Hi, I'm sorry about the delay here. I'm looking into this now.

[wlee221]

I've done some experimentation with latest @aws-amplify/ui-react.

1. Using AmplifyAuthenticator without overriding AmplifyConfirmSignUp: After you confirm the sign up, there's a flash of Phone number cannot be empty.
   

However, the sign-up completes as desired and you'll be automatically be signed in. I'll dig more into this.

2. Using AmplifyAuthenticator with custom AmplifyConfirmSignUp

For this use-case, I overrode the confirm-sign-up slot. Note that you should pass user prop to AmplifyConfirmSignUp like below so that you get phone_number field auto completed:

const App = () => {
  const [authState, setAuthState] = React.useState();
  const [user, setUser] = React.useState();
  
  React.useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);
  return (
    <AmplifyAuthenticator usernameAlias="phone_number">
      <AmplifyConfirmSignUp
	headerText="Verify your mobile phone number"
	slot="confirm-sign-up"
	submitButtonText="Confirm"
	usernameAlias="phone_number"
        user={user}
      />
    </AmplifyAuthenticator>
  )
}

This resulted in the same error flash as above, but it signed up the user as desired.

[wlee221]

That being said, I'm getting a different error from what you got. Do you still experience the same error with latest amplify @adampblack?

[sworgkh]

I have a very similar issue with my application.
I use usernameAlias="email" on AmplifyAuthenticator component and AmplifySignUp component as described in documentation.
I used formFields prop to manually select fields (email, password, name, family_name)

While trying to signUp on the desktop browser all work great but on mobile browsers (chrome, safari) I get a validation error message "User cannot be empty".
Even when I add a username field I get the same validation error.

Here the code:

import { AmplifySignUp, AmplifyAuthenticator } from "@aws-amplify/ui-react";

function Authentication() {
  return (
    <AmplifyAuthenticator usernameAlias="email">
      <AmplifySignUp
        slot="sign-up"
        usernameAlias="email"
        formFields={[
          {
            type: "email",
            label: "Email",
            placeholder: "shark@gmail.com",
            required: true,
          },
          {
            type: "password",
            label: "Password",
            placeholder: "use secure password",
            required: true,
          },
          {
            type: "name",
            label: "Name",
            placeholder: "Your Name",
            required: true,
          },
          {
            type: "family_name",
            label: "Last Name",
            placeholder: "Your Last Name",
            required: true,
          },
        ]}
      />
    </AmplifyAuthenticator>
  );
}

export default Authentication;

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.