1 00:00:00,330 --> 00:00:04,140 In this lecture, we're going to handle the response from Firebase. 2 00:00:04,410 --> 00:00:08,340 There are two possible responses we can receive from Firebase. 3 00:00:08,580 --> 00:00:13,350 We could get an error on the other end, we could receive a successful response. 4 00:00:13,620 --> 00:00:18,150 In either case, we should inform the user of the response from Firebase. 5 00:00:18,480 --> 00:00:24,600 We are going to continue working inside the register function of the register component class file. 6 00:00:27,050 --> 00:00:32,030 Inside this function, we're initiating a request with the create user function. 7 00:00:32,390 --> 00:00:38,000 It's possible we may receive an error from Firebase every time we make a request. 8 00:00:38,210 --> 00:00:40,580 There's a chance the request can fail. 9 00:00:40,910 --> 00:00:47,150 Informing the user of a problem is considered good practice accounting for error, as will prevent the 10 00:00:47,150 --> 00:00:49,250 app from behaving unexpectedly. 11 00:00:49,640 --> 00:00:54,500 We are going to surround the create user function with a try catch block. 12 00:00:57,050 --> 00:01:04,069 The catch block receives an argument called error errors from Firebase have two properties, a code 13 00:01:04,069 --> 00:01:05,030 and a message. 14 00:01:05,269 --> 00:01:07,040 We're not going to use either. 15 00:01:07,340 --> 00:01:11,810 Instead, rendering a universal error message should work fine. 16 00:01:12,140 --> 00:01:15,410 We will keep error handling from Firebase simple. 17 00:01:15,800 --> 00:01:20,420 Feel free to implement more descriptive error messages after this course. 18 00:01:21,020 --> 00:01:26,150 Code inside the catch block will run whenever an error occurs from our request. 19 00:01:26,480 --> 00:01:30,290 We should update the alert component to render an error message. 20 00:01:30,590 --> 00:01:34,490 This way, we can notify the user that their submission failed. 21 00:01:34,760 --> 00:01:38,960 First, for debugging purposes, we will log the error message. 22 00:01:41,430 --> 00:01:47,220 Even though we won't use the error argument, we should log it to help us debug the request. 23 00:01:47,550 --> 00:01:54,930 Next, we are going to set the alert message property to the following value an unexpected error occurred. 24 00:01:55,110 --> 00:01:56,580 Please try again later. 25 00:02:01,760 --> 00:02:07,850 Other than the error message, we should change the background color of the alert component, set the 26 00:02:07,850 --> 00:02:09,949 alert color property to red. 27 00:02:12,470 --> 00:02:16,010 Typically, the color red is associated with errors. 28 00:02:16,220 --> 00:02:21,380 We should change the background color to help the user identify the message as an error. 29 00:02:21,680 --> 00:02:25,970 Lastly, we will return the function inside the catch block. 30 00:02:28,480 --> 00:02:34,660 This return statement will stop the function from executing further if we don't return the function 31 00:02:34,840 --> 00:02:38,020 code outside of the catch block may execute. 32 00:02:38,410 --> 00:02:45,220 Assuming an error hasn't been thrown, we should handle a successful response inside the try block. 33 00:02:45,310 --> 00:02:48,130 We will log the user credentials variable. 34 00:02:50,610 --> 00:02:55,170 We are logging the variable to identify the success of the registration. 35 00:02:55,630 --> 00:03:01,980 Afterward, we should update the alert component to inform the user of the status of their submission 36 00:03:02,370 --> 00:03:04,380 after the try catch blocks. 37 00:03:04,530 --> 00:03:09,090 We will update the alert message property to the following success. 38 00:03:09,240 --> 00:03:11,010 Your account has been created. 39 00:03:14,330 --> 00:03:18,290 Next, we will update the alert color property to Green. 40 00:03:20,870 --> 00:03:26,420 The color green is associated with the idea of success if everything works out. 41 00:03:26,660 --> 00:03:29,330 The code inside the catch block will never run. 42 00:03:29,690 --> 00:03:33,770 The alert message will tell the user they've successfully logged in. 43 00:03:34,100 --> 00:03:35,540 Let's test things out. 44 00:03:35,870 --> 00:03:39,050 Open the app in the browser with the console opens. 45 00:03:41,580 --> 00:03:44,820 Try registering an account without triggering an error. 46 00:03:50,720 --> 00:03:55,850 I'll receive a success message indicating that everything worked in the console. 47 00:03:56,000 --> 00:03:59,150 Information about the user's credentials is logged. 48 00:03:59,480 --> 00:04:03,290 This response verifies Firebase has created an account. 49 00:04:03,530 --> 00:04:05,240 But let's double check our work. 50 00:04:05,660 --> 00:04:11,210 Firebase will store the user for us, open the Firebase console in another tab. 51 00:04:12,520 --> 00:04:16,329 Navigate to the authentication page under this page. 52 00:04:16,450 --> 00:04:17,950 The user should be listed. 53 00:04:18,220 --> 00:04:23,320 If you don't see anything, you may want to refresh it by clicking on the refresh icon. 54 00:04:23,680 --> 00:04:28,930 The users info has been listed in the table along with the user's email. 55 00:04:28,960 --> 00:04:31,660 A unique ID has been assigned to the user. 56 00:04:31,900 --> 00:04:36,040 This information is going to be helpful for identifying users. 57 00:04:36,490 --> 00:04:40,490 We've successfully created a user before we move on. 58 00:04:40,510 --> 00:04:47,810 Let's test if the error works, switch back to the registration form without making changes to the fields. 59 00:04:47,860 --> 00:04:49,660 Let's submit the form again. 60 00:04:52,230 --> 00:04:57,150 Firebase will reject the registration because duplicate emails are not allowed. 61 00:04:57,480 --> 00:05:03,450 The alert message will be the colour red with the following message An unexpected error occurred. 62 00:05:03,660 --> 00:05:08,730 Please try again later if you're interested in learning more about the error. 63 00:05:08,790 --> 00:05:14,220 Check out the console and object has been logged with information related to the error. 64 00:05:14,550 --> 00:05:18,600 You can check out the documentation to learn why the error occurs. 65 00:05:18,900 --> 00:05:23,850 At the moment, we are rendering a universal error message for all errors. 66 00:05:24,180 --> 00:05:27,510 Feel free to tailor the message to a specific error. 67 00:05:27,510 --> 00:05:32,940 As an exercise, we're able to register the user by using a single function. 68 00:05:33,240 --> 00:05:39,510 Firebase handles the rest by sending the request, validating the information on their end and then 69 00:05:39,510 --> 00:05:41,340 providing us with a response. 70 00:05:41,670 --> 00:05:44,640 The only thing we have to handle is the response. 71 00:05:45,090 --> 00:05:51,780 By using Firebase, we can avoid writing backend logic for registering a user with a few clicks. 72 00:05:51,900 --> 00:05:57,480 We have an authentication system ready for us out of the box before moving on. 73 00:05:57,600 --> 00:06:00,630 There's one more feature I want to add to our form. 74 00:06:00,930 --> 00:06:03,360 We should disable the button during submission. 75 00:06:03,690 --> 00:06:08,760 Users shouldn't be able to submit the form while a request is being processed. 76 00:06:09,030 --> 00:06:12,420 Let's go back to the register component class file. 77 00:06:15,050 --> 00:06:21,260 At the top of the class at a property called in submission with an initial value of false. 78 00:06:25,910 --> 00:06:32,010 Next, we will update this property inside the register function at the top of the function. 79 00:06:32,030 --> 00:06:35,330 We all set the in submission property to True. 80 00:06:37,840 --> 00:06:42,340 We are immediately disabling the form when the register function is invoked. 81 00:06:42,640 --> 00:06:49,120 We don't want to enable the form until the requests inside the function have been completed to be more 82 00:06:49,120 --> 00:06:49,840 specific. 83 00:06:50,020 --> 00:06:52,630 We should enable the form when an error occurs. 84 00:06:52,870 --> 00:06:57,100 It isn't necessary to enable the form on unsuccessful submissions. 85 00:06:57,460 --> 00:07:03,580 There isn't a reason to allow users to register an account when they've already registered one at the 86 00:07:03,580 --> 00:07:05,050 end of the catch block. 87 00:07:05,200 --> 00:07:08,650 We will reset the information property to false. 88 00:07:11,180 --> 00:07:13,820 The former doesn't need to be disabled anymore. 89 00:07:14,120 --> 00:07:19,430 We'll want to enable that again so that the user can correct their mistakes and submit the form. 90 00:07:19,820 --> 00:07:24,050 The last step is to bind this property to the button in the form. 91 00:07:24,380 --> 00:07:26,660 Open the register template file. 92 00:07:29,160 --> 00:07:32,820 Scroll to the bottom of the form on the button element. 93 00:07:32,970 --> 00:07:39,030 We are already disabling the button by checking if the invalid property on the group is false. 94 00:07:39,390 --> 00:07:43,770 We will add an order operator to include the information property. 95 00:07:46,410 --> 00:07:50,340 If either of these conditions is true, we will disable the form. 96 00:07:50,610 --> 00:07:56,010 Let's test the button in the browser before doing so, we should turn the throttle on. 97 00:07:56,370 --> 00:08:00,960 If you're on a fast internet connection, requests can happen very fast. 98 00:08:01,230 --> 00:08:03,060 Switch to the network panel. 99 00:08:05,650 --> 00:08:12,490 We will set the throttle option to slow 3G after turning throttling on, let's submit the form with 100 00:08:12,490 --> 00:08:14,320 the same data as before. 101 00:08:20,230 --> 00:08:23,980 As the request is being processed, the button is disabled. 102 00:08:24,280 --> 00:08:29,470 We've effectively stopped users from accidentally submitting the form more than once. 103 00:08:29,770 --> 00:08:33,760 Let's continue working on the registration form in the next lecture. 104 00:08:33,970 --> 00:08:37,240 Be sure to turn throttling off before moving on.