Implement Authentication in React Apps using AWS Amplify

6 min readMar 9, 2022

In this blog post, I will guide you on how to integrate AWS Amplify to your React.js application and use AWS Authentication to create a login flow.

Before we jump into how to integrate AWS Amplify to our project, let’s see what AWS Amplify is.

What is AWS Amplify?

According to AWS docs,

AWS Amplify is a set of purpose-built tools and services that makes it quick and easy for front-end web and mobile developers build full-stack applications on AWS, with the flexibility to leverage the breadth of AWS services to further customize applications. (Source :- https://aws.amazon.com/amplify/)

Amplify supports popular frameworks like Vue, React, Angular etc. And it has several features and tools such as Authentication, DataStore, CI/CD, Push Notifications and many more. It is using Amazon Cognito as the main authentication provider which handles the user registration, authentication, account recovery and other operations.

Amplify framework provides pre-built UI components and as well as we can use the customization version of it. If you have previously enabled Amplify Auth module, you can update the Auth configuration and use it, if not you can create a Authentication service from scratch using AWS Amplify CLI.

In this example, I will be creating a Authentication service from scratch using Amplify CLI and use Authentication feature with pre-built UI components in AWS Amplify to use Authentication in React application.

Before gets started, you need an AWS account to run Amplify. You can create an AWS account using below link if you don’t have an account already.

AWS Console - Signup

Edit description

portal.aws.amazon.com

Getting Started

Install Amplify CLI and Configure

The Amplify Command Line Interface is a toolkit to create AWS services for your app. Install Amplify CLI using below command.

npm install -g @aws-amplify/cli

Once installed, it’s time to setup the CLI. Before do any configurations, you need to sign into the AWS console. Then configure Amplify by running the below command.

amplify configure

Now Amplify CLI will ask you to create an IAM user.

After adding the region and username, go to the AWS console which opens up and you will see a screen like below attached screen. Then create the user from there onwards.

Click next and go to 2nd step to add permissions to the user and click on next.

Then you will be directed to 3rd step where you can add tags. This is an optional step. Click on next to review the filled data.

Once reviewed, you can click on Create User button to create the user.

Then you will see the created user along with secret key and access ID. Once the user is created, Amplify CLI will ask you to provide the accessKeyId and the secretAccessKey to connect Amplify CLI with your newly created IAM user.

Now let’s build our React application.

Create a React App

Create a React application using npx create-react-app amplify-login-react-app

After creating the application, it is time to initialize Amplify in the application by running this command from the root of the project.

amplify init

When you initialize Amplify, a prompt will open up with some information about the app.

Install Amplify Libraries

Then install Amplify library and Amplify React UI components using below command.

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

Add Authentication

The Amplify framework uses Amazon Cognito as the ideal authentication provider.

Let’s add authentication to our application by creating an authentication service using this command.

amplify add auth

Now, let’s deploy the created authentication service to our AWS account. To deploy the service use push command as in below.

amplify push

This will deploy our service in AWS and creates a configuration file called aws-export.js in our source folder.

Configure Amplify in the App

In order to add the auth service to our React app, edit the index.js file by adding Amplify.configure(awsconfig); after the imports.

Next, import Authenticator component to your App.js file and wrap the application with the Authentication component.

Now everything is ready so let’s test the app. You can use npm run start to run the application. You will see a login page which is a pre-built Amplify UI.

Before login, we need to create an account. Navigate to create account and create a user account.

When creating an account, username should be an email since we added the configuration as Email for sign in option when we create the auth service.

Once you create the account, AWS will send an email with a confirmation code. Enter that verification code and sign in to the account. Now the user is created and you will be logged in to your account.

You can see the newly created user in Cognito user pool by navigating to Cognito service in AWS console.

Since we used the AmplifySignOut component in the app, we have the functionality of sign out from the app also.

Apart from sign in and sign up, there are more functionalities provided by the AWS Amplify to build a up and running authentication flow quickly in real world. For more information on Amplify components please refer to this API documentation.

Check out the full implementation of this app using 👉 this GitHub link and drop a 👏 if you find this helpful. Thank you!😃

References

https://docs.amplify.aws/start/q/integration/react/

#React #aws #Amplify #auth #login