From the course: React: Cloud-Powered Apps with Firebase

Creating users

From the course: React: Cloud-Powered Apps with Firebase

Start my 1-month free trial

Creating users

“

- [Instructor] Now that we have a form for inputting information, let's add functionality to the simple form and create a user with Firebase. To make things easier when working with forms, we will be using React Hook Form. A great little library that will provide a great experience. Both for the user, and for the developer. And it uses React hooks. Let's install React Hook Form now. Npm install react-hook-form. And at the time of this recording, we are using version 5.7.2. Heading over now to our new signup component, we will import the useForm hook from react-hook-form. Now by invoking the useForm hook, we get back several useful methods. Let's just structure these here. And we're interested in these three. The register method will allow us to register our inputs and add validation rules. The handleSubmit method will be used for dealing with the form data. And the reset method will be used to clear the form after a successful form submit. Let's first register every one of our inputs by using the ref attribute. Let's do that for the first name. The last name. The email. The password. And those are it. Next, we want to handle the form submission. So let's add that now on the form. OnSubmit. We will call the handleSubmit method from React Hook Form. The callback will be an onSubmit function we'll create now. We'll get back some data. And for now, let's just log this data out. Now, we can create a function for creating a user. Under firebase I will create a new file called auth.js. Here, let's import firebase from firebase/app. And we'll have a new function called signup. It will take in an object. Let's go ahead and just structure this data now. First name, the last name, the email and the password. We will first use use Firebase auth to create a user with email and password. Firebase.auth. And call a method createUserWithEmailAndPassword. We will use async await here. Since this is an asynchronous method here. From the response, we will grab the user and update the profile in order to set the display name. We will set the display name using the first name and the last name. Heading back to the signup component now. We can import our new function. Import signup from firebase auth. And now, we can use that and our onSubmit handler. Let's use a try-catch block here. We will call the signup function with the data. If it's successful, we can reset the form. We can catch any error. And for now, we can simply log out the error here. And we'll need to use async here. Lastly, we want some sort of indicator that our application is performing a network request. And we will do so by applying the loading clause on the form. Let's use the useState hook to add some state to our component. We will call this piece of state isLoading. And also we get back the setLoading function. We will set it to true before performing the network request, and then reset it back to false. Here. Let's create a variable here for the form class name. The UI form. And if it's loading, it will add the class of loading. Otherwise, it will be an empty string. And we can replace here a class name with formClassName. Let's start our application now and turn to the browser. I'm going to have my developer tools open to check for any errors. And let's sign up a user now. First name and last name. And then let's input the email and the password. And click Sign Up. And looks like we have an error here. We need to import one more thing here. Import firebase/auth. Let's recompile that. Head back to our application. And let's try signing up again. Let's head over to the Firebase console now. Click on Users. And then we see our new user created here.

Contents