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.

• ➔Creating react app and launching the app on local host to check its working

• ➔ Initializing amplify project and providing required information as given below in the following screenshots. You can also configure as per your requirements.

• ➔ Select the authentication profile which you configured as in the above steps or you can create a new profile in this step itself.

• ➔ 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.

➔ Add following amplify and UI for react libraries

4. Adding Cognito Authentication to our project

• ➔ Run following command to add authentication to our project

• ➔ 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 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.

• ➔ 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.

• ➔ 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.

• ➔ Launch app again by running command npm start and register account by clicking on create account.

• ➔ After clicking on create account a code will be send to your respective email-id, enter the code and you are good to go

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

5. Adding an API to our project

• ➔ Run following command to add api to our 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 a runtime for lambda function. You can also configure as per your requirements.

• ➔ Configuring DynamoDB table

• ➔ 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.

• ➔ 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.

• ➔ 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.

• ➔ This is what our page will look like after modifying the frontend.

• ➔ 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.

➔ 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