Voiced by Amazon Polly |
Overview
In the previous blog, we created and configured the AWS Cognito User pool. There, we learned how to create a sample react.js application and did a basic configuration of the AWS Cognito User pool in react.js. In this blog, we will learn how to register the user in the AWS Cognito use pool from react.js using the ‘amazon-cognito-identity-js’ library.
Customized Cloud Solutions to Drive your Business Success
- Cloud Migration
- Devops
- AIML & IoT
Introducing ‘amazon-cognito-identity-js’
‘amazon-cognito-identity-js’ is the SDK that allows JavaScript-enabled applications to authenticate the users, view user details, delete users, update users and register the users. It also permitted password change for authenticated users and forgot password functionality.
Guide to creating a component
Step 1: Create the “Components” folder in the src directory.
Step 2: Create a “Register.js” file in the src/Components directory.
Step 3: Add the following code to the “Register.js” file
The below code snippet is for the simple UI of the registration page where we are asking Username, email, and password for registration.
On every textbox 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 Signup method of the AWS Cognito.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import { CognitoUserAttribute } from 'amazon-cognito-identity-js'; import { useState } from 'react'; import UserPool from '../UserPool'; function Register() { const [username, setUsername] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const onSubmit = (e) => { e.preventDefault(); const attributeList = []; attributeList.push( new CognitoUserAttribute({ Name: 'email', Value: email, }) ); UserPool.signUp(username, password, attributeList, null, (err, data) => { if (err) { console.log(err); alert("Couldn't sign up"); } else { console.log(data); alert('User Added Successfully'); } }); }; return ( <div> <form onSubmit={onSubmit}> UserName: <input type="text" value={username.toLowerCase().trim()} onChange={(e) => setUsername(e.target.value)} /> <br /> Email: <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> <br /> Password: <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> <br /> <button type="submit">Register</button> </form> </div> ); } export default Register; |
Step 4: Add route in App.js file
In this step, we are setting up the routes for the registration page.
We are importing the Register component from the ‘./Components/Register.
Setting up the ‘/register’ as a path and <Register /> component as an element.
Whenever the user hits the http://localhost:3000/register on the browser, it will render our Register component on the browser.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { BrowserRouter, Route, Routes } from 'react-router-dom'; import './App.css'; import Register from './Components/Register'; function App() { return ( <BrowserRouter> <Routes> <Route path="/register" element={<Register />} /> </Routes> </BrowserRouter> ); } export default App; |
Step 5: Run the application and open http://localhost:3000/register
Step 6: Fill in the details and click on the Register button and check your AWS Cognito
Reload the Users tab in Cognito Console to check the registered user list.
AWS Cognito with React JS (#3 Login)
In the next step, we will implement login functionality to authenticate the user in our application.
Conclusion
In this blog, we created a register component to allow the user to do registration using the AWS Cognito service with the serverless application (React.js). AWS Cognito has many everyday use case scenarios, such as accessing AWS AppSync resources, authenticating with a third party and accessing AWS services with an identity pool, accessing resources with AWS API Gateway and Lambda user pool, and many more.
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. How can we add additional attributes along with a Username and password?
ANS: – We can add additional attributes with their value in attributeList while calling the signup method of the AWS Cognito User Pool.
2. Can we pass the email address in the username field?
ANS: – Yes, we can use the email addresses in the username field instead of giving a separate username. We can archive this goal via passing the email address as username attributes in the signup method of the AWS Cognito User Pool.
WRITTEN BY Mayur Patel
Comments