Using AWS Amplify and Cognito for Authentication

Finding credible ways to rapidly build a full-stack application that securely stores user information is important for companies that are expanding their customer base. The integration with providers such as Apple, Facebook, Google, Amazon allows for simple user authentication through their platforms.

Amplify is a service that makes it easy for front-end web and mobile developers to build full-stack applications quickly and easily on AWS. Amplify is great for user authentication as well as hosting websites. This article will touch on the deployment with Amplify, and mainly discuss authentication.

In this article we will be talking about using Amplify and Cognito for authentication and hosting with a React Application. We used a MacBook Pro for this tutorial.

In AWS Cognito there are two different options, there are user pools (which we will be using) and identity pools. User pools are used for authentication, and the Identify pools are used for authorization. Amazon Cognito provides authentication, authorization, as well as user management for both web and mobile applications. User pools are most often used when designing the sign up and sign in pages for your application, as well as being able to use a custom authentication flow. Identity pools make it easy to give your users access to AWS resources, such as S3 or DynamoDB. Identity pools also allow for generating temporary AWS credentials for unauthenticated users.

Let’s set up our Amplify command line interface! We will be referring to the command line interface as CLI for the rest of this article. To install the CLI use the command:

npm install -g @aws-amplify/cli

Now that npm has installed the amplify utility, you can run:

amplify configure

This will walk you through the configuration of amplify. The amplify utility does a good job of explaining the straightforward process. After running amplify configure it will prompt you to specify the AWS region you will be using, we are using us-east-1. It will then prompt you to specify the username of the IAM user, after entering the username and pressing enter you will be taken to the IAM dashboard with the username prepopulated. For the access type, we are using Programmatic access in order to use the CLI. You can now click Next: Permissions this has already been set up and you can click on Next: Review. The review page should look something like this:

Figure 1: Screenshot of the AWS IAM add user review page

You can now click on Create User, after clicking this you will see your user with an access key id and a secret access key. THESE ARE IMPORTANT. It is the only time these credentials will be displayed so make sure to download the csv, or add them to your password management service. Next copy the access key ID to your clipboard. The CLI will be prompting you to Enter the access key of the newly created user, paste the access key id we copied and hit enter. You will then be prompted for the secret access key, after copying and pasting the secret access key, hit enter. You will see “This would update/create the AWS Profile in your local machine” you will then have to enter the profile name, this can be anything, we will be using this later. The profile that was just created will be saved in your AWS profile config which is located in ~/. aws/credentials with the secret access key and the access key id.

After successful installation you can now run amplify init to create an amplify backend for your project. See Figure 2 and Figure 3 for details. You will be prompted to enter a name for the project, and the CLI will display your project information, ensure this is correct and press Y (Yes). It will then prompt you to select the authentication method you want to use, here we will select AWS Profile. You will then be asked what profile to use, here we will use the profile name that we entered previously.

Figure 2: Screenshot of running the amplify init command. I use myapp as the project name.

Figure 3: Screenshot of initialization after pressing Y in Figure 2

Side note, in order to use a specific AWS Profile with a project or to reconnect a project with a profile you can run export AWS_PROFILE=default, where default is the profile you wish to use.

Running the command

amplify push

will deploy your project to AWS Amplify, if you login to AWS and open the AWS Amplify console, you will now see this project.

Next, we can run:

amplify add auth

Here we usually go with the default settings. See Figure 4 and Figure 5 for what this path looks like.

Figure 4: Screenshot of running amplify add auth. I use the default configuration

Figure 5: Screenshot after running the amplify add auth command

Since we are only using a user pool and no social providers, we are selecting the default configuration. We then are selecting that users will sign in with a username, you can pick whatever you’d like here, this is just our personal preference. Figure 6 through Figure 9 show other options that you could select if you wanted to use something other than the default configuration.

Figure 6: Screenshot of the next step, deciding how users will sign in.

Figure 7: Screenshot of options if you are not selecting the default configuration (first screen)

Figure 8: Screenshot of options if you are not selecting the default configuration (second screen)

Figure 9: Screenshot of options if you are not selecting the default configuration (third screen)

Once these changes have been made, we can now run the command

amplify push

And we will have set up our Cognito user pool!

There are plenty of resources, where you can find source code for login and sign-up pages, so we won’t cover that in this article. Here is the official documentation from AWS to use the sign-up and sign-in user interface (UI).

To deploy an application with AWS Amplify you first need to run the command

amplify add hosting for this example we will choose Manual deployment.

Figure 10: Options if you are not selecting the default authentication and security configuration

You can now run the command in order to deploy your application.

amplify publish

This command will both build and publish the frontend and backend of your project. When we mention backend in this context it is not the same as having a decoupled application. The Amplify backend is solely responsible for handing, in our case, authentication and hosting. In my case we have a frontend project that connects to our middleware through an API, the amplify backend is solely for authentication and hosting.

In conclusion, we have found that using Amplify and Cognito together is a very efficient way of implementing authentication into your application as well as deploying your frontend application. While this tutorial and AWS try to make this process as easy as possible, if you still need help with your application authentication, the development team at Scalesology will be happy to help! We handle authentication for both the applications we develop for clients from scratch, as well as existing code bases where we take over development or augment a client’s development team. Contact us to learn more!