1 00:00:01,170 --> 00:00:07,440 In this lecture, we are going to provide an option for signing out of an application, registering 2 00:00:07,440 --> 00:00:11,580 and logging a user in is one major part of an application. 3 00:00:11,880 --> 00:00:14,700 Another major part is to log the user out. 4 00:00:15,060 --> 00:00:19,290 Currently, the user will stay logged in until their token expires. 5 00:00:19,620 --> 00:00:24,270 The user may want to log out earlier, so we should give them an option to do so. 6 00:00:24,780 --> 00:00:31,110 We're going to modify the navigation menu to add a link for logging the user out in your editor. 7 00:00:31,200 --> 00:00:33,540 Open the navigation template file. 8 00:00:36,050 --> 00:00:41,190 This component is where we can find the navigation menu in an earlier lecture. 9 00:00:41,210 --> 00:00:44,810 We modified this component to output different links. 10 00:00:45,140 --> 00:00:49,460 Search for the energy template element we added to this component. 11 00:00:52,080 --> 00:00:56,250 This template container stores the links for authenticated users. 12 00:00:56,490 --> 00:01:01,020 Let's add the log out link to this template at the end of the element. 13 00:01:01,080 --> 00:01:03,900 We all add a new list item element. 14 00:01:06,460 --> 00:01:11,920 Inside this element, we all add an anchor element with a class called to. 15 00:01:14,500 --> 00:01:17,740 The class we've applied will apply padding to an element. 16 00:01:18,040 --> 00:01:19,720 It's defined by tailwind. 17 00:01:19,990 --> 00:01:23,170 Moving forward, we should listen for the click event. 18 00:01:25,740 --> 00:01:30,960 If the link is clicked, we will run a function called log out with the event object. 19 00:01:33,500 --> 00:01:37,700 We are passing on the event object to prevent the default behavior. 20 00:01:38,000 --> 00:01:40,910 Let's define this function in our component class. 21 00:01:41,180 --> 00:01:44,060 Open the navigation component class file. 22 00:01:46,640 --> 00:01:51,350 Inside the class to find the log out function with the event arguments. 23 00:01:53,860 --> 00:02:00,520 We're listening for the click event on an anchor element clicks on anchor elements can potentially cause 24 00:02:00,520 --> 00:02:01,870 the page to refresh. 25 00:02:02,170 --> 00:02:06,670 We should prevent the default behavior by calling the prevent default function. 26 00:02:09,190 --> 00:02:11,530 Next, we should log the user out. 27 00:02:11,860 --> 00:02:18,640 We're going to need the authentication service by the angular fire package at the top of the file import, 28 00:02:18,640 --> 00:02:20,830 the angular fire off service. 29 00:02:23,270 --> 00:02:29,180 Inside the constructor function, we will inject this service to a property called off off. 30 00:02:31,880 --> 00:02:37,310 We're injecting the service inside the component because signing out can be performed with one line 31 00:02:37,310 --> 00:02:37,850 of code. 32 00:02:38,300 --> 00:02:43,730 There isn't a reason to outsource the method to our service back inside the logout function. 33 00:02:43,910 --> 00:02:47,120 We will call the sign out function from this service. 34 00:02:49,700 --> 00:02:56,240 Signing out of Firebase isn't a synchronous operator, let's have the async await key words to their 35 00:02:56,240 --> 00:02:57,740 respective locations. 36 00:03:00,350 --> 00:03:05,720 Firebase provides a method called sign out, which will assign the user out of the system. 37 00:03:05,990 --> 00:03:08,930 It's going to clear the credentials from the storage. 38 00:03:09,200 --> 00:03:15,200 Firebase will revoke the token that's stored internally if the user attempts to hang onto it. 39 00:03:15,620 --> 00:03:19,820 This single method will take care of everything on the client and server. 40 00:03:20,480 --> 00:03:22,460 We don't need to do anything else. 41 00:03:22,790 --> 00:03:25,160 This will complete the logout functionality. 42 00:03:25,460 --> 00:03:27,650 It's a very straightforward process. 43 00:03:27,980 --> 00:03:31,550 Let's test the log out functionality in the browser. 44 00:03:34,230 --> 00:03:39,630 If we were to press the logout link, we would almost immediately see the log in link again. 45 00:03:42,320 --> 00:03:45,650 Let's check if the surge is cleared and the developer tools. 46 00:03:46,040 --> 00:03:52,610 We want to make sure fire based deleted the user's token and their information will navigate to the 47 00:03:52,610 --> 00:03:58,610 application panel on the sidebar, inspect the storage under indexed DB. 48 00:04:01,200 --> 00:04:03,330 The values from Firebase are gone. 49 00:04:03,570 --> 00:04:10,020 The sign out method we called will clear the storage for us just to make sure let's try refreshing the 50 00:04:10,020 --> 00:04:10,620 page. 51 00:04:13,100 --> 00:04:19,640 Despite refreshing the page, the application won't log a cent will continue to see the log and links 52 00:04:19,640 --> 00:04:20,899 as we did before. 53 00:04:21,170 --> 00:04:21,800 Perfect. 54 00:04:21,980 --> 00:04:25,640 We've successfully logged the user out of the application.