Cognito setup guide for UI applications
Tags: javascript, aws, authentication, tutorial
Published: 2020-10-05 23:19:12


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](https://aws.amazon.com/cognito/) is a tool created by amazon and part of [AWS](https://aws.amazon.com/) 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cp5gn4wio10cctpqlwmy.jpg) 

## Dependency

Before start, you need to install the [AWS CLI](https://www.npmjs.com/package/@aws-amplify/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](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) user. You can read more about it [here](https://docs.amplify.aws/cli/start/install#option-1-watch-the-video-guide).

## 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](https://twitter.com/hi_iam_chris_), [LinkedIn](https://www.linkedin.com/in/kpajtasev/), [GitHub](https://github.com/kristijan-pajtasev/), or [Instagram](https://www.instagram.com/hi_iam_chris_/).