skip to Main Content

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

2

Answers


  1. 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: {
                username: 'true',
                userPoolId: awsExports.USER_POOL_ID,
                userPoolClientId: awsExports.USER_POOL_APP_CLIENT_ID,
            },
        }
    });
    
    Login or Signup to reply.
  2. posting the types here given no one ever gets it right.

    export interface AuthUserPoolConfig {
        Cognito: CognitoUserPoolConfig & {
            identityPoolId?: never;
            allowGuestAccess?: never;
        };
    }
    
    export interface CognitoUserPoolConfig {
        userPoolClientId: string;
        userPoolId: string;
        userPoolEndpoint?: string;
        signUpVerificationMethod?: 'code' | 'link';
        loginWith?: {
            oauth?: OAuthConfig;
            username?: boolean;
            email?: boolean;
            phone?: boolean;
        };
        userAttributes?: AuthConfigUserAttributes;
        mfa?: {
            status?: 'on' | 'off' | 'optional';
            totpEnabled?: boolean;
            smsEnabled?: boolean;
        };
        passwordFormat?: {
            minLength?: number;
            requireLowercase?: boolean;
            requireUppercase?: boolean;
            requireNumbers?: boolean;
            requireSpecialCharacters?: boolean;
        };
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search