title: Getting JSON response from Cognito log in endpoint
body: <p>I am using Cognito for my authentication flow. When I log in using the incorrect credentials, I do not get a JSON response hence I can not use it to make some UI changes (show error message etc)</p>
  <p><strong>Login.tsx</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import &quot;./Login.css&quot;;
  import { CognitoUser, AuthenticationDetails } from &quot;amazon-cognito-identity-js&quot;;
  
  import Logo from &quot;../../images/logo.png&quot;;
  import LoginImage from &quot;../../images/login.png&quot;;
  import Google from &quot;../../images/google.png&quot;;
  import Apple from &quot;../../images/apple.png&quot;;
  import Facebook from &quot;../../images/facebook.png&quot;;
  import Button from &quot;@mui/material/Button&quot;;
  import TextField from &quot;@mui/material/TextField&quot;;
  import FormControlLabel from &quot;@mui/material/FormControlLabel&quot;;
  import Checkbox from &quot;@mui/material/Checkbox&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import UserPool from &quot;../../userpool&quot;;
  
  const Login = () =&gt; {
    const [username, setUsername] = useState(&quot;&quot;);
    const [password, setPassword] = useState(&quot;&quot;);
  
    // const [authResponse, setAuthResponse] = useState(&quot;&quot;);
  
    const onSubmit = (event) =&gt; {
      event.preventDefault();
  
      const user = new CognitoUser({
        Username: username,
        Pool: UserPool,
      });
  
      const authDetails = new AuthenticationDetails({
        Username: username,
        Password: password,
      });
  
      user.authenticateUser(authDetails, {
        onSuccess: (data) =&gt; {
          console.log(&quot;onSuccess:&quot;, data);
        },
        onFailure: (err) =&gt; {
          console.log(&quot;onFailure:&quot;, err);
        },
        newPasswordRequired: (data) =&gt; {
          console.log(&quot;newPasswordRequired:&quot;, data);
        },
      });
    };
  
    return (
      &lt;div className=&quot;login-container&quot;&gt;
        &lt;div className=&quot;login-form-container&quot;&gt;
          &lt;img src={Logo} alt=&quot;logo&quot; className=&quot;login-logo&quot; /&gt;
          &lt;div className=&quot;login-form&quot;&gt;
            &lt;h3 className=&quot;main-message&quot;&gt; Log In To Your Account &lt;/h3&gt;
            &lt;TextField
              id=&quot;standard-basic&quot;
              label=&quot;Email/Number&quot;
              variant=&quot;standard&quot;
              type=&quot;text&quot;
              value={username}
              onChange={(e) =&gt; {
                setUsername(e.target.value);
              }}
            /&gt;
            &lt;TextField
              id=&quot;standard-basic&quot;
              label=&quot;Password&quot;
              variant=&quot;standard&quot;
              type=&quot;password&quot;
              value={password}
              onChange={(e) =&gt; {
                setPassword(e.target.value);
              }}
            /&gt;
            &lt;div className=&quot;forgot-checkbox&quot;&gt;
              &lt;FormControlLabel
                value=&quot;end&quot;
                control={&lt;Checkbox /&gt;}
                label=&quot;Remember me&quot;
                labelPlacement=&quot;end&quot;
              /&gt;
              &lt;Link to=&quot;/forgotpassword&quot; style={{ textDecoration: &quot;none&quot; }}&gt;
                &lt;p className=&quot;forgot-password&quot;&gt; Forgot Password? &lt;/p&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;Button
              variant=&quot;contained&quot;
              style={{ backgroundColor: &quot;#21409A&quot; }}
              onClick={onSubmit}
            &gt;
              Sign in
            &lt;/Button&gt;
            &lt;div className=&quot;social-logins&quot;&gt;
              &lt;img src={Google} alt=&quot;social login&quot; /&gt;
              &lt;img src={Apple} alt=&quot;social login&quot; /&gt;
              &lt;img src={Facebook} alt=&quot;social login&quot; /&gt;
            &lt;/div&gt;
            &lt;p className=&quot;registerhere&quot;&gt;
              Don't have an account?
              &lt;Link to=&quot;/register&quot; style={{ textDecoration: &quot;none&quot; }}&gt;
                &lt;span className=&quot;register-here&quot;&gt; Register here!&lt;/span&gt;
              &lt;/Link&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div className=&quot;privacypolicy&quot;&gt;
            &lt;p&gt;Privacy Policy &lt;/p&gt;
            &lt;p&gt;•&lt;/p&gt;
            &lt;p&gt; Terms of Use&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;img src={LoginImage} alt=&quot;img&quot; className=&quot;login-img&quot; /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Login;
  </code></pre>
  <p><strong>Response:</strong></p>
  <p><a href="https://i.stack.imgur.com/h4ZuK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h4ZuK.png" alt="Response from Cognito" /></a></p>
  <p>How can I use this response in my return and render components such as error messages on my UI?</p>