In this lecture, we are going to provide an option for signing out of an application, registering
and logging a user in is one major part of an application.
Another major part is to log the user out.
Currently, the user will stay logged in until their token expires.
The user may want to log out earlier, so we should give them an option to do so.
We're going to modify the navigation menu to add a link for logging the user out in your editor.
Open the navigation template file.
This component is where we can find the navigation menu in an earlier lecture.
We modified this component to output different links.
Search for the energy template element we added to this component.
This template container stores the links for authenticated users.
Let's add the log out link to this template at the end of the element.
We all add a new list item element.
Inside this element, we all add an anchor element with a class called to.
The class we've applied will apply padding to an element.
It's defined by tailwind.
Moving forward, we should listen for the click event.
If the link is clicked, we will run a function called log out with the event object.
We are passing on the event object to prevent the default behavior.
Let's define this function in our component class.
Open the navigation component class file.
Inside the class to find the log out function with the event arguments.
We're listening for the click event on an anchor element clicks on anchor elements can potentially cause
the page to refresh.
We should prevent the default behavior by calling the prevent default function.
Next, we should log the user out.
We're going to need the authentication service by the angular fire package at the top of the file import,
the angular fire off service.
Inside the constructor function, we will inject this service to a property called off off.
We're injecting the service inside the component because signing out can be performed with one line
of code.
There isn't a reason to outsource the method to our service back inside the logout function.
We will call the sign out function from this service.
Signing out of Firebase isn't a synchronous operator, let's have the async await key words to their
respective locations.
Firebase provides a method called sign out, which will assign the user out of the system.
It's going to clear the credentials from the storage.
Firebase will revoke the token that's stored internally if the user attempts to hang onto it.
This single method will take care of everything on the client and server.
We don't need to do anything else.
This will complete the logout functionality.
It's a very straightforward process.
Let's test the log out functionality in the browser.
If we were to press the logout link, we would almost immediately see the log in link again.
Let's check if the surge is cleared and the developer tools.
We want to make sure fire based deleted the user's token and their information will navigate to the
application panel on the sidebar, inspect the storage under indexed DB.
The values from Firebase are gone.
The sign out method we called will clear the storage for us just to make sure let's try refreshing the
page.
Despite refreshing the page, the application won't log a cent will continue to see the log and links
as we did before.
Perfect.
We've successfully logged the user out of the application.