Cognito setup guide for UI applications

Authentication is a common feature required in many applications but also one of the most sensitive ones. You don’t want someone having access to something that shouldn’t. Or not having to something that someone should. You can build your own, but why reinvent the wheel when there are already done and tested solutions. Cognito is a tool created by amazon and part of AWS that can provide that functionality for you. A slight problem might be setup. While very detailed, AWS documentation can be too much and confusing. In this post, I am describing step by step, how to do it for your web application.

Dependency

Before start, you need to install the AWS CLI library. You can do this by executing the following CLI command:

npm install -g @aws-amplify/cli

After installation finishes, you need to connect your local machine to your AWS account. For this, execute the following command:

amplify configure

This command gives some CLI prompts and might even open a browser to create IAM user. You can read more about it here.

UI app setup

Step 1: Initialize the project

You probably already have a project created. But to add Cognito support, you still need to initialize it also as an amplify project. You can do that by executing:

amplify init

When you run this command, you need to answer some questions required for amplify to make the correct setup. Each question also has a list of options for answers. Those questions are:

• Enter a name for the project
• Enter a name for the environment
• Chose your default editor
• Chose the type of app that you are building
• What javascript framework are you using
• Source directory path
• Distribution directory path
• Build command
• Start command
• Do you want to use an AWS profile
• Please choose the profile you want to use

For some of the questions, you can leave the default provided answers. Commands ones, directory, framework, and environment depend on your choices. For a name, you can choose anything, but it affects the user pool name.

Step 2: Add authentication

Adding authentication configuration is a matter of one command:

amplify add auth

This command also triggers a few questions. Those are with answers in bold:

• Do you want to use the default authentication and security configuration? Default configuration
• How do you want users to be able to sign in? Username
• Do you want to configure advanced settings? No, I am done.

Step 3: Push your configuration

At this moment, you have your local configuration, but the user pool still does not exist. If you go to your AWS console and check, the pool is not there. For this, you need to execute:

amplify push

This command can take a few minutes to complete. But if you check a list of user pools in AWS console now, there is a new one added for this project. Now, you can go and start using it in your JavaScript project.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.