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.
3. Configuring Amplify and Creating React Basic App
- ➔ Install amplify using the following command
- ➔ 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.
- ➔Creating react app and launching the app on the local host to check its working
- ➔ Initializing amplify project and providing required information as given below in the following screenshots. You can also configure it as per your requirements.
- ➔ Select the authentication profile you configured in the above steps, or you can create a new profile in this step.
- ➔ 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.
➔ Add the following amplify and UI for react libraries
4. Adding Cognito Authentication to our project
- ➔ Run the 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 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.
- ➔ 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. 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.
- ➔ Relaunch the app by running the command npm start and registering the account by clicking create account.
- ➔ After clicking on create account, a code will be sent 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 the 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 runtime for the lambda function. You can also configure it 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 will 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 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
