Integrate the AWS Cognito Service with React JS: The #1 Application Setup- Part 1

Introduction to AWS Cognito Service?

Amazon Cognito is a simple user identity and data synchronization service that helps you securely manage and synchronize app data for your users across their mobile devices. You can create unique identities for your users through several public login providers (Amazon, Facebook, and Google) and support unauthenticated guests. In addition, you can save app data locally on users’ devices, allowing your applications to work even when the devices are offline.

Freedom Month Sale — Upgrade Your Skills, Save Big!

Up to 80% OFF AWS Courses
Up to 30% OFF Microsoft Certs

Act Fast!

React JS?

React JS is an open-source JavaScript library for developing website user interfaces. React JS allows us to create reusable UI Components.
Here is a step-by-step guide to help you set up Amazon Cognito.

Prerequisites

Running React JS app (Getting Started)
AWS Account with Administrator access (Getting Started)
Basic knowledge of JavaScript

Setting up AWS Cognito

Step 1: Open Amazon Cognito Console (Console)

Step 2: Click on create User Pool

Step 3: Select Username and Email as sign-in options and click on Next

Step 4: Select No MFA in the Multi-factor authentication section and click on Next

Step 5: Leave all settings default in Configure sign-up experience and click on Next

Step 6: Select Send an email with Cognito option in Configure message delivery step and click on Next

Step 7: Enter User pool name (eg. cognitoWithReact), enter app client name (eg. cognitoWithReactClient) and click on Next

Step 8: Review all the selections and click on Create User Pool.

Step 9: Click on your user pool name

Step 10: Select App integration, click on Actions and select Create Cognito domain

Step 11: Give domain name and click on Create Cognito domain

Step 12: Copy User Pool ID Client ID and save them in Notepad for future use

Setup React JS App

Step 1: Run your react js app using “npm start”

npm start

Step 2: Install required dependencies

1	npm install amazon–cognito–identity–js

amazon-cogntio-identity-js is an SDK that allows JavaScript-enabled applications to sign-up, authenticate users, view, delete and update the user attributes within the Amazon Cognito Identity service.

1	npm install react–router–dom

react-router-dom is a lightweight, fully-featured client-side and server-side routing library for React to build user interfaces. React router dom is running anywhere React runs, on the web, on the server with node.js, and React Native.

Step 3: Create UserPool.js file in /src directory and paste the following code and replace your User Pool Id and Client Id

Userpool ID : You can find Userpool id from AWS Cognito

Client ID: You can find client id from AWS Cognito Application

import { CognitoUserPool } from ‘amazon-cognito-identity-js’;

const poolData = {

UserPoolId: ‘Enter your Userpool ID’,

ClientId: ‘Enter your Client ID’,

};

export default new CognitoUserPool(poolData);

Source Code

You can find the complete application code on GitHub from here

After cloning the code, run the following commands and change your user pool details in the UserPool.js file, located in /src directory

npm install (It will install all required dependencies)
mpm start (It will start your React application)

1 2	npm install npm start

Takeaway

With Amazon Cognito, you can save any data in the AWS Cloud, such as app preferences or game state, without writing any backend code or managing any infrastructure. It means you can focus on creating great app experiences instead of worrying about building and managing a backend solution to handle identity management, network state, storage, and sync.

Freedom Month Sale — Discounts That Set You Free!

Up to 80% OFF AWS Courses
Up to 30% OFF Microsoft Certs

Act Fast!

About CloudThat

CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.

FAQs

1. Why React.JS?

ANS: – React JS allows you to create a web application that can change the data without reloading the whole web page. React JS uses JSX that allows HTML quoting and uses that HTML tag syntax to render subcomponents.

2. Why AWS Cognito service?

ANS: – AWS Cognito service lets you quickly add user sign-up and authentication to your web and mobile application. AWS Cognito also enables you to authenticate users through external identity providers like Google, Microsoft, Facebook, etc. It also provides temporary security credentials to access your app’s backend resources using Amazon API Gateway.

WRITTEN BY Mayur Patel

Mayur Patel works as a Lead Full Stack Developer at CloudThat. With solid experience in frontend, backend, database management, and AWS Cloud, he is a versatile and reliable developer. Having hands-on expertise across the entire technology stack, Mayur focuses on building applications that are robust, scalable, and efficient. Passionate about continuous learning, he enjoys exploring new technologies daily and actively shares his knowledge to foster growth within his team and the broader community. Mayur’s practical approach, strong teamwork, and drive for innovation make him an invaluable member of every project he undertakes.