I'm working on a NextJS project where I'm using AWS Amplify for authentication with Amazon Cognito. However, I'm encountering an issue where I receive an error message stating "Auth UserPool not configured" when I try to log in/sign up. I've checked my configurations and they seem correct, I am also able to manually create users from the AWS GUI. Below is the relevant code and configuration details.
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
This is the template.yaml file I ran using sam deploy --guided to create the infrastructure
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