In this lecture, we're going to handle the response from Firebase.
There are two possible responses we can receive from Firebase.
We could get an error on the other end, we could receive a successful response.
In either case, we should inform the user of the response from Firebase.
We are going to continue working inside the register function of the register component class file.
Inside this function, we're initiating a request with the create user function.
It's possible we may receive an error from Firebase every time we make a request.
There's a chance the request can fail.
Informing the user of a problem is considered good practice accounting for error, as will prevent the
app from behaving unexpectedly.
We are going to surround the create user function with a try catch block.
The catch block receives an argument called error errors from Firebase have two properties, a code
and a message.
We're not going to use either.
Instead, rendering a universal error message should work fine.
We will keep error handling from Firebase simple.
Feel free to implement more descriptive error messages after this course.
Code inside the catch block will run whenever an error occurs from our request.
We should update the alert component to render an error message.
This way, we can notify the user that their submission failed.
First, for debugging purposes, we will log the error message.
Even though we won't use the error argument, we should log it to help us debug the request.
Next, we are going to set the alert message property to the following value an unexpected error occurred.
Please try again later.
Other than the error message, we should change the background color of the alert component, set the
alert color property to red.
Typically, the color red is associated with errors.
We should change the background color to help the user identify the message as an error.
Lastly, we will return the function inside the catch block.
This return statement will stop the function from executing further if we don't return the function
code outside of the catch block may execute.
Assuming an error hasn't been thrown, we should handle a successful response inside the try block.
We will log the user credentials variable.
We are logging the variable to identify the success of the registration.
Afterward, we should update the alert component to inform the user of the status of their submission
after the try catch blocks.
We will update the alert message property to the following success.
Your account has been created.
Next, we will update the alert color property to Green.
The color green is associated with the idea of success 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.
Let's test things out.
Open the app in the browser with the console opens.
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 logged.
This response verifies Firebase has created an account.
But let's double check our work.
Firebase will store the user for us, 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.
The users info has been listed in the table along with the user's email.
A unique ID has been assigned to the user.
This information is going to be helpful for identifying users.
We've successfully created a user before we move on.
Let's test if the error works, switch back to the registration form without making changes to the fields.
Let's submit the form again.
Firebase will reject the registration because duplicate emails are not allowed.
The alert message will be the colour red with the following message An unexpected error occurred.
Please try again later if you're interested in learning more about the error.
Check out the console and object has been logged with information related to the error.
You can check out the documentation to learn why the error occurs.
At the moment, we are rendering a universal error message for all errors.
Feel free to tailor the message to a specific error.
As an exercise, 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.
The only thing we have to handle is the response.
By using Firebase, we can avoid writing backend logic for registering a user with a few clicks.
We have an authentication system ready for us out of the box before moving on.
There's one more feature I want to add to our form.
We should disable the button during submission.
Users shouldn't be able to submit the form while a request is being processed.
Let's go back to the register component class file.
At the top of the class at a property called in submission with an initial value of false.
Next, we will update this property inside the register function at the top of the function.
We all set the in submission property to True.
We are immediately disabling the form when the register function is invoked.
We don't want to enable the form until the requests inside the function have been completed to be more
specific.
We should enable the form when an error occurs.
It isn't necessary to enable the form on unsuccessful submissions.
There isn't a reason to allow users to register an account when they've already registered one at the
end of the catch block.
We will reset the information property to false.
The former doesn't need to be disabled anymore.
We'll want to enable that again so that the user can correct their mistakes and submit the form.
The last step is to bind this property to the button in the form.
Open the register template file.
Scroll to the bottom of the form on the button element.
We are already disabling the button by checking if the invalid property on the group is false.
We will add an order operator to include the information property.
If either of these conditions is true, we will disable the form.
Let's test the button in the browser before doing so, we should turn the throttle on.
If you're on a fast internet connection, requests can happen very fast.
Switch to the network panel.
We will set the throttle option to slow 3G after turning throttling on, let's submit the form with
the same data as before.
As the request is being processed, the button is disabled.
We've effectively stopped users from accidentally submitting the form more than once.
Let's continue working on the registration form in the next lecture.
Be sure to turn throttling off before moving on.