Next.js Authentication UI using Amplify UI Components with Cognito

npm ci && cd app && npm ci && cd ..
npm run build

npx cdk bootstrap
npx cdk deploy AllInOneStack

Page
/	Public page that anyone can access
/admin	Require auth, unauthenticated users redirect to /signin
/signin	Authentication UI, return to /admin after auth

This is Server-side Rendering?

No, this sample is a Single Page Application, generated with next export. The routing issue when using next export and S3 together is solved by CloudFront Functions to rewrite the path.

Deploy CDK stacks

Deploy frontend and backend all at once

This sample requires the frontend resource to refer Cognito resource built as a backend resource, but the AllInOneStack deploys frontend and backend resources all at once.

Problem of deploying all at once

There is no need to set backend resource information as environment variables on the frontend since they can be deployed all at once. On the other hand, since it is necessary to fetch and render information of backend resources from S3, that logic and loading component are required and readability may be reduced.

How to deploy all at once

Buit the frontend and deploy CDK stack without configuration Amplify such as Cognito User Pool ID. The CDK stack exports CDK deploy-time values such as Cognito User Pool ID to S3 using aws_s3_deployment module. During rendering, frontend fetches those resource information from S3 and configures them to Amplify.

Deploy frontend and backend stacks separetly

This sample also contains frontend and backend stack separately.

How to deploy separetly

When splitting stacks between frontend and backend, frontend stack needs to refer to resources such as Cognito in backend stack. Also, since the aws_s3_deployment.Source.jsonData method does not support cross-stack references by Fn::ImportValue, it is necessary to use reference by Ref or Fn:GetAtt. Therefore, if the stack is separated, it can be solved by using RemoteOutputs of cdk-remote-stack.

Command to deploy separetly

npx cdk deploy BackendStack
npx cdk deploy FrontendStack

Run local dev server

## Create `./app/.env.development.local` and add Cognito UserPoolId and WebClientId. Refer to the following
cat ./app/.env.development.local
NEXT_PUBLIC_AUTH_USER_POOL_ID=ap-northeast-1_xxxxxxxxxxxx
NEXT_PUBLIC_AUTH_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx

cd app
npm run dev

Security

See CONTRIBUTING for more information.

License

This library is licensed under the MIT-0 License. See the LICENSE file.