In this lecture, we're going to register the user by submitting their data to Firebase.
We're going to need to turn on the authentication feature in Firebase before we can do so.
Otherwise, Firebase will reject our authentication requests.
Open the Firebase console for your project on the sidebar under the Build section.
Click on authentication.
Firebase will give us the following message Authenticate and manage users from a variety of providers
without server side code.
Nowadays, many platforms allow users to register and account on different apps through the platform.
It's quick, easy and flexible.
Some examples of platforms that provide this service are Facebook, Twitter and Google.
These companies are what Firebase is referring to when it uses the word provider to view the list of
providers.
We can switch to the sign in method tap.
Out of the box.
Firebase supports multiple platforms.
The method will select is the email method.
Enable it but don't enable be password less option.
We want to be able to store the password after enabling this provider.
Click Save.
The status will change to enabled.
We can start adding users to our Firebase application.
The next step is to send the user's data to Firebase in your editor.
Open the register component class file.
Scroll down to the register function.
This function handles the form submission for the registration form.
We've already taken care of adding the alert messages.
We can proceed to send the user's data to Firebase.
First, we need to expose Firebase methods in this component.
The modules we've imported, we'll export services that expose Firebase functions.
They can be injected directly into our component at the top of the file.
We're going to import a service called Angular Fire off from the angular slash fire slash compat slash
off package.
Next we will inject this service through the constructor function.
The name of the property will be called off.
This service will be private to the component class.
It doesn't need to be accessible in the template.
It's not completely necessary to prioritize this property, but it's good to get into the habit of limiting
the access of a property.
After injecting this service, we can start using its methods.
The question is which method do we want to use?
In the resource section of this lecture.
I provide a link to a page for getting started with authentication.
The most important information on this page is the following description Angler Fire off promise proxies
and initialized fire based off dot off instance allowing you to log users in, out, etc..
See the Fire Bay stocks for more information on what methods are available at the end of the day.
The angular fire package is a wrapper around fire base's SDK.
The developers don't think it's necessary to reinvent the wheel.
Instead, the service we've injected is a wrapper around fire base's existing methods.
If we want to learn more about the methods available in a service, we need to view fire basis documentation.
We are given a link to the object exposed by this service.
Click on it.
The authentication service will give us access to the properties and methods listed on this documentation
page.
The method will want to use is called create user with email and password.
Click on it from the list.
According to the documentation, it expects the email and password as arguments.
The returned value is a promise.
The promise would resolve to an object with the user's credentials if the authentication were a success.
The description says the following about the function creates a new user account associated with the
specified email address and password on successful creation of a user accounts.
This user will also be signed into your application.
User account creation can fail if the account already exists or the password is invalid.
I want to emphasize this part of the description.
Firebase will automatically log the user in if their account was created successfully.
That information is beneficial.
The model will need to be hidden upon creating an account.
Reading further will find a list of possible errors.
Lastly, there is an example we can use.
We won't use the example they provide.
We're going to take a slightly different approach than the default example.
Let's go back to the editor.
Scroll down to the register of function definition.
The function should be asynchronous.
We will add the async keyword to the function.
As noted in the documentation, the create user function will return a promise.
I prefer to use async await syntax.
Promises are much easier to read with this syntax.
Next, let's invoke the function.
We will call the function after updating the alerts.
Call the following function off dot.
Create user with email and password.
Before calling this function and the await keyword.
The Create user function will send a request to Firebase with the user's credentials.
If successful, will be returned with the user's credentials.
We should store these credentials, assign the value return by this function to a variable called user
credential.
We can't forget about the arguments.
The documentation says the first argument is the e-mail and the second is the password.
These values can be found under the register.
Form, object form groups have a property called value.
This object holds a copy of the values from the form controls.
For readability, we should structure these values above the function.
We will structure the this dot register form that value object for the email and password properties.
The values from the form controls can be retrieved by their names.
Lastly, we will pass them into the create user function.
Hey, everyone.
It's me from the future.
In the latest version of Angular, stronger type support for forms has been added.
While beneficial, it does cause some problems with our current solution inside the create user.
With email function, you may need to assert the types of the email and password variables by using
the as keyword.
In both cases, you can assert the type to screen.
This should resolve any issues you may have.
All right.
Back to the video.
With this one function, we've successfully registered a user into our app.
In the next lecture we are going to handle the response by this function.