React Web 应用程序身份验证用户池未配置

Question

我按照此 AWS 指南 创建了一个 Cognito 用户池，用于在 React Web 应用程序上对用户进行身份验证。通过 CDK 创建用户池和我的应用程序客户端后，我创建了一个 aws 导出文件，其中包含相应的区域、池 ID 和应用程序 ID。但是，当我尝试在 App.TSX 文件中使用 Amplify 进行身份验证时，出现

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

Answer 1

您的配置似乎缺少一些值。

基于 Amplify 文档：https://docs.amplify.aws/javascript/tools/libraries/configure-categories/#authentication-amazon-cognito

您的配置应类似于：

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
      }
    }
  }
}); 

有一个 cognito 对象嵌套在 auth.请注意哪些值是可选的，哪些不是。