Introduction

Hello, I'm Hemanth from the Alliance Department. In this blog, I will demonstrate how to use AWS Cognito on an S3 Static Page Website accessed by CloudFront Origin Access Control (OAC) for Login and Sign-up.

AWS

Amazon Web Services, or AWS, is a cloud service platform that provides content distribution, database storage, processing capacity, and other features to support corporate expansion. AWS has offered a broad range of services in many different categories, including Compute, Storage, Networking, Database, Management Tools, and Security.

S3

Simple and popular AWS Service for storage. Replicates data by default across multiple facilities. It charges per usage. It is deeply integrated with AWS Services. Buckets are logical storage units. Objects are data added to the bucket. S3 has a storage class on object level which can save money by moving less frequently accessed objects to a colder storage class.

CloudFront

Low latency and fast transfer speeds, Amazon CloudFront is a quick content delivery network (CDN) solution that securely sends data, videos, apps, and APIs to clients all over the world. In addition to providing cutting-edge security capabilities like DDoS defense and field-level encryption, CloudFront interfaces with AWS services.

Cognito

For web and mobile apps, AWS Cognito offers user management, permission, and authentication. In addition to using third-party identity providers like Facebook, Google, and Amazon, users have the option to log in directly with just their username and password. Security issues like MFA, account recovery, and email/phone number verification are also taken care of by Cognito.

Prerequisites

Follow the steps in this guide to set up an S3 bucket and CloudFront distribution.

Demo

In the AWS Management Console, search for "Cognito".

Click on "Create user pool".

Select "Email" for user authentication and click "Next".

Keep the default password policy and select "No MFA" for this project.

Leave the user account recovery settings as default and click "Next".

Configure the sign-up experience with default settings and click "Next".


For this project, select "Send email with Cognito" and click "Next".

Give your user pool a name.

Provide an app client name.


Review the settings and click "Create".

Your user pool has been successfully created.

Go into the user pool, copy the User Pool ID, and click on "App Integration".

Scroll down and copy the Client ID.

Now in the config add the above stuff like user pool id and client id

Update your S3 bucket with the necessary configuration to integrate Cognito and use CloudFront to access the website and click on here for user registration.

Users can enter their email, password, and confirm password to sign up.

Users will receive a verification email.

Enter the received verification code to complete the registration process.

Users can now sign in and access the website.

Conclusion

An S3 static page website that is accessible via CloudFront OAC can be integrated with AWS Cognito to offer a safe and expandable method of user management and authentication. The smooth sign-up and login processes improve user experience while also guaranteeing data security.