All language subtitles for 004 User Registration_en

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 any authentication attempts we make.

Open the firebase console for your project.

On the sidebar, 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 to other sites by sending their data to this site.

They'd like to register to 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 signing method tab.

Firebase supports multiple platforms out of the box, the method will select is the e-mail method,

enable it but don't enable the password.

This option.

We want to be able to store the password after enabling it click save the status will change to enabled.

We can start adding users to our firebase application will want to do so through Firebases API.

The next step is to send the data to Firebase.

We already have an instance of Firebase that'll help us do that in your editor.

Open the register form component.

Scroll down to the register function, this function is where we handle the registration submission.

We've already taken care of adding the alert messages.

We'll use the firebase instance to send the data.

However, the firebase instance is not available and the component will need to import it at the top

of the script.

Block import the firebase instant's.

It's important that we're importing the firebase file we created in their previous lecture, we don't

want to import the firebase module mistakenly, they are not the same.

One simple trick for making sure you're importing files from the source directory is to use the character.

WINPAC will replace the character in import statements with the path to the source directory.

There are two benefits to this.

It saves you from having to move up multiple directories if your files are nested.

Secondly, you don't have to update the import statements in the file.

If you move it to another directory, the import statements will still be able to import the files you

want.

We are going to use the add character in our components whenever possible.

Go back to the register function definition.

We're going to write the code in between the message alert updates.

The first thing we'll do is invoke the firebase dot off function.

The afunction will return an object with methods and properties we can use to communicate with the authentication

service in the resource section of this lecture, I provide a link to the Authentication SDK documentation

page.

Firebase tells us the following, do not call this constructor directly and said, use Firebase Dot

off.

In most examples, you will find Firebase creating an object using the firebase function.

This function will give you access to the properties and methods listed on this documentation page.

The method will want to use is called create user with e-mail 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 will give us an object with the user's credentials.

If the authentication was a success, the description says the following about the function creates

a new user account associated with the specified email address and password unsuccessful creation of

the 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.

This one note is important.

Firebase will automatically log the user in if their account was created successfully.

Will want to reload the app.

If that's the case.

Reading further, we'll find a list of possible errors.

Lastly, there's 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 ED.

We're going to chain the create user with email and password function.

This function will return, I promise, but I don't want to change the then or catch functions and said

we'll use the async away keywords before the register of function name.

Add the async keyword.

Will add the await key word before the firebase function, the create user function will send a request

to Firebase with the information you've provided it, if successful, will be returned with the user's

credentials, will want to store these credentials to keep the user logged in.

We're going to assign the response to a variable called user credentials.

We can't forget about the arguments will pass those in next, the documentation says the first argument

is the email and the second is the password.

Both values are stored and the values parameter we are provided, the values from the submit event we

don't need to store the values in a data object will pass in both values to their respective arguments.

The values from the fields can be retrieved by their names, we assign them the property names, corresponds

to the name attributes on the field components with this one function or able to completely register

the user in the system in the next lecture.

We'll look at handling the response.