"Username cannot be empty" error with AmplifySignIn and AmplifySignUp UI Components on Chrome Android Only

[taylor-kn]

Before opening, please confirm:

I have searched for duplicate or closed issues and discussions. I have read the guide for submitting bug reports. I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` System: OS: Linux 4.14 Amazon Linux 2 CPU: (1) x64 Intel(R) Xeon(R) CPU E5-2686 v4 @ 2.30GHz Memory: 293.26 MB / 1.94 GB Container: Yes Shell: 4.2.46 - /bin/bash Binaries: Node: 10.23.1 - ~/.nvm/versions/node/v10.23.1/bin/node npm: 6.14.10 - ~/.nvm/versions/node/v10.23.1/bin/npm npmPackages: @aws-amplify/ui-react: ^1.0.6 => 1.0.6 @testing-library/jest-dom: ^5.11.9 => 5.11.9 @testing-library/react: ^11.2.3 => 11.2.3 @testing-library/user-event: ^12.6.2 => 12.6.2 aws-amplify: ^3.3.26 => 3.3.26 aws-appsync: ^4.0.2 => 4.0.2 aws-appsync-react: ^4.0.2 => 4.0.2 formik: ^2.2.6 => 2.2.6 graphql-tag: ^2.11.0 => 2.11.0 react: ^17.0.1 => 17.0.1 react-apollo: ^2.5.8 => 2.5.8 react-dom: ^17.0.1 => 17.0.1 react-router-dom: ^5.2.0 => 5.2.0 react-scripts: 4.0.1 => 4.0.1 react-spring: ^8.0.27 => 8.0.27 styled-components: ^5.2.1 => 5.2.1 web-vitals: ^0.2.4 => 0.2.4 yup: ^0.32.8 => 0.32.8 npmGlobalPackages: @aws-amplify/cli: 4.45.0 cdk: 1.85.0 coffeescript: 2.5.1 create-react-app: 4.0.1 esformatter: 0.11.3 js-beautify: 1.13.4 npm: 6.14.10 prettier: 2.2.1 typescript: 3.7.5 ```

Describe the bug

When using the formFields prop to hide the phone number attribute on AmplifySignUp and AmplifySignIn UI components, the components throw the "Username cannot be empty" error despite the user entering the necessary information to sign up/in. This error only happens on Chrome on Android phones.  The components work properly when using:   -Chrome, Firefox and Safari on desktop -Firefox on Android phones -Chrome on iPhone -Opera mini and Firefox on Android phones

Package versions used:    @aws-amplify/ui-react: 1.0.6     aws-amplify: 3.3.26

Note:
Using Hub.listen('UI Auth', (data) => { ... }) to listen for toast errors and display the errors with a modal.

Expected behavior

Should not throw the "Username cannot be empty" error and prevent user from logging in when the user has provided an email address and password. Note: this only happens on Chrome on Android phones. Developers should be able to use the formField prop on the AmplifySignIn and AmplifySignUp components to hide the phone number or use custom labels.

Reproduction steps

1. Render the or UI components with formFields props (to hide the phone number field or use a custom label).
2. Code up a modal to display toast errors.
3. Test the functionality on Chrome on Android phones.
4. When users enter their email and password and click 'Sign In' or 'Sign Up' they will get the error of "Username cannot be empty" and will not be able to log in.

Code Snippet

Code that throws the error:

<AmplifySignUp usernameAlias='email'
    formFields={[
      {
        type: 'email',
        label: 'Email',
        placeholder: 'Email',
        required: true,
      },
      {
        type: 'password',
        label: 'Password',
        placeholder: 'Password',
        required: true,
      }
    ]}
  />

  <AmplifySignIn usernameAlias='email' 
  formFields={[
    {
      type: 'email',
      label: 'Email',
      placeholder: 'Email',
      required: true,
    },
    {
      type: 'password',
      label: 'Password',
      placeholder: 'Password',
      required: true,
    }
  ]}
/>

Code that works:   

<AmplifySignUp usernameAlias='email' />
<AmplifySignIn usernameAlias='email' />

Code to display toast errors:

  const [toastError, setToastError] = useState(null);
  const [showModal, setShowModal] = useState(false);

    useEffect(() => {
        const AuthHubListener = () => {
           Hub.listen('UI Auth', (data) => {
            const {payload} = data;
            const error = payload.event === 'ToastAuthError' ? true : false;

             setToastError(payload.message);
             setShowModal(error);
           });
        };
        AuthHubListener();

        return () => {
        Hub.remove('UI Auth');
        };
    }, [toastError, showModal]);

Log output

``` Username cannot be empty ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

Android phones

Mobile Operating System

No response

Mobile Browser

Chrome

Mobile Browser Version

No response

Additional information and screenshots

No response

[jstilesm]

I too recently have come across this error with AmplifySignIn and Amplify Signup. I used hideToast to hide the error message and added code to create my own error styling.

Steps to recreate error

• Fill out form incorrectly, filling out only username and leaving password blank
• error message is returned saying password field is empty.
• Fill out missing password field
• error message is return saying username field is empty

Package Version

• aws-amplify: 3.4.0
• @aws-amplify/ui-react: 1.1.0

Code to display Toast error

const [alertMessage, setAlertMessage] = useState('');

const handleToastErrors = ({ payload }) => {
    if (payload.event === AUTH_STATE_CHANGE_EVENT) {
      setAlertMessage('');
    }
    if (payload.event === TOAST_AUTH_ERROR_EVENT && payload.message) {
      setAlertMessage(payload.message);
    }

  };

useEffect(() => {
   Hub.listen(UI_AUTH_CHANNEL, handleToastErrors);
    return () => Hub.remove(UI_AUTH_CHANNEL, handleToastErrors);
});

Code that works

const renderSignIn = (
      <>
        {alertMessage && (<div className="customToast">{alertMessage}</div>)}
        <AmplifyAuthenticator
          usernameAlias="username"
          headerText="Sign in or create an account"
          hideToast
        >
          <AmplifySignUp
            headerText="Create account"
            slot="sign-up"

          />
          <AmplifySignIn slot="sign-in" usernameAlias="username" />
          <AmplifyConfirmSignUp
            headerText="Please check your text messages for your confirmation code"
          />
        </AmplifyAuthenticator>
      </>
    );`

[eddiekeller]

@taylor-kn @nstilesm I'm actually having trouble reproducing this. I set up a new app for this and was able to sign up and, subsequently, sign in a user using Chrome on Android without issue. No errors popped up for me. I used the code sample you provided and tried with both the versions of amplify/ui-react that you are using, and the latest versions as well. Both were successful.

Can you share which version of Android you are using and what version of Chrome on Android you are using?

[taylor-kn]

@eddiekeller the versions of Chrome that produced the error were 91.0.4472.88 and 90.0.4430.210.

[Milan-Shah]

@taylor-kn , we have released a major new version for @aws-amplify/ui-react@2.1.0, we havent been able to reproduce your issue in our latest release. Please let us know if you are still having any problems, we are here to help :)