In this lecture, we were going to connect a user's data with their account in Firebase.
There are still some issues we'll need to address before we can move on to the login form.
One of those issues is connecting the user with their data in Firebase.
We're storing the user's information in two different services.
The authentication and database service at the moment, we don't have a way to connect the two.
We don't know which document belongs to which user in the authentication service.
There is one common value between the two services that would be the email.
I don't recommend using the email to keep track of the user.
It's because emails can change.
If the email changes, we will have to perform two updates.
We will need to update the user in the authentication service and the document in the database.
We want something that will be consistent.
Once the user has registered.
Luckily, there is a value we can use.
Navigate to the authenticated section in the Firebase console.
Every user is assigned a user UID.
This value is unique.
It will never change.
By using this value, we can store a copy of this ID with the user's document, thus connecting the
user across Firebase services.
Likewise, Firebase will assign a unique ID to each document, navigate to the database in the Firebase
console, select the user's collection.
If it hasn't been auto selected already in the middle column will find a list of random strings.
These are unique IDs assigned to each document.
The ID is automatically generated for us.
We should override this behavior instead of a randomly generated ID.
We're going to use the ID assigned to the user in the authentication service.
Before we get started, I want to make one point clear.
This issue is a Firebase related issue.
It is not an angular issue, storing user data, establishing relationships and performing updates or
a backend developer's job.
As for our front end developers, our responsibility is to send the data to the correct endpoint.
Storing tokens received from the back end and render the correct template.
The token permits us to interact with the database.
Other than that, everything else is backend related.
With that being said, I still want to show you how to accomplish this task with Firebase.
Some of you may want to use it as your back end solution.
That's fine even if you decide to use a different backend.
The process on the front end is still the same.
All right, let's get started and your editor.
Open the authentication service file.
We're going to connect the services during registration in the create user function.
We are calling the Create user with email function.
This function must be called before adding a document to the database.
The ID for the user is generated from the authentication service.
We can't insert that document until we have an ID.
Once an account has been created, we need to retrieve the ID.
Luckily, we're storing the value returned by the Create user with email function.
The type of value returned by this function is an object called user credentials.
It contains the information we're going to need in the resource section of this lecture.
I provide a link to this function.
Learning how to navigate documentation is an invaluable skill for a developer.
I want to show you the process I went through for discovering the ID of the user.
If we scroll down, we will come across a section of returned values.
This function will return a promise that gets resolved to an object called user credential.
Let's click on the link to learn about this object.
The user credential object has three properties.
Normally I would go through each object.
However, I know ahead of time which object to select the property.
Containing the information we need is the user property.
We'll click on the link again for more information.
Eventually will arrive at an interface definition.
However, we're not finished yet looking through the documentation.
There isn't info on the ID of the user.
Did we click on the right definition?
The answer is no.
If we look at the definition, the interface is extending another interface called user info.
It's possible the ID of the user can be found under this definition.
Let's click on it.
This page is where we'll find the information we'll need the user info object stores, properties relative
to the user stored in the authentication service under the list of properties.
There's a property called UID.
If we click on it, it'll tell us the following the user's unique ID.
This property is exactly what we're looking for.
To be clear, this is the ID assigned to the user in the authentication service.
We're going to save this ID in the database.
Let's switch back to the ED.
With our newly obtained knowledge, we can update this request to the database.
The request should be updated to add the ID Firebase has two functions for inserting data into the collection.
We're using the first function, the add function.
You will insert a document into a collection with a generated ID.
It doesn't allow you to generate an ID yourself if you'd like to use a custom ID.
You'll need to use the other function.
The second function is called Document.
The document function performs two actions.
First, it'll attempt to select a document if the document doesn't exist.
It'll generate a new document.
Afterward, the new document is returned by this function.
Unlike the add function, we can assign a unique ID to the document on the second request before we
call the add function.
Change the document function.
It has one argument, which is the name of the ID will pass in the following.
He was or credential Typekit user, not UID.
An error will appear from TypeScript.
Let's hover our mouse over the user property.
According to the editor, the user property can store one of two values.
It can store a user object or be null.
However, the document function does not allow for a value to be null.
We can fix this issue with a conditional statement above the request and a conditional statement with
the following condition not user credential user.
We are checking if the user property is not null, if it is, we will throw an error with the following
message.
User can't be found.
The air has gone away.
We can proceed to start adding data to the document.
The document function returns a document.
The document is completely empty.
It does not come with the function called add.
If we want to add data to the document, we need to change another function called set.
We can replace the add function with the set function.
The set of function will add or modify existing properties in a document.
The argument is an object of properties we'd like to add or edit.
We don't need to perform further changes to this object.
It'll work as is before we test things.
I want to perform one more task.
I haven't been completely honest.
The authentication service can store additional information about the user, but it's limited registered
users come with their profile.
There are two pieces of information we can store in their profile a display name and a profile image.
For example, purposes will store the display name in the service after storing the user in.
The collection will call a function called user credentials.
Typekit User Dot Update Profile.
It has one argument.
It's an object of properties we'd like to update on the profile.
There are two properties we can update on the profile.
The display name and profile image.
We won't have a profile image, so we'll set the display name property to the name in the user data
parameter.
The task is asynchronous, we'll add the await keyword to the function.
Let's try testing our registration form inside the app.
Create a new user with valid credentials.
On my end, I receive a success message.
Fantastic.
Let's verify the user's account in Firebase, navigate to the authenticated section in the console.
In the authenticated section, a new account has been added to our app.
Take note of the ID assigned to the user.
It should match the ID assigned to the document in the database.
Let's switch over to the database to check if that's true.
Plainly enough, the IDs match everything works as we wanted it to.
We've successfully connected the users data in the database to their authenticated account.