[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.LOG_LEVEL = '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]

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.