Voiced by Amazon Polly |
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.
Customized Cloud Solutions to Drive your Business Success
- Cloud Migration
- Devops
- AIML & IoT
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”
1
|
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
1
2
3
4
5
6
|
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
Get your new hires billable within 1-60 days. Experience our Capability Development Framework today.
- Cloud Training
- Customized Training
- Experiential Learning
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 Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, AWS GenAI Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, Amazon ECS Service Delivery Partner, AWS Glue Service Delivery Partner, Amazon Redshift Service Delivery Partner, AWS Control Tower Service Delivery Partner, AWS WAF Service Delivery Partner, Amazon CloudFront Service Delivery Partner, Amazon OpenSearch Service Delivery Partner, AWS DMS Service Delivery Partner, AWS Systems Manager Service Delivery Partner, Amazon RDS Service Delivery Partner, AWS CloudFormation Service Delivery Partner, AWS Config, Amazon EMR and many more.
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
Comments