Backendless with AWS Cognito, DynamoDB and ReactJs — Starter Project

In this guide, we’ll navigate the creation of a secure React application on AWS, focusing on user authentication through Cognito, data storage via DynamoDB, and effortless integration using Amplify. Our goal is a serverless product-management app, allowing users to list, add, update, and remove products. From initializing the React app to configuring AWS resources, we’ll walk through each step, ensuring your application remains secure and scalable without the need for a traditional backend setup.

As a part of this blog, we will be creating all the resources required for AWS and React. We will be using the premise of creating a product-management-app, so all our names will be in accordance with it. Also, our approach is to create AWS resources directly with a nodejs script, eliminating manual work.

Outline

1. Initialization and Setup: We begin by initializing our React application using create-react-app and ensuring that our AWS CLI is properly configured. Additionally, we clone a repository containing the necessary scripts and setup files.

2. AWS Resource Creation: Next, we create essential AWS resources manually or through a Node.js script. These include a Cognito User Pool with default password policies, an Identity Pool linked to the User Pool, and a DynamoDB Table for storing product data. We also define user roles and attach them to the Identity Pool for access control.

3. Configuration and Installation: With the AWS resources in place, we configure environment variables, install dependencies, and update configuration files within our React application. This includes configuring authentication settings and setting up CRUD logic for DynamoDB operations.

4. Application Deployment: After setting up the application, we deploy it locally and proceed to create a sample user in the Cognito User Pool. With basic authentication configured, we can access the application’s login screen using the withAuthenticator HOC provided by the aws-amplify/ui-react library.

5. User Authentication and Operations: Upon logging in, users can perform various operations such as creating new records and fetching existing ones. However, certain operations like updating records are restricted based on the user’s role. To enable update operations, we create an admin group and attach it to the user in the User Pool settings.

Assumptions

1. AWS CLI Access

2. Git is installed and the repository is accessible : https://github.com/priyank-R/aws-cognito-resourcesy

Creating AWS Resources

1. Clone the Repository:

a. This repository has all the code required for the initialization of AWS-resources and referring to the react-application setup.

2. Configure ProductAppResources\.env:

a. You can choose to name the resources in the .env file of keep them as it is. But your ACCOUNT_ID will be required for the script to run successfully.

3. Run the script:

a. Before running the script, open the terminal and login to your aws account through AWS CLI.

b. Once you are logged in, in the same terminal session, go to the root of the repository/ProductAppResources and run the script

npm run create

Output of the script:

4. Validate your AWS resources

5. Create a sample user in Cognito User Pool:

a. You will be asked to reset the password by cognito when you first login.

React Application Configuration

1. We already have a react app created in this sample project that you can use for understanding the flow.
2. Install dependencies in the sample app:

3. Update product-management-app\.env:

4. Run the application:

npm run start

5. Login to the application

a. The login screen appears since we have used the withAuthenticator HOC provided by aws-amplify/ui-react library.

b. It managed end-to-end login flow without the need for us to manually create an components / flows.

6. Login with the user you created in your Cognito User Pool:

7. Perform operations — You will be allowed to perform:

a. Create new record

b. Fetch all records

8. You will not be allowed to perform: Update Record

a. Reason: You are an authenticated user who does not have the permissions for Update.

9. Create new group: admin

a. To allow our user or new users to perform UPDATE operation, we have created our cognito configuration such that we need to assign the user Admin role.

b. Based on your preferences, you can create groups with any names and assign the policies that you want the user belonging to a certain group to access.

c. You can find this option of creating a new group in your User Pool settings

10. Attach the admin group to your user

11. Refresh the application

12. Record should update successfully

By following this guide, you’ll have successfully built a secure and scalable web application on AWS using Cognito, DynamoDB, and Amplify integration. This serverless architecture eliminates the need for managing backend infrastructure while providing robust security and scalability for your application.

Priyank Rupareliya is a Senior Software Engineer focused on architecting solutions revolving around Cloud, DevOps, Containerization, Backend and Frontend.