AWS-User SignUp/Login using AWS-Congnito

Introduction: User authentication is a critical aspect of web application development. AWS Cognito provides a secure and scalable solution for managing user signups, logins, and authentication flows. In this blog post, we will explore how to integrate AWS Cognito into a React.js application to enable user registration and login functionality. We will cover the steps involved in setting up an AWS Cognito user pool, implementing the signup and login forms, and performing authentication using AWS Cognito.

Prerequisites:

• Basic knowledge of React.js and JavaScript
• An AWS account

Setting up AWS Cognito User Pool:

1. Create a new AWS Cognito user pool in the AWS Management Console.
2. Configure the necessary settings and take note of the User Pool ID and App Client ID, as we will need these later for our React application. setting to configure such as —

• sign-in options as Email
• password policy
• No MFA enforcement for this tutorial
• choose Send email with cognito option under Email section choose to send the confirmation code to user’s email id
• pool name
• app client name.

Step 1

• Create react app and install the dependencies by running following commands in terminal

npx create-react-app aws-cognito
cd aws-cognito
npm install aws-amplify aws-amplify-react react-router-dom

Step 2 :

• Set up AWS Amplify: inside src folder create aws-config.js and the following content in it

• In the App.js file add the following code to configure AWS-Cognito

Step 3:

• Create a new folder ‘screens’ inside src and create a new SignUp.js component. Create a simple form with two input boxes for email and password and a submit button.

• create a ‘handleSignUp’ funciton to submit the form and call Auth.signUp({username:’emailId’, password:’userpassword’}) of cognito to register a new user in the aws-cognito pool that we have set up in the beginning.

• Create a ‘useState’ hook to handle the ‘ConfirmSignUp.js’ screen to enter and submit the confirmation code to aws-cognito to verify the user email id and marked it as confirmed in the pool. So that user can login afterwards.
• Create a new file ConfirmSignUp.js. Create a new form which with one input field and a button to submit the confirmation code to aws-cognito api. Here is full code for ConfirmSignUp component. Auth.confirmSignUp(email, confirmCode) is used to send the request to cognito to verify and confirm the email id. Also useNavigate hook is used to navigate the user to Login page which we will create next.

• here is full code snippet of SignUp.js component

Step4:

• Create a new component called Login.js to allow the user to login to home page.
• We will create a ‘handleLogin()’ which will call the Auth.signIn(email, ,password) to authenticate the user and check if email is verified or not. If it is verified then it will redirect the user to Home page, otherwise it show the error ‘User is not confirmed’.

Step5:

• In the Home component we will use the ‘Auth.currentUserInfo()’ to current the logged in user information like email id, email_verified, and sub (userId). here is complete code snippet

That is whole code snippet with simple implementation of aws-cognito. You can update the code accordingly to your needs

If you need the full code, you can check out this GitHub link. And if you have any questions or just want to say hi, feel free to drop me a message. Now go forth and integrate the code to your app!