Use the AWS Amplify withAuthenticator HOC to Implement a React User Authorization Flow

Instructor: [00:02] The first service that we're going to add is authentication. To add a new service using Amplify, we can run amplify add with the name of the service. The service name that we're going to be adding is auth, so we can run amplify add auth.

[00:16] Here, we'll be asked if we would like to use the default authentication and security configuration. We'll choose yes. Now the new configuration has been created in our project. We'll run amplify push to push the new configuration into our account and create and provision the new resources.

[00:36] Next, we'll be prompted and asked if we would like to continue. If you look at the operation, you can see that it is set to create. This means it will create a new authentication service in our account. This may take a couple of minutes to complete.

[00:52] Now that the authentication service has been created, we should be able to look in our source directory and see a new file that was created for us called AWS-exports.js. This file is created and updated by the CLI, so there's no reason for us to change it.

[01:07] We will, though, be using it in the next step to configure our React application with the AWS resources. To configure our React app with the AWS resources, we can open up source/index.js. Here, we'll import Amplify from the AWS Amplify library. The configuration from AWS exports, and we'll call amplify.configure, passing in the config.

[01:47] Next, we'll open source.app.js. Here we'll first import the with authenticator higher order component from the AWS Amplify React library. Instead of exporting the app component as a default export, we'll instead wrap the app component with the with authenticator higher order component.

[02:24] Now we're ready to test it out. To run the app, run NPM start. Our app should now be protected by user authentication flow. The first thing we'll do is click create account and create a new account.

[02:57] After the account has been created, you should receive an authentication code in your email. To confirm the sign up, paste in the authentication code from your email. After you've confirmed your account, sign into your account.

[03:16] After we've signed in, we should be redirected to the main app. You'll notice that if you refresh the page, the user remains signed in. This is because the user session is stored in local storage.

[03:28] Next, let's add a sign out button. To do so we'll go back into app.js and pass in a second argument to with authenticator. Here, we'll pass in an object with an include greetings key set to true.

[03:58] Now when we refresh, we should see a sign out button at the top right corner of the page. To view enabled Amplify services at any time, we can run Amplify status. Here, we're given the resource name for the authentication that we just created.

[04:16] To view the Cognito authentication service in your AWS account, open the AWS console and search for Cognito. In the Cognito dashboard, click on manage user pools and then click on the user pool for the application that we just created.

[04:32] Here, we can view the settings for the Amazon Cognito user pool that we've created and also view any of the users that have signed up.