[react-ui-component: Authenticator] Empty username error

[DamickDoni]

Describe the bug When using the AmplifyAuthenticator with the usernameAlias = email for Sign Up, an error occurs when the input field is left blank. (Sign In works fine: If username input left empty and submited = Error empty username pop up) amplify-confirm-sign-in_7.entry.js:1729 Uncaught (in promise) TypeError: Cannot read property 'indexOf' of undefined

Expected behavior When empty Input value is submitted the "Empty Username" AuthToasError should be fired

Code Snippet

 <AmplifyAuthenticator usernameAlias="email">
    <AmplifySignUp
            headerText=""
            slot="sign-up"
            usernameAlias="email"
            formFields={[
              {
                type: 'email',
                label: 'Email',
                required: true,
              },
              {
                type: 'given_name',
                label: 'First Name',
                required: true,
              },
              {
                type: 'family_name',
                label: 'Family Name',
                required: true,
              },
              {
                type: 'password',
                label: 'Password',
                placeholder: '**********',
                required: true,
              },
            ]}
   ></AmplifySignUp>
</AmplifyAuthenticator>

Screenshots

What is Configured?

Amplify.configure({
  Auth: {
    region: 'eu-central-X',
    userPoolId: 'eu-central-XXXXXXXXXX',
    userPoolWebClientId: 'XXXXXXXXXXXXXXXXX',
    mandatorySignIn: false,
    authenticationFlowType: 'USER_PASSWORD_AUTH',
  },
});

Environment

System: OS: Windows 10 10.0.19041 CPU: (16) x64 AMD Ryzen 7 1700X Eight-Core Processor Memory: 5.71 GB / 15.93 GB Binaries: Node: 14.8.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 88.0.4324.190 Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81) npmPackages: @aws-amplify/ui-react: ^0.2.34 => 0.2.34 @babel/core: 7.12.3 => 7.12.3 @pmmmwh/react-refresh-webpack-plugin: 0.4.2 => 0.4.2 @popperjs/core: ^2.8.3 => 2.8.3 @svgr/webpack: 5.4.0 => 5.4.0 @testing-library/jest-dom: ^5.11.4 => 5.11.9 @testing-library/react: ^11.1.0 => 11.2.3 @testing-library/user-event: ^12.1.10 => 12.6.0 @typescript-eslint/eslint-plugin: ^4.5.0 => 4.13.0 @typescript-eslint/parser: ^4.5.0 => 4.13.0 aws-amplify: ^3.3.14 => 3.3.14 aws-amplify-react: ^4.2.18 => 4.2.18 babel-eslint: ^10.1.0 => 10.1.0 babel-jest: ^26.6.0 => 26.6.3 babel-loader: 8.1.0 => 8.1.0 babel-plugin-named-asset-import: ^0.3.7 => 0.3.7 babel-plugin-styled-components: ^1.10.0 => 1.12.0 babel-preset-react-app: ^10.0.0 => 10.0.0 bfj: ^7.0.2 => 7.0.2 camelcase: ^6.1.0 => 6.2.0 case-sensitive-paths-webpack-plugin: 2.3.0 => 2.3.0 css-loader: 4.3.0 => 4.3.0 dotenv: 8.2.0 => 8.2.0 dotenv-expand: 5.1.0 => 5.1.0 eslint: ^7.11.0 => 7.18.0 eslint-config-airbnb: ^17.1.0 => 17.1.1 eslint-config-airbnb-base: ^13.1.0 => 13.2.0 eslint-config-prettier: ^4.1.0 => 4.3.0 eslint-config-react-app: ^6.0.0 => 6.0.0 eslint-plugin-flowtype: ^5.2.0 => 5.2.0 eslint-plugin-import: ^2.22.1 => 2.22.1 eslint-plugin-jest: ^24.1.0 => 24.1.3 eslint-plugin-jsx-a11y: ^6.3.1 => 6.4.1 eslint-plugin-prettier: ^3.0.1 => 3.3.1 eslint-plugin-react: ^7.21.5 => 7.22.0 eslint-plugin-react-hooks: ^4.2.0 => 4.2.0 eslint-plugin-testing-library: ^3.9.2 => 3.10.1 eslint-webpack-plugin: ^2.1.0 => 2.4.1 file-loader: 6.1.1 => 6.1.1 fs-extra: ^9.0.1 => 9.0.1 html-webpack-plugin: 4.5.0 => 4.5.0 identity-obj-proxy: 3.0.0 => 3.0.0 jest: 26.6.0 => 26.6.0 jest-circus: 26.6.0 => 26.6.0 jest-resolve: 26.6.0 => 26.6.0 jest-watch-typeahead: 0.6.1 => 0.6.1 mini-css-extract-plugin: 0.11.3 => 0.11.3 optimize-css-assets-webpack-plugin: 5.0.4 => 5.0.4 pnp-webpack-plugin: 1.6.4 => 1.6.4 postcss-flexbugs-fixes: 4.2.1 => 4.2.1 postcss-loader: 3.0.0 => 3.0.0 postcss-normalize: 8.0.1 => 8.0.1 postcss-preset-env: 6.7.0 => 6.7.0 postcss-safe-parser: 5.0.2 => 5.0.2 prettier: ^2.2.1 => 2.2.1 prompts: 2.4.0 => 2.4.0 react: ^17.0.1 => 17.0.1 react-app-polyfill: ^2.0.0 => 2.0.0 react-dev-utils: ^11.0.1 => 11.0.1 react-dom: ^17.0.1 => 17.0.1 react-hook-form: ^6.14.2 => 6.14.2 react-popper: ^2.2.4 => 2.2.4 react-refresh: ^0.8.3 => 0.8.3 react-router-dom: ^5.2.0 => 5.2.0 resolve: 1.18.1 => 1.18.1 resolve-url-loader: ^3.1.2 => 3.1.2 sass-loader: 8.0.2 => 8.0.2 semver: 7.3.2 => 7.3.2 style-loader: 1.3.0 => 1.3.0 styled-components: ^5.2.1 => 5.2.1 terser-webpack-plugin: 4.2.3 => 4.2.3 ts-pnp: 1.2.0 => 1.2.0 url-loader: 4.1.1 => 4.1.1 web-vitals: ^0.2.4 => 0.2.4 webpack: 4.44.2 => 4.44.2 webpack-dev-server: 3.11.0 => 3.11.0 webpack-manifest-plugin: 2.2.0 => 2.2.0 workbox-webpack-plugin: 5.1.4 => 5.1.4 npmGlobalPackages: @adonisjs/cli: 4.0.12 @angular/cli: 7.3.6 @aws-amplify/cli: 3.17.0 @nestjs/cli: 6.5.0 create-react-app: 3.4.1 cypress: 3.2.0 debundle: 0.5.4 eslint: 5.9.0 expo-cli: 3.24.2 express-generator: 4.16.1 generator-sls: 0.0.27 github-spray: 1.0.21 gulp-cli: 2.3.0 @damickdoni/intl-extractor: 1.0.5 jest: 24.7.1 lerna: 3.20.2 mysql2: 2.1.0 npm-check-updates: 10.2.5 pm2: 3.5.0 preact-cli: 2.2.1 prepack: 0.2.54 purgecss: 1.3.0 purify-css: 1.2.5 rimraf: 3.0.2 rollup: 2.10.2 sass: 1.32.4 sequelize-cli: 5.5.1 serverless-offline: 6.5.0 serverless: 2.11.1 strapi: 3.0.0-alpha.26.2 typescript: 3.4.3 webpack-dev-server: 3.7.2 webpack: 4.35.0 windows-build-tools: 5.2.2 yo: 3.1.1

Is this a production issue? Are you experiencing this issue with a production application where end users are affected?

• [x]

_You can turn on the debug mode to provide more info for us by setting window.LOGLEVEL = 'DEBUG'; in your app.

[wlee221]

Hi, this was fixed by pr #7663. Can you do a fresh install of latest @aws-amplify/ui-react and aws-amplify?

[DamickDoni]

fresh installing the latest version worked but now the additional required fields are not checked.

{
                type: 'given_name',
                label: 'First Name',
                required: true,
              },
              {
                type: 'family_name',
                label: 'Family Name',
                required: true,
},

when I keep it empty, no error is thrown, and the user is saved wihtout the required attributes into cognito

[wlee221]

@DamickDoni, you're right -- that's another bug on our end! We'll track this in #6885.

[DamickDoni]

ahh okay. I didn't have enough time to check the code but wouldn't be an easy fix just to loop through the formFields and check for empty values?

e.g

     // packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx   
     checkEmptyFields = () => {
        this.formFields.forEach(field => {
            if (!this.signUpAttributes[field]) {
                throw new Error(Translations.DEFAULT_MSG);
            }
        });
    };

[github-actions[bot]]

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.