React Application To Add User Info Into DynamoDB With Cognito Authentication Using Amplify

December 6, 2021

React Application To Add User Info Into DynamoDB With Cognito Authentication Using Amplify

1.   What is Amplify and Cognito?

  • ➔ Amplify and Cognito are Amazon Web Services.
  • ➔ Amplify is used to build web applications through latest stacks and is more centric for frontend developers as it provides a step by step guide to build backend services at ease.
  • ➔ On the other hand, Cognito is a service which is used for user registration and user authentication purposes for an application which ensures overall security and accountability for the application owner. Cognito also helps reduce building authentication development for a developer such as sign-up, sign-in, sign-out, JWT session management, etc. So, in this way we are assured there are minimum error handling and bugs during development phase.

2.    What is our use-case?

  • ➔ We are going to build a web application which is going to allow only authenticated users to put or add user-info into the database.
  • ➔ We are going to use Amplify as an fullstack environment to deploy our frontend and backend to our cloud account, Cognito for authentication for our which we do not need to necessarily configure manually as amplify provides default method, React to build our frontend part, API Gateway to build Rest Api that will communicate between our Lambda function and our DynamoDb database.
  • ➔ Below is the architecture that explains our use case.

3. Configuring Amplify and Creating React Basic App

  • ➔ Install amplify using following command
  • ➔ Configure amplify by running amplify configure, this will redirect to our aws account for sign-in after which you can create aws profile which will again redirect you to aws account for creating a Iam role with admin permission for the execution of amplify commands through cli or you can use existing aws account which is already configured in your system. After successful creation of role provide the access key and secret key for your aws account.
Dynamodb
Dynamodb 4
  • ➔Creating react app and launching the app on local host to check its working
Dynamodb 5
Dynamodb 6
Dynamodb 7
Dynamodb 8
  • ➔ Initializing amplify project and providing required information as given below in the following screenshots. You can also configure as per your requirements.
Dynamobd 9
  • ➔ Select the authentication profile which you configured as in the above steps or you can create a new profile in this step itself.
Dynamodb 10
  • ➔ After successful completion of these steps, you can find the cloudformation template as given below in your cloudformation dashboard. This step is important to ensure whether the aws account is configured properly.
Dynamodb 11

➔ Add following amplify and UI for react libraries

Dynamodb 12

4. Adding Cognito Authentication to our project

  • ➔ Run following command to add authentication to our project
Dynamodb 13
  • ➔ Use default configuration or manually configure cognito user pool.
Dynamodb 14
  • ➔ Select a way for the user to login into his/her account. In our project we are using only email for logging into the account. You can also add more than one way to login as well as configure more advanced settings for authentication.
Dynamodb 15
Dynamodb 16
  • ➔ Now, we push all this configuration to our aws cloud account by running the following command. Amplify also prompts the changes we are going to make and whether to push the changes or not.
Dynamodb 17
  • ➔ Now, let’s open the App.js in the src of the root folder of our project and import Amplify and withAuthenticator from respective libraries. Also, import cognito user pool configuration as config from aws-exports and stylesheet for react as well. You can also add some content to show on the app after logged in. Destructure props signOut and user. Below is the example screenshot for the signOut function used in a button to logout.
Dynamodb 18
  • ➔ Launch app again by running command npm start and register account by clicking on create account.
Dynamodb 19
  • ➔ After clicking on create account a code will be send to your respective email-id, enter the code and you are good to go
Dynamodb 20

➔ Here is the main page of our app with a signout button.

Dynamodb 21

5. Adding an API to our project

  • ➔ Run following command to add api to our app
Dynamodb 22
  • ➔ Now we configure properties for the api to set-up. Below is the screenshot for the configured properties. In this project, we have used Rest Api and Nodejs as a runtime for lambda function. You can also configure as per your requirements.
Dynamodb 23
  • ➔ Configuring DynamoDB table
Dynamodb 24
Dynamodb 25
Dynamodb 26
Dynamodb 27
Dynamodb 28
  • ➔ Now edit lambda function by going into amplify → backend → function → src → app.js. Create a post method to put user info in dynamodb. Here “path” is /addUser as we specified during configuration. Below is the screenshot of the updated lambda function.
Dynamodb 29
  • ➔ Now again run amplify push to push the configured settings in the cloud and amplify will again prompt the changes you are going to make and whether to push the configuration.
Dynamodb 30
  • ➔ Create a simple form application and make a similar addUser function as given below which calls the post method with required parameters passed into the body.
Dynamodb 31
  • ➔ This is what our page will look like after modifying the frontend.
Dynamodb 32
  • ➔ Now click on the Add button after specifying the mentioned field and check whether the user info is added to our respective dynamodb. Here we can confirm from the below screenshot of the dynamodb dashboard that our app is running properly and hence our project’s use case is accomplished.
Dynamodb 33

➔ In the end, execute npm run build in the root folder terminal of our project so that we can push the build folder to the frontend environment of our amplify app using Github or Aws CodeCommit or else upload the build folder manually using the amplify console dashboard.

6. Summary

  • ➔ Amplify is really useful in creating an overall application from scratch with backend configured with the help of built in settings and options available to create frontend with latest technologies. It is also really helpful in providing an overall authentication to our app using Aws Cognito which ensures safety from various threats and gives accountability to manage user databases in the form of user pools as well as gives ease on the development side as well. For further help or any enquiry regarding this blog you can visit amplify docs or drop an email at shahid.adoni@rapyder.com.

Written by – Shahid Adoni

Cloud Computing Insights and Resources

What is a Hybrid Cloud Strategy? What are its Advantages?

A hybrid cloud strategy is a method that companies use to decide which portions of hybrid cloud infrastructure are most …

What is a Hybrid Cloud Strategy? What are its Advantages? Read More »

AWS Launches the Second Infrastructure Region in India – Hyderabad

On November 22, 2022, AWS launched its new AWS region in Hyderabad. The AWS Asia-Pacific Hyderabad region is the second …

AWS Launches the Second Infrastructure Region in India – Hyderabad Read More »

Three Ways Cloud is Improving Customer Experience

Three Ways Cloud is Improving Customer Experience 

Ever since the cloud rose to popularity in the 2000s owing to its various advantages over traditional computing, businesses have …

Three Ways Cloud is Improving Customer Experience  Read More »