Apps Development, AWS, Cloud Computing

3 Mins Read

AWS Cognito with React JS (Session and Logout) – Part 4

Voiced by Amazon Polly

Overview

In my previous blog, we learned how to verify the user in the Cognito user pool and how to log in the user in our application using ‘amazon-cognito-identity-js’. In this blog, we will learn how to manage the state or session of a logged-in user and how to log out the user from the application using the ‘amazon-cognito-identity-js’ library.

Customized Cloud Solutions to Drive your Business Success

  • Cloud Migration
  • Devops
  • AIML & IoT
Know More

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: Create an Account.js file in src/Components directory and follow the code snippet in the file.

 This code snippet is for Central session management. We can use it in every component. In this component, we will get the current session information using getCurrentUser method in getSession function. And in authenticating function, we will authenticate the user. And Logout function is to log out the user from the application.

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

This code snippet is to get the user’s current session using the getSession function which we created in the last step. And on the UI, we are displaying the current status of the user using HTML code.

Step 3: Modify the App.js

 This code snippet is for wrapping the whole application with the Account component to use all the function of the Account component in every component of the application.

<Status /> is to display the current stage of the user whether it is logged in or not.

Step 4: Modify the Login.js file

In this step, we are modifying the login page and will call authenticate method of the Account component to log in.

Conclusion

In this blog, we learn how to manage the state or session of logged in users and how to log out the user from the application using the ‘amazon-cognito-identity-js’ library.

Source Code

In my next blog, we will see how to implement change password functionality in our application. 

 

Get your new hires billable within 1-60 days. Experience our Capability Development Framework today.

  • Cloud Training
  • Customized Training
  • Experiential Learning
Read More

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is the first Indian Company to win the prestigious Microsoft Partner 2024 Award and is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 850k+ professionals in 600+ cloud certifications and completed 500+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training PartnerAWS Migration PartnerAWS Data and Analytics PartnerAWS DevOps Competency PartnerAWS GenAI Competency PartnerAmazon QuickSight Service Delivery PartnerAmazon EKS Service Delivery Partner AWS Microsoft Workload PartnersAmazon EC2 Service Delivery PartnerAmazon ECS Service Delivery PartnerAWS Glue Service Delivery PartnerAmazon Redshift Service Delivery PartnerAWS Control Tower Service Delivery PartnerAWS WAF Service Delivery PartnerAmazon CloudFront Service Delivery PartnerAmazon OpenSearch Service Delivery PartnerAWS DMS Service Delivery PartnerAWS Systems Manager Service Delivery PartnerAmazon RDS Service Delivery PartnerAWS CloudFormation Service Delivery PartnerAWS ConfigAmazon EMR and many more.

FAQs

1. Can we display the logged-in user’s username or email?

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.

2. Can we redirect the user to login page after logout?

ANS: – Yes, we can redirect the user to the login page once the user is logged out from the application. We can use navigate or normal javascript method (window.location.href) 

WRITTEN BY Mayur Patel

Share

Comments

    Click to Comment

Get The Most Out Of Us

Our support doesn't end here. We have monthly newsletters, study guides, practice questions, and more to assist you in upgrading your cloud career. Subscribe to get them all!