TABLE OF CONTENT
1. Introduction to AWS Cognito Service2. ReactJS3. Prerequisites4. Setup Amazon Cognito5. Setup ReactJS App6. Source Code7. Takeaway8. CloudThat 9. FAQs Introduction to AWS Cognito Service
Amazon Cognito allows you to securely manage and sync app data across your users’ mobile devices. You can create unique identities through multiple public login providers (Amazon and Facebook) and allow unauthenticated guests to access your users’ data. You can also save app data locally to users’ devices, which allows your applications to run even when they are offline.
ReactJS?
React JS is an open source JavaScript library that allows you to create website user interfaces. React JS makes it possible to create reusable UI components.
Prerequisites
Running React JS app (Getting Started)
AWS Account with Administrator Access (Getting Started).
JavaScript basics
AWS Cognito:
Step 1: Open Amazon Cognito Console (Console)
Step 2: Click Create User Pool
Step 3: Choose Username and Email to sign-in and click on Next
Step 4: Click Next and select No MFA from the Multi-factor authentication section.
Step 5: Click Next to remove all settings from Configure sign up experience.
Step 6: Click on Next to select Send an email using Cognito in Configure message delivery step.
Step 7: Enter the User pool name (eg. Step 7: Enter User pool name (eg. cognitoWithReactClient) and click on Next
Step 8: Go through all selections and click on Create User Pool.
Step 9: Click on the name of your user pool
Step 10: Click on App integration, then click on Actions, and choose Create Cognito domain
Step 11: Enter domain name and click on Create Cognito Domain
Step 12: Copy the User Pool ID Client ID, and save them in Notepad so they can be used again.
Install React JS App
Step 1: Use “npm start to run your react js application
Step 2: Install the dependencies you need
npm install amazon-cognito-identity-js1npm install amazon-cognito-identity-jsamazon-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.
npm install react-router-dom1npm install react-router-domreact-router-dom is a lightweight, fully-featured client-side and server-side routing library for React to build user interfaces. React router dom runs anywhere React runs: on the web, on a server with node.js and React Native.
Step 3: Create a UserPool.js directory file and copy the following code. Replace your Client Id and User Pool Id with the following code
Userpool ID: You can find your Userpool ID from AWS Cognito
Client ID: You can find your client ID from the 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);123456import 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
The complete application code can be found on GitHub here
After cloning your code, run these commands to modify your user pool details in UserPool.js, located in the /src directory
npm-install (It will install all dependencies).
mpm start (It will launch your React application).

npm installationnpm start12npm installernpm begin
Takeaway
Amazon Cognito allows you to save any data in AWS Cloud such as app preferences and game state without having to write any backend code. This allows you to focus on creating great apps and not worrying about managing backend infrastructure.