React Web应用集成Amazon Cognito时出现Auth UserPool未配置错误

我按照AWS官方指南创建了Amazon Cognito用户池（通过CDK），生成了包含region、user pool id和app client id的aws-exports文件，但在App.tsx中配置Amplify后调用getCurrentUser()时，抛出Auth UserPool not configured.错误。

复现代码 #

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

解决方案 #

1. 修正Amplify配置方式 #

CDK生成的aws-exports文件已经包含完整的Auth配置，无需手动拆分参数，直接传入Amplify.configure即可避免键名不匹配问题：

// 替换原有的Amplify.configure代码
Amplify.configure(awsExports);

2. 确保配置在组件渲染前执行 #

将Amplify配置代码移到文件最顶部，保证所有Amplify API调用前配置已完成：

import {Amplify} from 'aws-amplify';
import {awsExports} from './aws-exports';
// 先完成配置，再导入其他依赖
Amplify.configure(awsExports);

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

3. 调整getCurrentUser调用时机 #

getCurrentUser需要在用户登录后调用，通过Authenticator提供的user参数判断登录状态，避免未登录时触发错误：

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

    useEffect(() => {
        // 只有user存在时才调用
        if (user) {
            currentAuthenticatedUser();
        }
    }, [user]); // 依赖user状态，登录后自动执行

    // ... 其他代码不变
}

4. 检查Cognito客户端配置 #

确认CDK创建的Cognito应用客户端满足以下条件：

• 未设置generateSecret（Web应用不需要客户端密钥）
• 启用了用户池身份验证流（如ALLOW_USER_SRP_AUTH、ALLOW_USER_PASSWORD_AUTH）

内容的提问来源于stack exchange，提问作者219CID