Create New Users in Firebase Authentication and Store within the Database
We'll learn how to create new users/let users sign up in Firebase using our application. The Firebase auth store gives us createUserWithEmailAndPassword that will create a user and return a userCredential for us to store in our database.
We'll also learn how our database and authentication system aren't connected by default and we'll create a user profile document in the Firestore database. The process here will be very similar to how we created the tasks collection.
Instructor: [0:00] Now we are going to handle the Sign Up logic. For creating a new user account, AngularFire has a function called createUserWithEmailAndPassword. This function takes the same parameters as login, the authentication instance that we are running the email and the password.
[0:22] It also returns a promise and inside that promise we have our userCredential object. This userCredential object is a Firebase interface that has the user and some metadata about the user. Here, instead of navigating directly to the home page after the account is created, we want to do something else.
[0:47] If we go back to our Firebase console, we see that we have here authentication and here we have Firestore. This is the database and this is the authentication feature.
[0:59] They are not connected between each other. You don't have access to the User's data inside of the database and you don't have access to the database inside of the authentication service. For that, what we want to do is that we want to create a user profile document and that's a document with information about the user.
[1:20] In our case, we don't have that much information. We have the email and the password, so our user profile is going to be only the user's password. For that, we are going to go back into our constructor and here we are going to also add Firestore. Importing it from AngularFire.
[1:43] Once I have Firestore here, I'm going to go back into the return of the createUserWithEmailAndPassword function, and having my userCredential, I'm going to create a new document. To do that, I'm going to use the setDoc function.
[2:02] This setDoc function takes a reference to the document and the document that it's going to store. We can get the reference with doc and inside of doc, we pass the instance of Firestore and the path in the database. Since we are going to store a user profile, we are going to do this in the user's collection and we are going to add here the user ID.
[2:32] We can get the ID from the user credential. Here it has some metadata about the user, but it also has the user. Inside of the User, we can get the UID. This is the unique identifier for that user.
[2:49] Now that I have my reference to the document, I'm going to say this is the object I'm going to store in the database and that object has only one property, email, and I can get that either from the email here or again, from the user credential right here.
[3:10] Now after we save that document in the database, we can navigate safely the user to the home page. Let's test it. We can go back to our authentication page. We say, "OK, I want to create a new account." This is going to be jorge2@jorge.com and I'm going to use a random password.
[3:39] When I click continue, it's going to navigate me here to the home page. If we go into our Firebase console, you see that when I refresh authentication, now I have a new user account. It's jorge2@jorge.com and this is the user ID.
[3:58] If I go into Firestore, now I have a user's collection and in here, if I do, let's see, command F to search and I paste the ID that I just copied, you see that that's the ID that it added to the user's document.