How to Add User Info into DynamoDB With Cognito Authentication Using Amplify

How to Add User Info into DynamoDB With Cognito Authentication Using Amplify
December 6, 2021

1.   What is Amplify and Cognito?

  • ➔ Amplify and Cognito are Amazon Web Services.
  • ➔  Amplify is used to build web applications through the latest stacks and is more centric for frontend developers as it provides a step-by-step guide to build backend services easily.
  • ➔ On the other hand, Cognito is a service used for user registration and user authentication purposes for an application, ensuring 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 the development phase.

2.    What is our use case?

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

3. Configuring Amplify and Creating React Basic App

  • ➔ Install amplify using the following command
Installing amplify
  • ➔ Configure amplify by running amplify configure. This will redirect you to our aws account for sign-in, after which you can create an aws profile which will again redirect you to the aws account for creating an 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 successfully creating the role, provide your AWS account’s access and secret keys.
Amplify configure
Amplify configuration
  • ➔Creating react app and launching the app on the local host to check its working
Creating react app cognito react
cd-cognito react
npm start
Creating react app and launching the app on local host
  • ➔ Initializing amplify project and providing required information as given below in the following screenshots. You can also configure it as per your requirements.
Initializing amplify project and providing required information
  • ➔ Select the authentication profile you configured in the above steps, or you can create a new profile in this step.
Selecting the authentication profile
  • ➔ After completing these steps, you can find the Cloudformation template below in your Cloudformation dashboard. This step is important to ensure that the AWS account is configured correctly.
Ensuring AWS account configuration

➔ Add the following amplify and UI for react libraries

Add following amplify and UI for react libraries

4. Adding Cognito Authentication to our project

  • ➔ Run the following command to add authentication to our project
Amplify add auth
  • ➔ Use default configuration or manually configure cognito user pool.
Use default configuration or manually configure cognito user pool
  • ➔ Select a way for the user to login into his/her account. In our project, we only use email to log into the account. You can also add more than one way to log in and configure more advanced settings for authentication.
Log in details to the account
Advanced settings configuration
  • ➔ 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.
Pushing configuration to AWS cloud account
  • ➔ 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. After logging in, you can also add some content to the app. Destructure props signOut and user. Below is the example screenshot for the signOut function used in a button to log out.
Importing cognito user pool configuration
  • ➔ Relaunch the app by running the command npm start and registering the account by clicking create account.
npm account registration
  • ➔ After clicking on create account, a code will be sent to your respective email id. Enter the code, and you are good to go.
Sign up confirmation

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

Main page after sign up

5. Adding an API to our project

  • ➔ Run the following command to add API to our app
Add api to app
  • ➔ 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 runtime for the lambda function. You can also configure it as per your requirements.
configure properties for the api to set-up
  • ➔ Configuring DynamoDB table
Configuring DynamoDB table
Choosing partition key to the table
Adding dynamoDB table locally
Configure advanced settings
Successfully added resource userInfoLambda locally
  • ➔ 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.
Editing Lambda function
  • ➔ Now again, run amplify push to push the configured settings in the cloud, and amplify will again prompt the changes you will make and whether to push the configuration.
Run amplify push to push the configured settings in the cloud
  • ➔ 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.
Create a simple form application
  • ➔ This is what our page will look like after modifying the frontend.
Page frontend after modification
  • ➔ 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.
Adding user info

➔ 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 useful in creating an overall application from scratch with the backend configured with the help of built-in settings and options available to develop the frontend with the latest technologies. It is also helpful in providing an overall authentication to our app using Aws Cognito, which ensures safety from various threats, gives accountability to manage user databases in the form of user pools, and gives ease on the development side. For further help or any inquiry 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

gen ai evolution of cloud computing

Future-Proofing Infrastructure: How Generative AI Shapes the Evolution of Cloud Computing 

The reality of cloud computing stands at the edge of a vast transformation, all thanks to the emergence of Generative […]

cloud computing security

What are the security issues in cloud? 

What is cloud?  Cloud computing refers to the delivery of computing services, including servers, storage, databases, networking, software, analytics, and […]

generative ai

Journey into the World of Generative Artificial Intelligence

Generative AI, the new wave in the dynamic landscape of cloud based artificial intelligence. Gen AI has smoothly emerged as […]