1 00:00:00,180 --> 00:00:05,760 In this lecture, we're going to subscribe to an observable for checking if the user is logged in. 2 00:00:06,090 --> 00:00:11,730 Previously, we discussed how the SDK would manage the user's token on our behalf. 3 00:00:12,120 --> 00:00:18,360 Why if we want to access this information from our app, for example, if we look at our app in the 4 00:00:18,360 --> 00:00:21,600 browser, we have a navigation menu with links. 5 00:00:21,870 --> 00:00:25,230 Some of these links would be shown if the user is logged in. 6 00:00:25,590 --> 00:00:28,650 Other links should be shown if the user is logged out. 7 00:00:28,890 --> 00:00:34,980 It doesn't make sense to ask the user to log in or register for an account if they're already logged 8 00:00:34,980 --> 00:00:35,220 in. 9 00:00:35,910 --> 00:00:41,340 The angular fire package provides an observable for the currently authenticated user. 10 00:00:41,700 --> 00:00:42,840 Let's check it out. 11 00:00:43,110 --> 00:00:45,630 Open the authentication service file. 12 00:00:48,100 --> 00:00:55,030 We are going to store the user's current authentication status inside this service, by doing so, we 13 00:00:55,030 --> 00:01:01,690 can expose the status to every corner of our application before we declare a variable for storing this 14 00:01:01,690 --> 00:01:02,530 information. 15 00:01:02,680 --> 00:01:07,180 Let's subscribe to the observable inside the constructor function. 16 00:01:07,300 --> 00:01:11,410 Call the subscribe function on the off court user property. 17 00:01:14,010 --> 00:01:17,250 We will log the value emitted by this observable. 18 00:01:19,670 --> 00:01:25,730 We can learn more about the values emitted by this observable by hovering our mouse over the property, 19 00:01:26,060 --> 00:01:27,530 according to our editor. 20 00:01:27,710 --> 00:01:32,630 This observable will push an object called user or a no value. 21 00:01:32,990 --> 00:01:37,850 If the observable emits the user object, we can assume the user is logged in. 22 00:01:38,240 --> 00:01:42,140 This object will contain information regarding the user's account. 23 00:01:42,470 --> 00:01:44,150 Let's check if this is true. 24 00:01:44,450 --> 00:01:46,550 Refresh the page in the browser. 25 00:01:49,160 --> 00:01:51,830 Open the console indie developer tools. 26 00:01:54,370 --> 00:01:56,470 I'm currently logged in to Firebase. 27 00:01:56,710 --> 00:02:01,600 It's because I created an account which automatically logs me into the system. 28 00:02:01,930 --> 00:02:07,420 Therefore, I will find an object with my information if you don't see this object. 29 00:02:07,450 --> 00:02:09,490 Chances are you've been logged out. 30 00:02:09,820 --> 00:02:13,450 We haven't made the login form functional in that case. 31 00:02:13,600 --> 00:02:18,900 You will need to create an account if you want to be logged in out of the box. 32 00:02:18,940 --> 00:02:23,350 You've got an observable for verifying the user's authentication status. 33 00:02:23,650 --> 00:02:25,930 Let's switch back to our editors. 34 00:02:28,410 --> 00:02:32,730 It's not completely necessary to define a variable for this object. 35 00:02:33,030 --> 00:02:38,820 After all, the angular fire authentication service is injectable in most components. 36 00:02:39,150 --> 00:02:42,510 We can just inject the service to grab the observable. 37 00:02:42,780 --> 00:02:49,860 However, we should simplify the observable by returning a Boolean value if a component wants to check 38 00:02:49,860 --> 00:02:51,330 if a user is logged in. 39 00:02:51,570 --> 00:02:54,960 It may not need the entirety of the user object. 40 00:02:55,260 --> 00:02:57,840 It may simply want a Boolean value. 41 00:02:58,350 --> 00:03:03,540 In that case, we should modify the output of the observable with operators. 42 00:03:03,840 --> 00:03:05,190 Let's give that a try. 43 00:03:05,490 --> 00:03:11,970 At the top of the class, create a public property called is authenticated dollar sign. 44 00:03:14,600 --> 00:03:20,810 The dollar sign symbol is a special naming convention for identifying properties as observables. 45 00:03:21,110 --> 00:03:25,880 It's not required, but it is a common practice among angular developers. 46 00:03:26,210 --> 00:03:29,810 This symbol must be added at the end of the property name. 47 00:03:30,200 --> 00:03:35,120 We should follow this practice to help other developers identify observables. 48 00:03:35,450 --> 00:03:40,160 Next, we're going to annotate this property with the observable class. 49 00:03:42,640 --> 00:03:48,370 At the top of the file, we will need to import this class from the Oryx James package. 50 00:03:50,830 --> 00:03:57,550 Next, you will need to add a generic for the observable class, we are required to describe the type 51 00:03:57,550 --> 00:04:00,760 of values that will be emitted from this observable. 52 00:04:01,000 --> 00:04:03,130 Let's add a Boolean generic. 53 00:04:05,540 --> 00:04:11,300 The last step is to initiate this property with an observable in the constructor function. 54 00:04:11,480 --> 00:04:16,820 We will set the is authenticated property to the affect user observable. 55 00:04:19,279 --> 00:04:21,019 And errors thrown our way. 56 00:04:21,290 --> 00:04:28,280 As mentioned before, we are creating this observable to push Boolean values, the user observable, 57 00:04:28,280 --> 00:04:31,010 will push an object called user or null. 58 00:04:31,340 --> 00:04:36,440 We will need to transform the value pushed by the user observable to a Boolean. 59 00:04:37,010 --> 00:04:41,600 We spent a lot of time transforming values pushed from observables. 60 00:04:41,960 --> 00:04:45,620 You probably have a good idea of how to perform this action. 61 00:04:45,980 --> 00:04:52,100 We can use paper ball operators to transform values before they are pushed to observers. 62 00:04:52,430 --> 00:04:55,490 Let's change the pipe function on the observable. 63 00:04:58,030 --> 00:05:02,500 We aren't going to need dozens of operators to transform the operator. 64 00:05:02,830 --> 00:05:10,870 The map operator will suffice for our case at the top of the file import the map operator from the Rigs 65 00:05:11,320 --> 00:05:12,640 Operators package. 66 00:05:18,120 --> 00:05:21,960 Next, we are going to add the map operator to the pipe. 67 00:05:24,450 --> 00:05:30,360 Inside the map operator, we will pass in a function for accepting the user argument. 68 00:05:30,660 --> 00:05:35,130 We will return the user argument with the double negation operator. 69 00:05:37,700 --> 00:05:45,050 This single line will typecast the user argument into a Boolean value, we can subscribe to this observable 70 00:05:45,050 --> 00:05:47,780 from our components in the next lecture. 71 00:05:47,960 --> 00:05:51,260 We are going to use this observable in our templates.