Authenticate with AWS Cognito. It is that simple with the AWS Framework!
Tags: AWS, Reactjs, Authentication, Aws Cognito, Aws Amplify

Ever felt creating an authentication page a hassle?

Why would you not? Create a Sign In page, Sign Up page, check for the user’s existence, password security and so on… There are a lot of things to keep in mind when we are creating an authentication page for our application. And lets not forget the security too!

But this has all been taken care of, all thanks to AWS Cognito! You heard me right! AWS Cognito is here to provide us with a authentication framework which we can add directly to our application with couple of configuration and few lines of code.

Let us now dive into how to configure AWS Cognito into our application. We will start our project from scratch and we will be using React JS. To create a new project in React JS, open a command prompt and run:

npx create-react-app aws-cognito-app

Once the command is executed and completed, we can see an output similar to:

Creating a react project from the command line

Let us open our IDE and start the development server. To start the server, run:

npm start

Once the project is hosted in the developmental server (localhost:3000), a browser will open up and we can see the React app logo. Let us tweak a little to remove the logo and display a simple “You have logged in!!!” message.

Updating App.js script

Once we see the message in our application; let us move on to adding the login UI, so that the user needs to log in to our application before they can see the message.

Hold on! Before we move on to the next steps, we need to have an account in the Amazon AWS. If you do not have, please create one and continue reading, if you already have an account let us get into the next step.

Let us first configure Amplify CLI. To do that, let us go to the terminal in our IDE and run:

amplify configure

NOTE: TO proceed with the configuration we need to sign into the AWS Console. Then we need to create an IAM user with Administrator Access. Upon user creation, AWS provides us with a access key and secret key, which will be required for configuring amplify.

Amplify Configuration

The Amplify CLI will ask you to provide the accessKeyId and secretAccessKey. Once we have set up our user and Amplify CLI, we need to initialize Amplify to our project so that we can create necessary backend services. To initialize, run:

amplify init

This will automatically creates a top level directory amplify folder and a aws-exports.js file under the src directory. A cloud project is created in the AWS Amplify Console that can be accessed by running amplify console.

AWS_EXPORTS.js is a file that contains all the configuration for the services you create with Amplify. This is how the Amplify client is able to get the necessary information about your backend services.

To work around with the AWS Amplify, react provides us with aws-amplify library as the main library. This library includes React specific UI components. To install this library into our project, run:

npm install aws-amplify @aws-amplify/ui-react

Once the installation completes, let us now configure amplify on the client side so that we can interact with our backend services. Let us open the App.js file and paste the following lines of code right below the last import statement:

import Amplify from “aws-amplify”;

import awsExports from “./aws-exports”;

Amplify.configure(awsExports);

And that’s all it takes to configure Amplify. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in aws-exports.js will update automatically.

NOTE: If you have already started the development server and is hosting your project during the installation of the library, its likely that you will see a “Module not found” error. If you face this issue, would request you to restart your development server.