我正在处理一个NextJS项目,在该项目中,我使用AWS Amplify对**Amazon Cognito进行身份验证。但是,我遇到了一个问题,当我尝试登录/注册时,我收到一条错误消息,指出 “Auth UserPool not configured”。我已经检查了我的配置,它们似乎是正确的,我还可以从AWS GUI手动创建用户。**以下是相关代码和配置详细信息。
- Index.js*
import React, { useState, useEffect } from 'react'
import { Amplify } from 'aws-amplify'
import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { Auth } from 'aws-amplify'
Amplify.configure({
Auth: {
region: process.env.REGION,
userPoolId: process.env.USER_POOL_ID,
userPoolWebClientId: process.env.USER_POOL_APP_CLIENT_ID,
},
})
function Home() {
const [jwtToken, setJwtToken] = useState('')
useEffect(() => {
fetchJwtToken()
}, [])
const fetchJwtToken = async () => {
try {
const session = await Auth.currentSession()
const token = session.getIdToken().getJwtToken()
setJwtToken(token)
} catch (error) {
console.log('Error fetching JWT token:', error)
}
}
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'
/>
</>
)
},
},
}}
services={{
async validateCustomSignUp(formData) {
if (!formData.given_name) {
return {
given_name: 'First Name is required',
}
}
if (!formData.family_name) {
return {
family_name: 'Last Name is required',
}
}
if (!formData.email) {
return {
email: 'Email is required',
}
}
},
}}
>
{({ signOut, user }) => (
<div>
Welcome {user.username}
<button onClick={signOut}>Sign out</button>
<h4>Your JWT token:</h4>
{jwtToken}
</div>
)}
</Authenticator>
)
}
export default Home
字符串
这是我使用sam deploy --guided
运行以创建基础结构的template.yaml文件
AWSTemplateFormatVersion: 2010-09-09
Description: >-
template for creating the Cognito User Pool
Transform:
- AWS::Serverless-2016-10-31
Parameters:
Env:
Type: String
Default: dev
S3BucketName:
Type: String
Default: pibot-nextjs-website
CognitoUserPoolName:
Type: String
Default: pibot-users-v2
CognitoWebClientName:
Type: String
Default: cognito-webclient
Resources:
CloudFrontOriginAccessIdentity:
Type: 'AWS::CloudFront::CloudFrontOriginAccessIdentity'
Properties:
CloudFrontOriginAccessIdentityConfig:
Comment: 'Origin Access Identity'
CloudfrontDistribution:
Type: 'AWS::CloudFront::Distribution'
Properties:
DistributionConfig:
Comment: 'Cloudfront distribution for the static website'
DefaultRootObject: 'index.html'
Enabled: true
HttpVersion: http2
Origins:
- Id: s3-website
DomainName: !GetAtt S3Bucket.DomainName
S3OriginConfig:
OriginAccessIdentity:
Fn::Sub: 'origin-access-identity/cloudfront/${CloudFrontOriginAccessIdentity}'
DefaultCacheBehavior:
Compress: 'true'
AllowedMethods:
- GET
- HEAD
- OPTIONS
ForwardedValues:
QueryString: false
TargetOriginId: s3-website
ViewerProtocolPolicy: redirect-to-https
S3Bucket:
Type: AWS::S3::Bucket
Properties:
BucketName: !Sub '${Env}-${S3BucketName}'
S3BucketPolicy:
Type: AWS::S3::BucketPolicy
Properties:
Bucket: !Ref S3Bucket
PolicyDocument:
Statement:
- Effect: Allow
Action: 's3:GetObject'
Resource:
- !Sub 'arn:aws:s3:::${S3Bucket}/*'
Principal:
AWS: !Sub 'arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ${CloudFrontOriginAccessIdentity}'
CognitoUserPool:
Type: AWS::Cognito::UserPool
Properties:
UserPoolName: !Sub '${Env}-${CognitoUserPoolName}'
AliasAttributes:
- email
UsernameConfiguration:
CaseSensitive: false
AutoVerifiedAttributes:
- email
Policies:
PasswordPolicy:
MinimumLength: 8
RequireLowercase: true
RequireNumbers: true
RequireUppercase: true
RequireSymbols: true
Schema:
- AttributeDataType: String
Mutable: true
Name: given_name
Required: true
StringAttributeConstraints:
MinLength: '1'
- AttributeDataType: String
Mutable: true
Name: family_name
Required: true
StringAttributeConstraints:
MinLength: '1'
- AttributeDataType: String
Mutable: true
Name: email
Required: true
StringAttributeConstraints:
MinLength: '1'
WebCognitoUserPoolClient:
Type: AWS::Cognito::UserPoolClient
Properties:
ClientName: !Sub '${Env}-${CognitoWebClientName}'
UserPoolId: !Ref CognitoUserPool
ExplicitAuthFlows:
- ALLOW_USER_SRP_AUTH
- ALLOW_REFRESH_TOKEN_AUTH
PreventUserExistenceErrors: ENABLED
型
2条答案
按热度按时间smdnsysy1#
问题似乎源于配置设置。在AWS Amplify版本6中,用户池配置已更新。请按以下方式调整配置:
字符串
有关更多详细信息,请参阅官方文档:AWS Amplify Documentation
我希望这有助于解决您的问题。如果您有进一步的问题,请随时提问。
dojqjjoe2#
我认为你需要为你的环境变量使用
NEXT_PUBLIC_
,使它们可以访问你的浏览器环境?https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser所以你的变量应该是:
字符串
别忘了在你的.env文件中修改var名称:)
同样在amplify docs中,用户池配置在
Auth
对象的Cognito
属性中