1 00:00:00,120 --> 00:00:05,520 In this lecture, we're going to register the user by submitting their data to Firebase. 2 00:00:05,790 --> 00:00:11,190 We're going to need to turn on the authentication feature in Firebase before we can do so. 3 00:00:11,490 --> 00:00:15,870 Otherwise, Firebase will reject our authentication requests. 4 00:00:16,350 --> 00:00:22,260 Open the Firebase console for your project on the sidebar under the Build section. 5 00:00:22,320 --> 00:00:23,940 Click on authentication. 6 00:00:26,260 --> 00:00:32,980 Firebase will give us the following message Authenticate and manage users from a variety of providers 7 00:00:32,980 --> 00:00:34,810 without server side code. 8 00:00:35,410 --> 00:00:41,710 Nowadays, many platforms allow users to register and account on different apps through the platform. 9 00:00:41,980 --> 00:00:44,290 It's quick, easy and flexible. 10 00:00:44,590 --> 00:00:49,900 Some examples of platforms that provide this service are Facebook, Twitter and Google. 11 00:00:50,290 --> 00:00:56,500 These companies are what Firebase is referring to when it uses the word provider to view the list of 12 00:00:56,500 --> 00:00:57,340 providers. 13 00:00:57,370 --> 00:01:00,250 We can switch to the sign in method tap. 14 00:01:02,750 --> 00:01:03,740 Out of the box. 15 00:01:03,860 --> 00:01:06,690 Firebase supports multiple platforms. 16 00:01:06,980 --> 00:01:09,830 The method will select is the email method. 17 00:01:10,100 --> 00:01:13,430 Enable it but don't enable be password less option. 18 00:01:15,860 --> 00:01:20,450 We want to be able to store the password after enabling this provider. 19 00:01:20,510 --> 00:01:21,440 Click Save. 20 00:01:21,710 --> 00:01:24,080 The status will change to enabled. 21 00:01:24,410 --> 00:01:27,800 We can start adding users to our Firebase application. 22 00:01:28,130 --> 00:01:32,960 The next step is to send the user's data to Firebase in your editor. 23 00:01:33,170 --> 00:01:36,110 Open the register component class file. 24 00:01:41,860 --> 00:01:44,110 Scroll down to the register function. 25 00:01:44,440 --> 00:01:48,340 This function handles the form submission for the registration form. 26 00:01:48,700 --> 00:01:51,760 We've already taken care of adding the alert messages. 27 00:01:52,030 --> 00:01:55,540 We can proceed to send the user's data to Firebase. 28 00:01:55,840 --> 00:02:00,460 First, we need to expose Firebase methods in this component. 29 00:02:00,940 --> 00:02:06,250 The modules we've imported, we'll export services that expose Firebase functions. 30 00:02:06,520 --> 00:02:11,170 They can be injected directly into our component at the top of the file. 31 00:02:11,290 --> 00:02:19,300 We're going to import a service called Angular Fire off from the angular slash fire slash compat slash 32 00:02:19,300 --> 00:02:20,320 off package. 33 00:02:22,650 --> 00:02:26,760 Next we will inject this service through the constructor function. 34 00:02:27,090 --> 00:02:29,880 The name of the property will be called off. 35 00:02:32,490 --> 00:02:35,610 This service will be private to the component class. 36 00:02:35,850 --> 00:02:38,520 It doesn't need to be accessible in the template. 37 00:02:38,820 --> 00:02:45,000 It's not completely necessary to prioritize this property, but it's good to get into the habit of limiting 38 00:02:45,000 --> 00:02:46,590 the access of a property. 39 00:02:46,920 --> 00:02:50,760 After injecting this service, we can start using its methods. 40 00:02:51,180 --> 00:02:54,360 The question is which method do we want to use? 41 00:02:54,630 --> 00:02:57,180 In the resource section of this lecture. 42 00:02:57,360 --> 00:03:01,230 I provide a link to a page for getting started with authentication. 43 00:03:03,750 --> 00:03:11,250 The most important information on this page is the following description Angler Fire off promise proxies 44 00:03:11,250 --> 00:03:19,290 and initialized fire based off dot off instance allowing you to log users in, out, etc.. 45 00:03:19,620 --> 00:03:25,980 See the Fire Bay stocks for more information on what methods are available at the end of the day. 46 00:03:26,010 --> 00:03:30,540 The angular fire package is a wrapper around fire base's SDK. 47 00:03:30,840 --> 00:03:34,560 The developers don't think it's necessary to reinvent the wheel. 48 00:03:34,830 --> 00:03:40,740 Instead, the service we've injected is a wrapper around fire base's existing methods. 49 00:03:41,040 --> 00:03:47,730 If we want to learn more about the methods available in a service, we need to view fire basis documentation. 50 00:03:48,090 --> 00:03:51,720 We are given a link to the object exposed by this service. 51 00:03:51,990 --> 00:03:52,730 Click on it. 52 00:03:55,310 --> 00:04:01,760 The authentication service will give us access to the properties and methods listed on this documentation 53 00:04:01,760 --> 00:04:02,270 page. 54 00:04:02,690 --> 00:04:07,610 The method will want to use is called create user with email and password. 55 00:04:07,970 --> 00:04:09,380 Click on it from the list. 56 00:04:11,940 --> 00:04:17,310 According to the documentation, it expects the email and password as arguments. 57 00:04:17,550 --> 00:04:19,680 The returned value is a promise. 58 00:04:20,010 --> 00:04:26,280 The promise would resolve to an object with the user's credentials if the authentication were a success. 59 00:04:26,730 --> 00:04:33,210 The description says the following about the function creates a new user account associated with the 60 00:04:33,210 --> 00:04:39,060 specified email address and password on successful creation of a user accounts. 61 00:04:39,330 --> 00:04:42,540 This user will also be signed into your application. 62 00:04:42,930 --> 00:04:49,140 User account creation can fail if the account already exists or the password is invalid. 63 00:04:49,770 --> 00:04:52,620 I want to emphasize this part of the description. 64 00:04:53,100 --> 00:04:58,410 Firebase will automatically log the user in if their account was created successfully. 65 00:04:58,740 --> 00:05:00,570 That information is beneficial. 66 00:05:00,840 --> 00:05:04,290 The model will need to be hidden upon creating an account. 67 00:05:04,650 --> 00:05:08,160 Reading further will find a list of possible errors. 68 00:05:10,680 --> 00:05:13,260 Lastly, there is an example we can use. 69 00:05:13,530 --> 00:05:15,840 We won't use the example they provide. 70 00:05:16,140 --> 00:05:20,520 We're going to take a slightly different approach than the default example. 71 00:05:20,790 --> 00:05:22,410 Let's go back to the editor. 72 00:05:25,070 --> 00:05:28,100 Scroll down to the register of function definition. 73 00:05:28,460 --> 00:05:30,560 The function should be asynchronous. 74 00:05:30,860 --> 00:05:33,770 We will add the async keyword to the function. 75 00:05:36,390 --> 00:05:41,760 As noted in the documentation, the create user function will return a promise. 76 00:05:42,060 --> 00:05:45,030 I prefer to use async await syntax. 77 00:05:45,270 --> 00:05:48,450 Promises are much easier to read with this syntax. 78 00:05:48,690 --> 00:05:50,730 Next, let's invoke the function. 79 00:05:51,060 --> 00:05:53,980 We will call the function after updating the alerts. 80 00:05:54,270 --> 00:05:56,910 Call the following function off dot. 81 00:05:56,970 --> 00:05:59,910 Create user with email and password. 82 00:06:02,470 --> 00:06:05,980 Before calling this function and the await keyword. 83 00:06:08,550 --> 00:06:14,040 The Create user function will send a request to Firebase with the user's credentials. 84 00:06:14,280 --> 00:06:18,150 If successful, will be returned with the user's credentials. 85 00:06:18,420 --> 00:06:25,020 We should store these credentials, assign the value return by this function to a variable called user 86 00:06:25,020 --> 00:06:25,740 credential. 87 00:06:28,340 --> 00:06:30,500 We can't forget about the arguments. 88 00:06:30,860 --> 00:06:36,320 The documentation says the first argument is the e-mail and the second is the password. 89 00:06:36,650 --> 00:06:39,290 These values can be found under the register. 90 00:06:39,290 --> 00:06:43,400 Form, object form groups have a property called value. 91 00:06:43,760 --> 00:06:47,930 This object holds a copy of the values from the form controls. 92 00:06:48,440 --> 00:06:53,090 For readability, we should structure these values above the function. 93 00:06:53,120 --> 00:07:00,800 We will structure the this dot register form that value object for the email and password properties. 94 00:07:03,320 --> 00:07:07,100 The values from the form controls can be retrieved by their names. 95 00:07:07,370 --> 00:07:11,360 Lastly, we will pass them into the create user function. 96 00:07:14,650 --> 00:07:15,380 Hey, everyone. 97 00:07:15,400 --> 00:07:16,540 It's me from the future. 98 00:07:16,690 --> 00:07:21,160 In the latest version of Angular, stronger type support for forms has been added. 99 00:07:21,400 --> 00:07:27,430 While beneficial, it does cause some problems with our current solution inside the create user. 100 00:07:27,430 --> 00:07:33,250 With email function, you may need to assert the types of the email and password variables by using 101 00:07:33,250 --> 00:07:34,390 the as keyword. 102 00:07:34,690 --> 00:07:37,760 In both cases, you can assert the type to screen. 103 00:07:38,140 --> 00:07:40,420 This should resolve any issues you may have. 104 00:07:40,690 --> 00:07:41,230 All right. 105 00:07:41,380 --> 00:07:42,400 Back to the video. 106 00:07:44,510 --> 00:07:49,190 With this one function, we've successfully registered a user into our app. 107 00:07:49,490 --> 00:07:53,930 In the next lecture we are going to handle the response by this function.