Apps Development, AWS, Cloud Computing

3 Mins Read

Verify the User and Login using AWS Cognito with React JS – Part 3

Voiced by Amazon Polly

Overview

In my previous blog, we learned how to integrate the registration process of AWS Cognito in react.js. We created a signup component and configured it with User Pool. In this blog, we will learn the user verification process and a detailed guide to logging in to the user in the AWS Cognito user pool from react.js using the ‘amazon-cognito-identity-js’ library.

Introduction to 'amazon-cognito-identity-js'

‘amazon-cognito-identity-js’ is the SDK that allows a JavaScript-enabled application to authenticate the users, view user details, delete users, update users and register the users. It also allows password change for authenticated users and forgot password functionality.

Steps to Create a Component

Step 1:

  • Modify the Register.js file for a simple UI to verify the user.
  • This code snippet is for simple UI of signup and verifying the user page, where we ask OTP to confirm the user.
  • On every change event, we store the value in the respective state so we can use it for the login process.
  • After the successful signup, one email with a verification code will send to the registered email address.
  • Click on the Verify button “verifyAccount” and it will call the confirmRegistration method of the AWS Cognito. And on the success of verifying the account webpage will redirect to ‘/login.’

Step 2: Create a ‘Login.js’ file in the src/components directory

Step 3: Add the following code to Login.js file

  • This code snippet is for the simple UI of the login page. Where we are asking username and password.
  • On every change event, we store the value in the respective state so we can use it for the signup process.
  • On the click of Submit button, “onSubmit” will call the Login method of the AWS Cognito.

Step 4: Add route in App.js file

  • In this step, we are setting up the routes for the login page.
  • We are importing the Login component from the ‘./Components/Login.
  • We are setting up the ‘/login as a path and <Login /> component as an element.
  • So, whenever the browser hit the http://localhost:3000/login it will render our Login component on the browser.

Step 5: Run the application and open http://localhost:3000/register

Step5Part3

Step 6: Fill in the details and click on the Register button and check your AWS Cognito

Step 7: Enter the OTP(Received via mail) and click on verify button

Step 8: Enter the username and password on the login page.

Conclusion

In my next blog, we will see how to implement session management in the application and also see how to log out the user from the application.

Source Code

About CloudThat

CloudThat is also the official AWS (Amazon Web Services) Advanced Consulting Partner and Training partner and Microsoft gold partner, helping people develop knowledge of the cloud and help their businesses aim for higher goals using best-in-industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

Drop a query if you have any questions regarding AWS Cognito, ReactJS and I will get back to you quickly.

To get started, go through our Consultancy page and Managed Services Package that is CloudThat’s offerings.

FAQs

1. Can we verify the user using an email link instead of OTP?

ANS: – Yes, we can verify the user using an email link instead of OTP. For this, we need to configure the Cognito user pool. General Settings => Message Customization => Verification Type Change verification type Code to Link.

2. Can we display user information on the page?

ANS: – Yes, we can display the user information on the page. Once the user is logged in, we will get the user information as a JSON object from the AWS Cognito User Pool. by parsing the JSON object, we can display the user information on the page.

WRITTEN BY Mayur Patel

Share

Comments

    Click to Comment