Amplify-js: [React] Providing value to AmplifySignIn username formField causes 'Username cannot be empty' error

[wrightkris]

Describe the bug
It appears that in order to provide an initial value to the username/email fields of you must provide it via the formFields prop of the component. However, by doing so the signInAttributes state object is not populated with the provided values as they are only stored via an input change event with handleFormFieldInputChange. Thus, when attempting sign in using a preset value the 'Username cannot be empty' message.

(If there's a more correct way of prepopulating the sign in values I am unaware of it.)

Expected behavior
When providing the value to a formField it sets the necessary state value on the component to be used for signIn.

Code Snippet

        <AmplifySignIn
          formFields={[
            {
              type: 'username',
              label: 'Email *',
              placeholder: 'Enter your email',
              required: true,
              value: '[email protected]',
            },
            {
              type: 'password',
            },
          ]}
        />

Environment

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages


  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 340.25 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.97
    Firefox: 77.0.1
    Safari: 13.1
  npmPackages:
    @ant-design/compatible: ^1.0.2 => 1.0.2 
    @apollo/react-hooks: ^3.1.5 => 3.1.5 
    @apollo/react-testing: ^3.1.4 => 3.1.4 
    @aws-amplify/ui-react: ^0.2.8 => 0.2.8 
    @babel/plugin-transform-typescript: ^7.9.4 => 7.9.6 
    @testing-library/dom: ^7.5.1 => 7.5.1 
    @testing-library/jest-dom: ^5.3.0 => 5.5.0 
    @testing-library/react: ^10.0.2 => 10.0.4 
    @testing-library/user-event: ^7.1.2 => 7.2.1 
    @types/jest: ^25.2.1 => 25.2.1 
    @types/node: ^13.11.0 => 13.13.5 
    @types/react: ^16.9.34 => 16.9.34 
    @types/react-dom: ^16.9.6 => 16.9.7 
    @types/react-router-dom: ^5.1.3 => 5.1.5 
    @types/styled-components: ^5.0.1 => 5.1.0 
    @wisersolutions/eslint-config: ^2.0.1 => 2.0.1 
    antd: ^4.0.1 => 4.2.0 
    apollo-boost: ^0.4.9 => 0.4.9 
    aws-amplify: ^3.0.17 => 3.0.17 
    bulma: ^0.8.0 => 0.8.2 
    eslint: ^6.8.0 => 6.8.0 
    eslint-config-prettier: ^6.10.1 => 6.11.0 
    eslint-plugin-import: ^2.20.2 => 2.20.2 
    eslint-plugin-jest: ^23.8.2 => 23.9.0 
    eslint-plugin-no-only-tests: ^2.4.0 => 2.4.0 
    eslint-plugin-prettier: ^3.1.2 => 3.1.3 
    eslint-plugin-react: ^7.19.0 => 7.19.0 
    graphql: ^14.6.0 => 14.6.0 
    husky: ^4.2.3 => 4.2.5 
    jest-environment-jsdom-sixteen: ^1.0.3 => 1.0.3 
    jsonwebtoken: ^8.5.1 => 8.5.1 
    lint-staged: ^10.1.1 => 10.2.2 
    node-sass: ^4.13.1 => 4.14.1 
    prettier: ^2.0.2 => 2.0.5 
    prop-types: ^15.7.2 => 15.7.2 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-router-dom: ^5.1.2 => 5.1.2 
    react-scripts: 3.4.0 => 3.4.0 
    react-test-renderer: ^16.13.1 => 16.13.1 
    ts-jest: ^25.5.0 => 25.5.0 
    typescript: ^3.8.3 => 3.8.3 
    uuid: ^7.0.1 => 7.0.3 
  npmGlobalPackages:
    npm: 6.13.7

Additional context
The input handler I reference is here: https://github.com/aws-amplify/amplify-js/blob/1fd83360138be0359505c25bce2890f959c1000e/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx#L88

At quick glance it seems like in https://github.com/aws-amplify/amplify-js/blob/1fd83360138be0359505c25bce2890f959c1000e/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx#L255 it'd be necessary to check for a value on the newField object and update the state if necessary.

In searching for similar issues it seems close to https://github.com/aws-amplify/amplify-js/issues/5254, but I believe that is a different use case in that the browser is autofilling the input, vs this being done programmatically.

[jordanranz]

Related to: https://github.com/aws-amplify/amplify-js/issues/6168

[jordanranz]

@wrightkris I have added a change to pass the value into the component state which gets sent to Cognito. If possible could you test if this is fixed in the @unstable version of the component library: @aws-amplify/ui-react@unstable

[wrightkris]

I'll give it a try today and let you know the outcome.

[wrightkris]

@jordanranz Just ran through our use cases for this and it LGTM 👍 Thanks for your work on this.

[jordanranz]

The fix has been published to @latest. Closing this issue now.

[kjetilge]

@jordanranz, same thing happens in Vue:

      <amplify-confirm-sign-up
        slot="confirm-sign-up"
        handleSubmit.prop="handleConfirmSubmit"
        :form-fields.prop="[
          {
            type: 'email',
            label: 'Epostadresse',
            value: username,
            disabled: !!username
          },
          {
            label: 'Kode',
            placeholder: 'kode fra epost',
            required: true,
            handleInputChange: (event, cb) => {
              confirmCode = event.target.value
              cb(event);
            }
          }
        ]"
      ></amplify-confirm-sign-up>

First I get a 'bind' error when I paste the code:

Uncaught TypeError: Cannot read property 'bind' of undefined
    at class_2.handleFormFieldInputWithCallback (amplify-confirm-sign-in_7.entry.js:289)
    at AmplifyInput.newField.handleInputChange (amplify-confirm-sign-in_7.entry.js:243)
    at HTMLInputElement.onInput (amplify-form-field_4.entry.js:56)

Then when I click confirm I get a toast saying:
"Usename cannot be empty"

I assume this happens to the other forms as well.

amplify --version
4.29.4