Detailed Guide to Register a user in AWS Cognito with ReactJS – Part 2

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.

Freedom Month Sale — Upgrade Your Skills, Save Big!

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

Act Fast!

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.

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;

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>

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.

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;

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import './App.css';

import Register from './Components/Register';

function App() {

return (

</Routes>

</BrowserRouter>

);

}

export default App;

Step 5: Run the application and open http://localhost:3000/register

Step5

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.

Step6

AWS Cognito with React JS (#3 Login)

In the next step, we will implement login functionality to authenticate the user in our application.

Source Code

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.

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. 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

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.