React web app Auth UserPool not configured

I followed this AWS guide to create a Cognito user pool for use authenticating a user on a react web app. After creating the user pool and my app client via CDK I created an aws exports file containing the appropriate region, pool id, and app id. However, when I try to authenticate using Amplify in my App.TSX file I get a Auth UserPool not configured. error:

import React, {useState, useEffect} from 'react';
import './App.css';
import {Amplify} from 'aws-amplify';
import {awsExports} from './aws-exports';
import {Authenticator} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import {getCurrentUser} from 'aws-amplify/auth';

Amplify.configure({
    Auth: {
        // @ts-ignore
        region: awsExports.REGION,
        userPoolId: awsExports.USER_POOL_ID,
        userPoolWebClientId: awsExports.USER_POOL_APP_CLIENT_ID
    }
});


function App() {
    const [jwtToken, setJwtToken] = useState('');

    useEffect(() => {
        currentAuthenticatedUser();
    }, []);

    async function currentAuthenticatedUser() {
        try {
            console.log("I am here")
            console.log("awsExports.REGION " + awsExports.REGION)
            console.log("awsExports.USER_POOL_ID " + awsExports.USER_POOL_ID)
            console.log("awsExports.USER_POOL_APP_CLIENT_ID " + awsExports.USER_POOL_APP_CLIENT_ID)
            const {username, userId, signInDetails} = await getCurrentUser();
            console.log(`The username: ${username}`);
            console.log(`The userId: ${userId}`);
            console.log(`The signInDetails: ${signInDetails}`);
            return signInDetails;
        } catch (err) {
            console.log(err);
        }
    }


    return (
        <Authenticator initialState='signIn'
                       components={{
                           SignUp: {
                               FormFields() {

                                   return (
                                       <>
                                           <Authenticator.SignUp.FormFields/>

                                           {/* Custom fields for given_name and family_name */}
                                           <div><label>First name</label></div>
                                           <input
                                               type="text"
                                               name="given_name"
                                               placeholder="Please enter your first name"
                                           />
                                           <div><label>Last name</label></div>
                                           <input
                                               type="text"
                                               name="family_name"
                                               placeholder="Please enter your last name"
                                           />
                                           <div><label>Email</label></div>
                                           <input
                                               type="text"
                                               name="email"
                                               placeholder="Please enter a valid email"
                                           />


                                       </>
                                   );
                               },
                           },
                       }}
        >
            {({signOut, user}) => (
                // @ts-ignore
                <div>Welcome {user.username}
                    <button onClick={signOut}>Sign out</button>
                    <h4>Your JWT token:</h4>
                    {jwtToken}
                </div>
            )}
        </Authenticator>
    );
}

export default App;

AuthUserPoolException: Auth UserPool not configured.
    at http://localhost:3000/static/js/bundle.js:73721:11
    at assertTokenProviderConfig (http://localhost:3000/static/js/bundle.js:74272:67)
    at getCurrentUser (http://localhost:3000/static/js/bundle.js:64877:95)
    at getCurrentUser (http://localhost:3000/static/js/bundle.js:64800:86)
    at currentAuthenticatedUser (http://localhost:3000/static/js/bundle.js:62:81)
    at http://localhost:3000/static/js/bundle.js:50:5
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:35937:30)
    at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:37430:17)
    at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:37402:13)
    at commitPassiveMountE

It looks like your configuration is missing some values.

Based on the Amplify documentation: https://docs.amplify.aws/javascript/tools/libraries/configure-categories/#authentication-amazon-cognito

your config should look similar to:

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolClientId: 'abcdefghij1234567890',
      userPoolId: 'us-east-1_abcd1234',
      loginWith: { // Optional
        oauth: {
          domain: 'abcdefghij1234567890-29051e27.auth.us-east-1.amazoncognito.com',
          scopes: ['openid email phone profile aws.cognito.signin.user.admin '],
          redirectSignIn: ['http://localhost:3000/','https://example.com/'],
          redirectSignOut: ['http://localhost:3000/','https://example.com/'],
          responseType: 'code',
        }
        username: 'true',
        email: 'false', // Optional
        phone: 'false', // Optional
      }
    }
  }
}); 

There is a cognito object nested into the auth. Note which values are optional and which are not.

you should have

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolClientId: awsExports.USER_POOL_APP_CLIENT_ID,
      userPoolId: awsExports.USER_POOL_ID,
      loginWith: { // Optional
        username: 'true',
        # ...
      },
      # ...
    },
  }
});