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

nader dabit
Instructornader dabit
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

In this lesson we’ll enable user authentication (Amazon Cognito) in the existing AWS Amplify project, then use the withAuthenticator higher order component from AWS Amplify to quickly add a preconfigured sign up and sign in 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.

Raquel
Raquel
~ 6 years ago

Hi, I know its cool using VI and everyone has his preference, but for learning purposes would be much better to use an IDE with semantic colors, it's much better to read than just white text. Anyway, quite cool and shorter, like I like. Thanks!

Hank de
Hank de
~ 6 years ago

Why does a user have to come up with a username when signing up? You should be able to just enter your email address...

Gary
Gary
~ 6 years ago

Hank, you can customize the form or make your own.

nader dabit
nader dabitinstructor
~ 6 years ago

Gary, yes you can customize it to some extent, but for full control it's better to just use the Auth component & write the UI from scratch.

https://aws-amplify.github.io/docs/js/authentication

nader dabit
nader dabitinstructor
~ 6 years ago

Hank, this is the way it's configured out of the box. You can have more control if you just use the Auth component without the HOC.

Eyas Tayyem
Eyas Tayyem
~ 5 years ago

Any idea why my cognito user pool is empty?

Xavier Brinon
Xavier Brinon
~ 5 years ago

You need to select your region, the site might have selected the wrong one.

Shawn Wang
Shawn Wang
~ 5 years ago

[redacted, pls ignore]

Dave Fedele
Dave Fedele
~ 4 years ago

Just ran this today and since aws-amplify-react@4.x.x, the Authenticator comes by default un-styled.

To include default styling so it appears as the video, add this line before Amplify.configure in your index.js

import '@aws-amplify/ui/dist/style.css';

~ 3 years ago

this course is quite old and does not match with current changes in aws. Error while creating user

Markdown supported.
Become a member to join the discussionEnroll Today