Building Robust User Sign-Up with AWS Cognito and React

Introduction

Cognito by Amazon is a solution for authentication, authorization, and user management for mobile and web applications.

The main components of AWS Cognito are:

• User Pools
• Identity Pools

User Pools

A user pool is a user directory in Amazon Cognito. It stores user profile information, such as username, email, and phone number. You can get sign-up, and sign-in features for your application, as well as security features to handle passwords.

Identity Pools

An identity pool is a store of user identity information that is returned from federated identity providers, such as Amazon Cognito User Pools or other identity providers supported by Amazon Cognito. An identity pool provides AWS credentials to access other AWS services. "Federated identity" means users can obtain temporary, limited-privilege AWS credentials to access AWS services, such as Amazon S3 or Amazon DynamoDB.

For this tutorial, we are going to implement User Pools and enable users to Sign Up and Sign In.

Setting Up User Pool for Amazon Cognito

Navigate to Amazon Cognito

To begin setting up AWS Cognito, log in to the AWS Management Console and navigate to the Amazon Cognito service. From here, you will be able to create and manage User Pools and Identity Pools for your application.

Step 1: Configure Sign-in Experience

a. Authentication Providers
You will have the option to enable different authentication providers, such as email, phone number, and social identity providers like Facebook and Google. Additionally, you can customize the look and feel of the sign-in page by modifying the branding and styling options.

b. Cognito user pool sign-in options
You can choose one or multiple options, such as username, email, and phone number. If you only select one attribute or a username with another attribute, users will be able to sign in using all the selected options. If you only choose a phone number and email, users will be prompted to choose one of these two sign-in options during the sign-up process.

Step 2: Configure security requirements

a. Create a Password Policy
You can define the length and complexity requirements for the passwords used by your users. You can specify the minimum length, the number of required uppercase and lowercase characters, and other constraints such as the requirement for numbers, symbols, or non-alphabetic characters.

b. Multi-Factor Authentication (MFA)
You can enhance the security of your application by enabling multi-factor authentication (MFA) during the user sign-in process. MFA requires users to provide an additional form of authentication beyond their password, such as a code sent via text message or generated by an authenticator app. Note that the MFA settings you configure will apply to all app clients associated with your User Pool. For now, we are gonna disable MFA.

c. Configure User Account Recovery
You can set up how users will recover their accounts in the event that they forget their passwords. It is recommended to enable self-service account recovery, as it allows users to reset their own passwords in a convenient manner. Another choice is how your User Pool will deliver messages to users when they request an account recovery code. You can select either SMS messages (charged separately by Amazon SNS) or email messages (charged separately by Amazon SES).

Step 3: Configure the sign-up experience

Self-Service Sign-Up allows users to sign up for an account on their own, without the need for administrator intervention. Attribute Verification verifies the validity of the information provided by users during the sign-up process, such as their email address or phone number.

a. Specify Required Attributes
You can select the attributes that are required when a new user is created in your User Pool. These are the minimum pieces of information that a user must provide in order to sign up for an account. By default, Cognito assigns all users a set of standard attributes based on the OpenID Connect (OIDC) standard, but you can add additional attributes as needed.

Step 4: Configure message delivery

In this step, you can set up how Amazon Cognito will send messages to your app users. Cognito uses Amazon Simple Email Service (SES) to send email messages and Amazon Simple Notification Service (SNS) to send SMS messages.

You have the option to use Cognito's default email address as a temporary start for development, which allows you to send up to 50 emails per day. Alternatively, you can set your own reply-to email address to have greater control over the appearance and branding of the emails sent from your app.

Note: If you set an invalid reply-to address, there is a risk of sending restrictions being imposed on your account. It is important to ensure that the reply-to address you set is valid and properly configured.

Step 5: Integrate your app

You will set up app integration for your Amazon Cognito User Pool. Choose a name that is descriptive and easily recognizable to you and your team, so that it is easy to find and manage your user pool.

Unless you want to use Cognito's Hosted UI and OAuth 2.0 server for user sign-up and sign-in flows, do not check “Use the Cognito Hosted UI”.

The app client represents a single platform or app that has permission to call unauthenticated API operations in your user pool. By configuring an app client, you are specifying the settings that determine how the app will interact with Amazon Cognito.

A client secret is used by the server-side component of an app to authorize API requests. By choosing to use a client secret, you can prevent unauthorized third parties from impersonating your client.

Step 6: Finish creating User Pool

In this final step, you will review all the selections you have made for your Amazon Cognito User Pool and configure any necessary settings. Once you have reviewed your selections and are satisfied, you can choose the "Create user pool" button to confirm and create your user pool.

Step 7: Copy the User Pool ID

Once your Amazon Cognito User Pool is created, you will be able to access its details page, where you can find the User Pool ID. This ID is a unique identifier for your user pool, and you will need it to integrate your application with the user pool. To copy the User Pool ID, simply select it and copy it to your notepad.

Step 9: Copy Client ID

In the details page of your Amazon Cognito User Pool, you will also find the Client ID for each of your app clients. The Client ID is a unique identifier for your app client, and you will need it to integrate your application with the user pool. To copy the Client ID, simply select it and copy it to your notepad.

Integration with React project

To integrate Amazon Cognito with a React project using the amazon-cognito-identity-js library, you can follow these steps:

Step 1

Install the library by running npm install amazon-cognito-identity-js in your project directory.

Step 2

Import the necessary modules in your React component files, such as CognitoUserPool, CognitoUserAttribute, and AuthenticationDetails.

import { CognitoUserPool } from 'amazon-cognito-identity-js';

Step 3

Create an instance of the CognitoUserPool class, passing in your user pool id and client id.

const poolData = {

    UserPoolId: 'Your User Pool ID',

    ClientId: 'Your Client ID',

  };

const UserPool = new CognitoUserPool(poolData);

Step 4

Call the sign up method on the CognitoUserPool instance, passing in the desired email, username, password, name, and gender.

UserPool.signUp(

      email,

      password,

      [

        { Name: 'name', Value: name },

        { Name: 'preferred_username', Value: username },

        { Name: 'gender', Value: gender },

      ],

      null,

      (err, data) => {

        if (err) console.error(err);

        console.log(data);

      }

    );

Step 5

Integrate the code with your app or you can just clone the code from the repo:
Client Git repo:

https://github.com/awanshrestha/aws-cognito-client

By cloning the accompanying GitHub repository, you will have successfully set up an AWS Cognito User Pool and integrated it with a React app. The repository is fully functional and can be run locally with the correct configuration details.

Conclusion

In conclusion, setting up an AWS Cognito User Pool and integrating it with a React app is a great way to add user authentication to your application. With this setup, you can ensure that your app users' data is secure and provide a convenient way for users to sign up for your app.

So, whether you're a seasoned developer or just getting started, AWS Cognito is definitely worth considering for your next project.