Authenticate with AWS Cognito. It is that simple with the AWS Framework!
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:
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.
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.
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.
WE ARE NOT DONE YET.. BUT ALMOST THERE!!
After setting up the AWS Amplify, let us set up the authentication component provided by it. The amplify framework uses Amazon Cognito as the main authentication provider which handles the user registration, authentication, account recovery and other operations. Bottom Line — AWS Cognito handle the over all authentication flow that you need in your project. PERIOD!
To add the authentication, run:
amplify add auth
This will provide us with few options for configuring our authentication. You can choose the option as per your wish, whereas if you are unsure you can move forward with default configuration for now. After we are done setting up the configuration, the service needs to be deployed. To deploy the service, run:
amplify push
When we push the service, it generates a resource name, and the details of the resources such as pool name are updated in our aws-exports.js file. This creates a user pool that handles all our authentication. We can also confirm that our user pool has been created by going to the Amplify console or by simply running:
amplify status
To view the user pool that we have created, login to the Amazon AWS Console. At the top left corner click and navigate to
Services > Cognito > Manage User Pools.
You can find your user pool with the resource name that was generated.
Now, it is finally time to create our UI component for our application. To add the built-in component by the AWS Amplify, let us add the following lines of code in our App.js file:
First, let us import the withAuthenticator component from ‘@aws-amplify/ui-react’
import { withAuthenticator } from ‘@aws-amplify/ui-react’
Then, let us wrap our main component with the imported component.
export default withAuthenticator(App)
Here, the withAuthenticator is a HOC (Higher-Order Component) — A higher-order component is just a function which takes in a component as a parameter and returns a new component with added logic. With this added logic, we are able to reuse the logic in many components.
With this codes all in place you can see something like this when you load your application into the browser:
We have the UI Component for authentication and it provides us with all the required functionality such as Sign In, Sign Up, Forgot Password, etc. We can now play around with it, create an account and login with it.
The UI template we see is based on the Amazon AWS theme. We will shortly look into changing its appearances.
Now, when you sign into the application, you can now see the “You have logged in!!!” message.
Now, to sign out of the page we would need a sign out button. To do this, we can simply use the <AmplifySignOut/> component to our project. This is another component provided to us by aws-amplify library. So, when we put all of this together, our code looks something like this:
When we add this code, and login to the application, we can now see a SIGN OUT button added. It looks something like this:
We have now added the authentication to our project. I am pretty sure that you will be happy with all the functionality the AWS Cognito has to offer! But what about the theme? Are you ready to use the Yellow theme Amazon has to provide? Maybe NOT!
DONT WORRY!! We do have the options to tweak it to our preferences. I will surely post more on it soon and upload the link to my other blog here. Till then try out what we have gone through and see if you can work to tweak a little on your own. I am attaching the link to my github down below with the above code implemented!
Let me know if you have anything to say about my article or have any feedbacks for me down in the comment section below. Also, share if you have a better optimized way than what I have mentioned, would love to hear about it.
Will come up with other blog on how to customize the AWS Authentication soon!!
