AmplifyAuthenticator is not displaying error messages

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

# Put output below this line
  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4570R CPU @ 2.70GHz
    Memory: 3.87 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 7.19.0 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.2
    Safari: 14.1.1
  npmGlobalPackages:
    @aws-amplify/cli: 4.52.0
    generator-jhipster: 7.0.0
    npm: 7.19.0
    serverless: 2.44.0
    typescript: 4.2.3

Describe the bug

I have noticed that the AmplifyAuthenticator does not display any error message on my app. Any message coming in the response header ‘x-amzn-errormessage’, e.g. Incorrect username or password, is silently ignored (although I can see the 400 response in the web developer console).

Am I missing a configuration in the react component? I am using the following versions:

    "@aws-amplify/ui-react": "^1.2.4",
    "aws-amplify": "^4.1.2",

Amplify.configure(awsExports);
const LoginComponent = () => {
  return (
    <AmplifyAuthenticator initialAuthState="signup" usernameAlias="email">
      <AmplifySignUp
        slot="sign-up"
        usernameAlias="email"
        validationErrors="signupErrors"
        formFields={[
          {
            type: "name",
            label: "Full Name *",
            placeholder: "Enter your full name",
            inputProps: { required: true, autocomplete: "name" },
          },
          {
            type: "email",
            inputProps: { required: true, autocomplete: "username" },
          },
          {
            type: "password",
            inputProps: { required: true, autocomplete: "new-password" },
          },
          {
            type: "phone_number",
            dialCode: "+64",
          },
        ]}
      />
      <AmplifySignIn slot="sign-in" usernameAlias="email" />
    </AmplifyAuthenticator>
  );
};
const Login = () => {
  const { isUserAuthenticated } = useAuth();
  return isUserAuthenticated ? (
    <Redirect to={{ pathname: "/" }} />
  ) : (
    <LoginComponent />
  );
};

export default Login;

Expected behavior

The UI component should display error messages on the screen?

Reproduction steps

1. Import the Login component into the App.js component (in this situation matching a react-router route)
2. Go to the /login route, load component
3. Type in invalid login credentials (i.e. wrong password)
4. The Signin button changes briefly, the network response comes back with a 400 error but no error message is displayed on the screen.

Code Snippet

// Put your code below this line.
Amplify.configure(awsExports);
const LoginComponent = () => {
  return (
    <AmplifyAuthenticator initialAuthState="signup" usernameAlias="email">
      <AmplifySignUp
        slot="sign-up"
        usernameAlias="email"
        validationErrors="signupErrors"
        formFields={[
          {
            type: "name",
            label: "Full Name *",
            placeholder: "Enter your full name",
            inputProps: { required: true, autocomplete: "name" },
          },
          {
            type: "email",
            inputProps: { required: true, autocomplete: "username" },
          },
          {
            type: "password",
            inputProps: { required: true, autocomplete: "new-password" },
          },
          {
            type: "phone_number",
            dialCode: "+64",
          },
        ]}
      />
      <AmplifySignIn slot="sign-in" usernameAlias="email" />
    </AmplifyAuthenticator>
  );
};
const Login = () => {
  const { isUserAuthenticated } = useAuth();
  return isUserAuthenticated ? (
    <Redirect to={{ pathname: "/" }} />
  ) : (
    <LoginComponent />
  );
};

export default Login;

Log output

// Put your logs below this line
XHRPOSThttps://cognito-idp.ap-southeast-2.amazonaws.com/
[HTTP/2 400 Bad Request 131ms]
__type	"NotAuthorizedException"
message	"Incorrect username or password."

aws-exports.js

No response

Manual configuration

//aws-exports.json
{
  "Auth": {
    "region": "ap-southeast-2",
    "userPoolId": "ap-southeast-2_...",
    "userPoolWebClientId": "...",
    "mandatorySignIn": true,
    "cookieStorage": {
      "domain": "localhost",
      "path": "/",
      "expires": 365,
      "sameSite": "lax",
      "secure": false
    }
  }
}

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

@gomesp that would be a huge help actually, please do and thank you!

[gomesp]

Hi @ErikCH, thanks for responding to my issue. Removing the validationErrors attribute does not fix the issue, but now debugging it further it seems that the toast messages appear if I remove the material-ui components that I have been wrapping the AmplifyAuthenticator component with. So, sadly it seems that there is some incompatibility between material-ui and the @aws-amplify/ui-react libraries. 😦