1 00:00:00,120 --> 00:00:04,920 In this lecture, we were going to connect a user's data with their account in Firebase. 2 00:00:05,220 --> 00:00:09,990 There are still some issues we'll need to address before we can move on to the login form. 3 00:00:10,320 --> 00:00:15,150 One of those issues is connecting the user with their data in Firebase. 4 00:00:15,180 --> 00:00:18,670 We're storing the user's information in two different services. 5 00:00:18,990 --> 00:00:24,600 The authentication and database service at the moment, we don't have a way to connect the two. 6 00:00:24,960 --> 00:00:29,670 We don't know which document belongs to which user in the authentication service. 7 00:00:30,060 --> 00:00:34,860 There is one common value between the two services that would be the email. 8 00:00:35,340 --> 00:00:38,730 I don't recommend using the email to keep track of the user. 9 00:00:39,000 --> 00:00:41,160 It's because emails can change. 10 00:00:41,400 --> 00:00:45,420 If the email changes, we will have to perform two updates. 11 00:00:45,780 --> 00:00:51,180 We will need to update the user in the authentication service and the document in the database. 12 00:00:51,540 --> 00:00:53,500 We want something that will be consistent. 13 00:00:53,520 --> 00:00:55,380 Once the user has registered. 14 00:00:55,740 --> 00:00:58,290 Luckily, there is a value we can use. 15 00:00:58,740 --> 00:01:02,730 Navigate to the authenticated section in the Firebase console. 16 00:01:03,150 --> 00:01:05,790 Every user is assigned a user UID. 17 00:01:06,390 --> 00:01:07,890 This value is unique. 18 00:01:08,130 --> 00:01:09,360 It will never change. 19 00:01:09,660 --> 00:01:16,290 By using this value, we can store a copy of this ID with the user's document, thus connecting the 20 00:01:16,290 --> 00:01:19,020 user across Firebase services. 21 00:01:19,530 --> 00:01:26,850 Likewise, Firebase will assign a unique ID to each document, navigate to the database in the Firebase 22 00:01:26,850 --> 00:01:29,580 console, select the user's collection. 23 00:01:29,580 --> 00:01:36,060 If it hasn't been auto selected already in the middle column will find a list of random strings. 24 00:01:36,420 --> 00:01:39,570 These are unique IDs assigned to each document. 25 00:01:39,870 --> 00:01:42,780 The ID is automatically generated for us. 26 00:01:42,990 --> 00:01:47,610 We should override this behavior instead of a randomly generated ID. 27 00:01:48,150 --> 00:01:52,920 We're going to use the ID assigned to the user in the authentication service. 28 00:01:53,400 --> 00:01:56,730 Before we get started, I want to make one point clear. 29 00:01:57,120 --> 00:01:59,790 This issue is a Firebase related issue. 30 00:02:00,090 --> 00:02:06,810 It is not an angular issue, storing user data, establishing relationships and performing updates or 31 00:02:06,810 --> 00:02:08,520 a backend developer's job. 32 00:02:08,940 --> 00:02:14,790 As for our front end developers, our responsibility is to send the data to the correct endpoint. 33 00:02:15,000 --> 00:02:19,350 Storing tokens received from the back end and render the correct template. 34 00:02:19,740 --> 00:02:22,680 The token permits us to interact with the database. 35 00:02:22,890 --> 00:02:25,920 Other than that, everything else is backend related. 36 00:02:26,340 --> 00:02:31,890 With that being said, I still want to show you how to accomplish this task with Firebase. 37 00:02:32,250 --> 00:02:35,190 Some of you may want to use it as your back end solution. 38 00:02:35,550 --> 00:02:38,940 That's fine even if you decide to use a different backend. 39 00:02:39,000 --> 00:02:41,340 The process on the front end is still the same. 40 00:02:41,910 --> 00:02:44,760 All right, let's get started and your editor. 41 00:02:44,880 --> 00:02:47,490 Open the authentication service file. 42 00:02:49,980 --> 00:02:55,350 We're going to connect the services during registration in the create user function. 43 00:02:55,440 --> 00:02:58,680 We are calling the Create user with email function. 44 00:02:59,040 --> 00:03:03,120 This function must be called before adding a document to the database. 45 00:03:03,450 --> 00:03:07,650 The ID for the user is generated from the authentication service. 46 00:03:07,980 --> 00:03:11,000 We can't insert that document until we have an ID. 47 00:03:11,940 --> 00:03:15,480 Once an account has been created, we need to retrieve the ID. 48 00:03:16,050 --> 00:03:21,240 Luckily, we're storing the value returned by the Create user with email function. 49 00:03:21,630 --> 00:03:26,910 The type of value returned by this function is an object called user credentials. 50 00:03:27,300 --> 00:03:32,640 It contains the information we're going to need in the resource section of this lecture. 51 00:03:32,820 --> 00:03:34,800 I provide a link to this function. 52 00:03:37,360 --> 00:03:42,460 Learning how to navigate documentation is an invaluable skill for a developer. 53 00:03:42,850 --> 00:03:47,890 I want to show you the process I went through for discovering the ID of the user. 54 00:03:48,220 --> 00:03:52,900 If we scroll down, we will come across a section of returned values. 55 00:03:53,260 --> 00:03:59,050 This function will return a promise that gets resolved to an object called user credential. 56 00:03:59,380 --> 00:04:02,260 Let's click on the link to learn about this object. 57 00:04:04,740 --> 00:04:07,950 The user credential object has three properties. 58 00:04:08,220 --> 00:04:10,890 Normally I would go through each object. 59 00:04:11,190 --> 00:04:15,840 However, I know ahead of time which object to select the property. 60 00:04:15,840 --> 00:04:19,260 Containing the information we need is the user property. 61 00:04:19,560 --> 00:04:22,200 We'll click on the link again for more information. 62 00:04:24,630 --> 00:04:27,960 Eventually will arrive at an interface definition. 63 00:04:28,200 --> 00:04:32,160 However, we're not finished yet looking through the documentation. 64 00:04:32,310 --> 00:04:35,010 There isn't info on the ID of the user. 65 00:04:35,310 --> 00:04:37,200 Did we click on the right definition? 66 00:04:37,410 --> 00:04:38,580 The answer is no. 67 00:04:38,820 --> 00:04:44,910 If we look at the definition, the interface is extending another interface called user info. 68 00:04:45,270 --> 00:04:49,530 It's possible the ID of the user can be found under this definition. 69 00:04:49,860 --> 00:04:50,880 Let's click on it. 70 00:04:53,390 --> 00:05:00,590 This page is where we'll find the information we'll need the user info object stores, properties relative 71 00:05:00,590 --> 00:05:05,570 to the user stored in the authentication service under the list of properties. 72 00:05:05,790 --> 00:05:07,560 There's a property called UID. 73 00:05:08,210 --> 00:05:12,500 If we click on it, it'll tell us the following the user's unique ID. 74 00:05:13,340 --> 00:05:16,190 This property is exactly what we're looking for. 75 00:05:16,370 --> 00:05:21,770 To be clear, this is the ID assigned to the user in the authentication service. 76 00:05:22,100 --> 00:05:24,890 We're going to save this ID in the database. 77 00:05:25,100 --> 00:05:27,050 Let's switch back to the ED. 78 00:05:29,540 --> 00:05:34,580 With our newly obtained knowledge, we can update this request to the database. 79 00:05:34,910 --> 00:05:42,680 The request should be updated to add the ID Firebase has two functions for inserting data into the collection. 80 00:05:43,010 --> 00:05:46,140 We're using the first function, the add function. 81 00:05:46,140 --> 00:05:49,970 You will insert a document into a collection with a generated ID. 82 00:05:50,600 --> 00:05:55,640 It doesn't allow you to generate an ID yourself if you'd like to use a custom ID. 83 00:05:56,090 --> 00:05:57,890 You'll need to use the other function. 84 00:05:58,460 --> 00:06:01,100 The second function is called Document. 85 00:06:01,460 --> 00:06:04,460 The document function performs two actions. 86 00:06:04,710 --> 00:06:09,920 First, it'll attempt to select a document if the document doesn't exist. 87 00:06:10,100 --> 00:06:11,990 It'll generate a new document. 88 00:06:12,360 --> 00:06:16,190 Afterward, the new document is returned by this function. 89 00:06:16,550 --> 00:06:23,750 Unlike the add function, we can assign a unique ID to the document on the second request before we 90 00:06:23,750 --> 00:06:25,220 call the add function. 91 00:06:25,250 --> 00:06:26,900 Change the document function. 92 00:06:29,410 --> 00:06:34,270 It has one argument, which is the name of the ID will pass in the following. 93 00:06:34,540 --> 00:06:37,540 He was or credential Typekit user, not UID. 94 00:06:40,410 --> 00:06:42,750 An error will appear from TypeScript. 95 00:06:43,050 --> 00:06:45,990 Let's hover our mouse over the user property. 96 00:06:46,410 --> 00:06:51,180 According to the editor, the user property can store one of two values. 97 00:06:51,510 --> 00:06:54,330 It can store a user object or be null. 98 00:06:54,660 --> 00:06:59,070 However, the document function does not allow for a value to be null. 99 00:06:59,610 --> 00:07:06,240 We can fix this issue with a conditional statement above the request and a conditional statement with 100 00:07:06,240 --> 00:07:10,440 the following condition not user credential user. 101 00:07:13,020 --> 00:07:19,290 We are checking if the user property is not null, if it is, we will throw an error with the following 102 00:07:19,290 --> 00:07:19,920 message. 103 00:07:20,160 --> 00:07:21,780 User can't be found. 104 00:07:24,240 --> 00:07:25,800 The air has gone away. 105 00:07:26,100 --> 00:07:29,400 We can proceed to start adding data to the document. 106 00:07:29,700 --> 00:07:32,520 The document function returns a document. 107 00:07:32,820 --> 00:07:35,130 The document is completely empty. 108 00:07:35,460 --> 00:07:38,190 It does not come with the function called add. 109 00:07:38,520 --> 00:07:44,130 If we want to add data to the document, we need to change another function called set. 110 00:07:44,610 --> 00:07:47,940 We can replace the add function with the set function. 111 00:07:50,600 --> 00:07:55,580 The set of function will add or modify existing properties in a document. 112 00:07:55,940 --> 00:08:00,740 The argument is an object of properties we'd like to add or edit. 113 00:08:01,130 --> 00:08:04,520 We don't need to perform further changes to this object. 114 00:08:04,850 --> 00:08:08,030 It'll work as is before we test things. 115 00:08:08,150 --> 00:08:10,430 I want to perform one more task. 116 00:08:10,670 --> 00:08:12,500 I haven't been completely honest. 117 00:08:12,770 --> 00:08:19,100 The authentication service can store additional information about the user, but it's limited registered 118 00:08:19,100 --> 00:08:20,960 users come with their profile. 119 00:08:21,230 --> 00:08:27,980 There are two pieces of information we can store in their profile a display name and a profile image. 120 00:08:28,310 --> 00:08:34,940 For example, purposes will store the display name in the service after storing the user in. 121 00:08:34,940 --> 00:08:38,750 The collection will call a function called user credentials. 122 00:08:38,750 --> 00:08:41,360 Typekit User Dot Update Profile. 123 00:08:43,780 --> 00:08:45,370 It has one argument. 124 00:08:45,640 --> 00:08:49,270 It's an object of properties we'd like to update on the profile. 125 00:08:49,630 --> 00:08:52,870 There are two properties we can update on the profile. 126 00:08:53,140 --> 00:08:55,660 The display name and profile image. 127 00:08:55,930 --> 00:09:02,620 We won't have a profile image, so we'll set the display name property to the name in the user data 128 00:09:02,620 --> 00:09:03,340 parameter. 129 00:09:05,800 --> 00:09:10,450 The task is asynchronous, we'll add the await keyword to the function. 130 00:09:12,990 --> 00:09:16,710 Let's try testing our registration form inside the app. 131 00:09:16,830 --> 00:09:19,590 Create a new user with valid credentials. 132 00:09:25,720 --> 00:09:28,450 On my end, I receive a success message. 133 00:09:28,690 --> 00:09:29,560 Fantastic. 134 00:09:29,800 --> 00:09:36,370 Let's verify the user's account in Firebase, navigate to the authenticated section in the console. 135 00:09:38,880 --> 00:09:43,230 In the authenticated section, a new account has been added to our app. 136 00:09:43,590 --> 00:09:46,290 Take note of the ID assigned to the user. 137 00:09:46,560 --> 00:09:50,430 It should match the ID assigned to the document in the database. 138 00:09:50,730 --> 00:09:54,210 Let's switch over to the database to check if that's true. 139 00:09:56,730 --> 00:10:01,260 Plainly enough, the IDs match everything works as we wanted it to. 140 00:10:01,530 --> 00:10:07,140 We've successfully connected the users data in the database to their authenticated account.