React Authentication with AWS Amplify UI React
In this video you will learn how to use the most recent version of AWS Amplify and AWS Amplify UI React to build out an authentication flow in less than 4 minutes. You will also learn how to use the Amplify CSS theme configuration to add a custom theme to the UI components.
Instructor: [0:00] To get started, create a new React application by running npx create-react-app. Next, change into the new directory and install AWS Amplify as well as @AWS-amplify/UI-React using either npm or yarn.
[0:19] Now, initialize a new Amplify project by running amplify init. Choose your project name, your environment name, a default text editor, and then the defaults for the rest of the options. When prompted for an AWS profile, choose the profile that you'd like to use.
[0:46] Next, add the authentication service by running amplify add auth. Here, choose the default authentication and security configuration. Username is the sign in type, and no for any advanced settings.
[0:59] To deploy the service run amplify push. Once the deployment is complete, open the project in your text editor. Next, open index.js and import Amplify from AWS Amplify, the configuration from the aws-exports file and then call amplify.configure passing in the config.
[1:33] Next, open app.js. At the top of the file, we'll go ahead and import the Amplify UI components. The two that we'll be using are the width authenticator Higher Order Component and the Amplify SignOut Component. In the main app component, we'll delete some of the code and replace it with the Amplify SignOut UI component.
[2:04] Next, for the default export, we'll replace the main app component with the width authenticator wrapping the main app component. To test everything out, we can run npm start.
[2:22] When the application loads, you should now see an authentication form. Here, we'll create and confirm a new account which should automatically sign us in.
[2:46] If we click Sign Out, we should be brought back to the authentication form. Next, let's change up the styling. To do so, we'll open index.css.
[2:59] In the roots [inaudible] class, we'll add three new properties -- Amplify primary color, Amplify primary tint, and Amplify primary shade.
[3:12] When we save and go back to the app, we should see updates to the Amplify UI Components color theme