Chapter 4: User Management with Amplify Authentication

In this chapter, we will continue from where we left off in the previous chapter; that is, integrating the Amplify authentication UI with the Amplify authentication backend. Setting up the user management system correctly is critical for many businesses and websites because the security surrounding user information is very important. In this chapter, we will cover the following topics:

• Understanding AWS authentication
• Signing up for the ReactJS app
• Signing in and out of the ReactJS app
• Signing up for the Expo and React Native apps
• Signing in and out of the Expo and React Native apps

We will cover these points for a ReactJS project, an Expo project, and a React Native project.

Technical requirements

This chapter requires that you have completed the exercises in the past three chapters, so that you can add the Amplify UI component to your project. Make sure that you have installed and configured the Amplify CLI as well. You can download the necessary file from the following link: https://github.com/PacktPublishing/Rapid-Application-Development-with-AWS-Amplify/tree/master/ch4.

Important Note

If you want to reuse the same cloud backend with different folders for each chapter with the code you've downloaded from the public repository, place the working aws-exports.js or .ts file in the project folder, and then simply call the amplify init and amplify pull commands to initialize and pull the resources to the specific chapter project folder.

Understanding AWS authentication

The AWS Amplify Framework uses Amazon Cognito as its provider for authentication. Amazon Cognito is a robust user management suite that includes all the latest identity and access management standards, such as OAuth 2.0, SAML 2.0, and OpenID Connect.

Since it's a SaaS solution, you will have a free tier of 50,000 Monthly Active Users (MAUs) to start your next project, until you hit the limit and start paying the paid tier of each additional user that is above the free tier. It can be scaled to millions of users without you trying to figure out a solution to tackle the scalability problem. This is because it is all being handled behind the scenes, which takes all the stress away from all the scalability issues that you might be facing for your potentially super successful product.

In this tutorial, you'll learn how to add authentication to your application using Amazon Cognito and how to log in with a username with password. We will...

Signing up for the ReactJS app

In the previous chapter, we created the sign-up and sign-in form with the Amplify UI. Now, we will make a small modification to the original code.

Let's open the App.jsx file and replace the entire original code with the following code. We will use the withAutenticator component this time:

1. Import the withAuthenticator and AmplifySignOut Amplify UI components to keep the code simple and lean. Then, import the Auth Amplify library:

   import React from 'react';
   import './App.css';
   import Amplify, { Auth } from 'aws-amplify';
   import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';
   import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
   import awsExports from "./aws-exports";
   Amplify.configure(awsExports);

2. Make sure that you configure the authenticationFlowType parameter with the USER_PASSWORD_AUTH value. This tells the Cognito service to use...

Signing in and out of the ReactJS app

We have got the authentication working locally, but does it work when we deploy it to the internet? Let's find out! In this section, we will show you how to deploy the app to an environment with AWS Amplify hosting:

1. If you haven't added hosting to the Amplify project yet, you can call the amplify add hosting and amplify push commands beforehand. Let's call the amplify publish command in the terminal to publish the ReactJS app to the cloud. This will generate a publicly accessible URL:

   amplify publish
   ✔ Successfully pulled backend environment dev from the cloud.
   Current Environment: dev
   | Category | Resource name      | Operation | Provider plugin   |
   | -------- | ------------------ | --------- | ----------------- |
   | Api      | reactjsapp         | No Change | awscloudformation |
   | Hosting  | amplifyhosting...

Signing up for the Expo and React Native apps

To be honest, I am very glad that both Expo and React Native can share the same code with the Amplify UI. Because of this, you don't need to worry about if you decided to go with Expo first and want to change it to pure React Native later, since you can reuse the same code base.

We will follow the Understanding AWS authentication section of this chapter for the React Native and Expo apps. Here, we must remove the old Cognito user pool, which contains your email as the identifier, and add a new Cognito user pool with the username as the identifier, plus the additional settings, to the Cognito console.

Now, we need to go to the app directory, open the App.tsx file, and do the following:

1. Import the necessary libraries, such as the React and the React Native libraries and the Amplify React Native library:

   import React from 'react';
   import { View, Text } from 'react-native';
   import { withAuthenticator...

Signing in and out of the Expo and React Native apps

Now that we have created the user successfully, we can go to the AWS Cognito console to check out the user that has been created in the user pool:

Figure 4.17 – Cognito user pool

As you can see, with just a few lines of code, we have integrated the entire authentication flow. Now, let's try to sign in with one of the users that we have created:

1. We will sign in with the last user that we have created. If you've forgotten the password, you can click on the Forgot Password button to retrieve it. We will show you how to do this because it is a very important self-help feature that most users will use when they forget their password. Let's press the Forgot Password button:

   Figure 4.18 – Sign in to your account screen – pressing the Forgot Password button

2. Enter the username that you forgot the password for and then press the SEND button:

   Figure 4.19 – Reset...

Summary

Over the course of this chapter, we have learned about how to integrate the Amplify UI with the Amplify authentication backend, which is powered by the AWS Cognito service. If you followed all three exercises for ReactJS, React Native, and Expo, you should realize that the code between the three different variations is very similar. Hopefully, you are having fun so far.

In the next chapter, we are going to look at something even more exciting, which is creating a blog post with Amplify GraphQL. We will see the magic of the GraphQL API and why it is a great way to replace the traditional RESTful API!