Manually Sign Up New Users in React with AWS Amplify Auth Class
In this lesson we’ll look at how we can use the Auth class directly create a custom user sign in & sign up flow.
Instructor: [00:02] The first thing we'll do is we'll import auth from the AWS Amplify library. Next, we'll create some initial state. We'll need to keep up with the username, password, email, phone number, and authentication code for the user that is being signed up.
[00:30] Next, we'll need an onChange handler to handle the user's text input. This function will call this.setState, setting the event.target.name and the event.target.value.
[00:49] We'll next create a sign up and confirm sign up class method. Sign up will be async, so we'll create a try catch block. We'll first destructure the username, password, email, and phone number from the state. We'll then call auth.signUp, passing in the username and password as well as an attributes object containing the email and the phone number. If the sign up is successful, we'll console.log "Successfully signed up."
[01:57] Confirm sign up will handle the multi factor authentication, so we'll destructure both the username and the authentication code from the state. Here we'll also set up a try catch block. We'll call auth.confirmSignup, passing in the username and the authentication code. If this is successful, we'll console.log "User successfully signed up."
[02:41] This component will contain two forms, one for signing up and one for confirming the sign up. We'll create a variable called step that we'll use to toggle these two forms.
[03:04] In our render method we'll check to see if this.state.step is equal to zero. If it is, we'll show the sign in form. The sign up form will contain four inputs, each with an onChange method, a name property, and a style property.
[03:43] We'll also add a placeholder attributes. Finally, we'll create a sign up button that will call this.signup when clicked. To create the confirm sign up form, we can just copy and paste the sign up form to get started.
[04:31] This form will only need two inputs, one for the username and one for the authentication code. The button for this form will call this.confirmSignup.
[04:52] Finally, in sign up we'll call this.setState, setting the step to one if the sign up is successful. Next, we'll scroll to the bottom of the component and we'll add a styles variable, setting the styles for the input components.
[05:21] To test this out, let's run NPM start. When we sign up a new user, we should see "Successfully signed up" logged out to the console. We should also see the confirm sign up form appear on our screen.
[05:52] To confirm sign up, use the username you just created as well as the authentication code you received in your email and click confirm sign up. If the sign up is successful, you should see "User successfully signed up" logged out to the console.
[06:06] To make sure that this user exists, let's jump into the AWS dashboard and go to the cognito console to look at the new user. In the cognito dashboard we'll click on manage user pools and then we'll click on the name of the user pool for our app. When we click on users and groups, we should now see the new user appear.