Add Authentication to an Amplify App
In this video, we'll add authentication to our app using the Amplify Admin UI. Then, we'll use the withAuthenticator higher order component to add sign-in and sign-up functionality. We'll also create users and groups in the Admin UI dashboard. Finally, we'll implement authorization roles to our data in the Admin UI.
Ali Spittel: [0:00] Now that our application is deployed, let's add authentication to our app. Click Enable authentication, and you can choose from different mechanisms. For example, social authentication or phone number. I'll stick with email login.
[0:12] You can also add multi-factor authentication if you're interested in that. I'll make it optional. You can also add required attributes, which I'll pass on and configure your password protection settings which, again, I'll keep as the standard. Then, I'll click Save and deploy to deploy my configuration.
[0:31] Now that my changes have deployed, I'll run amplify pull in my local project to get them locally. I'll install the AWS Amplify React UI components. I'll go to my App.js and import with authenticator from that package I just installed. This is a higher order React component, so I'll wrap my app component in withAuthenticator.
[0:56] When I go to localhost:3000, it asks me to sign in or sign up. I can create an account using this form, or I can create accounts as an admin user using the Amplify Admin UI. This will email your new user with their new password. You can also create groups of users. For example, admin. I'll also add my new user to this.
[1:29] If I go to my Data model tab, I can add authorization roles to my data. If I change this over to Cognito user pool, I can make it so that admins can create, update, and delete courses, and any signed-in user can watch courses. I'll do the same for video. I'll save and deploy these changes. Now that my authorization roles have been deployed, I can run amplify pull to get those changes locally.
[1:56] In this video, we added authentication to our application backend. We also installed the UI components for React in AWS Amplify, and we used the withAuthenticator component to add login to our app. We then added authorization roles using the Amplify Admin UI.