Original subtitles

In this lecture, we're going to handle the response from Firebase, we're using the create user function

to initiate a request.

It's possible we may receive an error from Firebase.

We'll want to handle the error if that happens, since we're using async await syntax, we can't change

the catch function.

If we want to catch errors, we'll need to use the try catch block, surround the asynchronous statement

with the try catch block.

The catch block will have a parameter called error, every error will come with two properties, a code

and a message we're not going to use either.

Instead, we'll output a universal message for any error.

This is to keep things simple in the catch block.

We'll want to update the alert message.

This way we can notify the user.

Their submission failed.

First will set the information property to false.

The form doesn't need to be disabled anymore.

We want to enable it again so that the user can correct their mistakes and submit the form afterward

will set the alert variant property to be read.

Five hundred.

This value will change the alert box to the color red red is usually associated with error messages,

the last property will update is the alert message set, the alert message property to the following.

An unexpected error occurred.

Please try again later.

The last thing we'll do in the catch block is to return the function.

This return statement will stop the function from executing further if we didn't return the function,

the alert message would display a success.

Message will test this in a moment, but there is a problem with this function.

The variable user credentials is inaccessible outside of the tri catch statement.

It's because we're defining the variable inside the block, which limits its scope and we want the variable

to be available throughout the function.

We'll need to define it at the top.

Its initial value will be null.

If everything works out, the code inside the catch block will never run, the alert message will tell

the user they've successfully logged in before we update the alert messages will long be user credentials

variable to verify the user was registered.

Let's test things out, open the app in the browser with the console opened.

Try registering an account without triggering an error.

I'll receive a success message indicating that everything worked in the console, information about

the user's credentials is.

We'll look at this information later when we want to authenticate the user.

This verifies everything works, but let's double check.

Firebase will store the user for you.

Open the firebase console in another tab.

Navigate to the authentication page under this page, the user should be listed, if you don't see anything,

you may want to refresh it by clicking on the refresh.

Icon will find the user we created.

Firebase will even generate a unique ID for our user.

We've successfully created a user before we move on, let's test if the error works, switched back

to the registration form, you will need to refresh the page.

We need to refresh it because we've disabled the form, if the registration was a success after refreshing

the page, try submitting the form again with the same information.

Firebase will reject the registration because duplicate emails are not allowed.

The alert message will be the color red with the message an unexpected error occurred.

Please try again later.

Fantastic.

We're able to register the user by using a single function.

Firebase handles the rest by sending the request, validating the information on their end, and then

providing us with a response about the user's credentials.

The only thing we have to handle is the response.

By using FIREBASE, we don't have to worry about the backend logic as much.

With a few clicks, we have an authentication system ready for us out of the box.