Getting Started with AWS Cognito - Step by Step guide for Beginners

6 min readJun 18, 2020

What is AWS ?

Amazon web service is a platform that offers flexible, reliable, scalable, easy-to-use and cost-effective cloud computing solutions. AWS is a comprehensive, easy to use computing platform offered Amazon. The platform is developed with a combination of infrastructure as a service (IaaS), platform as a service (PaaS) and packaged software as a service (SaaS) offerings.The best thing about AWS is that they are very much cheaper and as they have 250+ data centers all over the world so they are too much faster in delivering your applications to clients.

What is Cognito ?

Amazon Cognito is a simple user identity and data synchronization service that helps you securely manage and synchronize app data for your users across their mobile devices and Web App. You can create unique identities for your users through a number of public login providers (Amazon, Facebook, and Google) and also support unauthenticated guests. You can save app data locally on users’ devices allowing your applications to work even when the devices are offline. With Amazon Cognito, you can save any kind of data in the AWS Cloud, such as app preferences or game state, without writing any backend code or managing any infrastructure. This means you can focus on creating great app experiences instead of having to worry about building and managing a backend solution to handle identity management, network state, storage, and sync.

In this blog you come to know how we can create AWS Cognito User Pool with Login , Sign-Up and User Authentication via Email .

So let’s dig straight into AWS at first :

1.) Open AWS console and then Goto Services -> Cognito this will open a console like this.

2.) Now we are proceeding towards making of User Pool for that click on the Manage user pool -> Create a user pool this will open a page like this.

3.) Type the name of your User Pool of your choice and then select Review Defaults this will open a page like this.

4.) Then click on the right side which is highlighted, By clicking on this you can manage your attributes and values and functionalities that you want to kept when user Registers/Sign-Up.

For our purpose we are taking Username and Email for registrations/Sign-up

5.) Than by going forward click on Next Step to further decide What password strength do you want to require ?

6.) Than by going forward click on Next Step to further decide that how we are gonna Authenticates our User.

For that, Goto -> Message customizations.We have Two option- verification code/ link to verify email address.

7.) After that if click on Next Step if you want to give any tags that remind you of why you had make this user pool. you can enter there your tag

Now lets make an App client for our User Pool.

After naming it make sure that none of the checkbox are selected except the last one

8.) Tap on Create an app client and then click on Next Step go to Review from left side panel

This shows that our User pool is successfully created.

9.) Now we are heading towards App integration -> App client settings

Click on the highlighted part and it will open the configuration page like below.

10.) Now add the details that are required in this

Add callback URL(s)- enter any form of URL but it should be HTTPS. I am entering https://example.com and check boxes as per the mention screenshot

11.) Now it time to get out desired domain of our Cognito User Pool go to the Domain Name and write the domain name you want and check the availability of it and then save the changes.

12.) Now lets jump to the code Section where we are connecting our web page through our Cognito User Pool.

For registering user following is the code.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8">
<! — Javascript SDK →
<script src=”https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src=”js/amazon-cognito-auth.min.js”></script>
<script src=”https://sdk.amazonaws.com/js/aws-sdk-2.7.16.min.js"></script>
<script src=”js/amazon-cognito-identity.min.js”></script>
<script src=”js/config.js”></script>
</head>
<body>
<h1 class=”h3 mb-3 font-weight-normal” id=”titleheader”>Register an Account</h1>
<input type=”personalname” class=”form-control” id=”personalnameRegister” placeholder=”Name” pattern=”.*” required>
<input type=”email” class=”form-control” id=”emailInputRegister” placeholder=”Email” pattern=”.*” required>
<input type=”password” class=”form-control” id=”passwordInputRegister” placeholder=”Password” pattern=”.*” required>
<input type=”password” class=”form-control” id=”confirmationpassword” placeholder=”Confirm Password” pattern=”.*” required>
<button id=”mainbutton” class=”btn btn-lg btn-primary btn-block” type=”button” onclick=”registerButton()” >Register</button>
<p>Already have an account? <a href=”login.html”>Log In</a></p>
<script>
var username;
var password;
var personalname;
var poolData;
function registerButton() {
personalnamename = document.getElementById(“personalnameRegister”).value;
username = document.getElementById(“emailInputRegister”).value;
if (document.getElementById(“passwordInputRegister”).value != document.getElementById(“confirmationpassword”).value) {
alert(“Passwords Do Not Match!”)
throw “Passwords Do Not Match!”
} else {
password = document.getElementById(“passwordInputRegister”).value;
}
poolData = {
UserPoolId : _config.cognito.userPoolId, // Your user pool id here
ClientId : _config.cognito.clientId // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var attributeList = [];
var dataEmail = {
Name : ‘email’,
Value : username, //get from form field
};
var dataPersonalName = {
Name : ‘name’,
Value : personalname, //get from form field
};
var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);
var attributePersonalName = new AmazonCognitoIdentity.CognitoUserAttribute(dataPersonalName);
attributeList.push(attributeEmail);
attributeList.push(attributePersonalName);
userPool.signUp(username, password, attributeList, null, function(err, result){
if (err) {
alert(err.message || JSON.stringify(err));
return;
}
cognitoUser = result.user;
console.log(‘user name is ‘ + cognitoUser.getUsername());
//change elements of page
document.getElementById(“titleheader”).innerHTML = “Check your email for a verification link”;
});
}
</script>
</body>
</html>

Also you can find the register , login page and other required Javascript files that is must required to setup a connection between your Web App and your User Pool from my Github Repository.