reactjs 未配置React Web应用Auth UserPool

icnyk63a  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(105)

我按照这个AWS guide创建了一个Cognito用户池,用于在react web应用程序上验证用户。在通过CDK创建用户池和我的应用程序客户端之后,我创建了一个包含适当区域,池ID和应用程序ID的aws导出文件。然而,当我尝试在我的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;

个字符

6rqinv9w

6rqinv9w1#

您的配置似乎缺少某些值。
基于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
      }
    }
  }
});

字符串
auth中嵌套了一个cognito对象。注意哪些值是可选的,哪些不是。
你应该

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

相关问题