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
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:
There is a cognito object nested into the auth. Note which values are optional and which are not.
you should have
posting the types here given no one ever gets it right.