Original subtitles

Registering and logging a user in is one major part of the 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.

The template I provided you comes with a primary navigation menu.

On the left we have the log in and register links.

If the user is logged in, we'll want to hide this link.

There's another link called Manage which will want to render if the user is logged in.

As for the log out link, we'll add it in when the user is logged in.

Accomplishing this won't be difficult.

The If directive will help us perform this task.

Before we get started, let's make one minor adjustment.

We're going to refresh the page.

If the user successfully logs in, there's no point in having the authentication modal around once the

user is logged in.

In addition, it'll help us verify that the authentication state persists across page refreshes.

We'll start with the register form component.

Open it in your editor.

At the end of the Register method, we're going to access the window location object.

This object is a global JavaScript object that's not specific to view.

The browser defines it.

It comes with a method called reload that will want to call.

The reload method will refresh the page.

We'll do the same inside the log and form component.

Open it in your editor next.

Call the window location reload function at the end of the login method.

Let's give things a test.

If you're already logged in, clear the storage, then log in.

After successfully logging in the page will refresh check the view developer tools to check the state.

Distinct property was mutated, indicating the user was logged in.

All right.

Let's move on to logging the user out.

We're going to modify the navigation menu to add a link for logging the user out.

We'll open the header component file in our editor.

This component is where we placed the navigation menu.

We'll search for the links by looking for an unordered list element.

There's a comment above them that says Primary navigation.

We want to hide the login link if the user is logged in.

We're going to apply the if directive to the list element surrounding the link.

We're going to check if the user is authenticated in the state.

We don't have access to this state at the moment.

We'll need to import the appropriate mapping functions.

Scroll down to the script.

BLOCK We're already importing the map.

Stores function from the Linea package.

This function is not limited to mapping a single store.

We can map multiple stores.

Let's import the user store.

Next inside the map stores function pass in the user store.

Scroll back to the link in the template inside the VRF directive we'll pass in the user logged in state

property for the condition.

We're going to add the not operator before the condition.

We want to check if this evaluates to false.

If it does, we'll render the login link, otherwise it'll be hidden.

The link next to this one is the managed link.

We'll render it if the user is logged in, will attach the the else directive to the next list item

to get this effect.

The Manage link will redirect users to a page that will allow them to manage their songs.

We haven't created that page, but we will soon.

For now, toggling its visibility will suffice.

There's one more link we'll want to add.

However, we face one issue.

We can't apply the directive multiple times.

Luckily, there's a simple solution for getting around this.

We'll surround the list item element for the manage link with the template tag.

Next we can move the director from the list item elements to the template tag.

By wrapping it with the template tags, we'll be able to render multiple list items.

We'll copy the list item element for the manage link.

We'll change the inner text to say Log out.

Let's check if this works.

If you're logged in, you will see the manage and log out links in the navigation menu.

The log in link is hidden from view.

So far so good.

The next step is to make the log out link functional.

Firebase offers a simple method for logging the user out.

First, we'll open the store file in our editors.

Since we're writing logic that will affect the state will place the code in an action inside the actions

object.

Add a function called sign out.

Be sure to add the async keyword before the function definition.

Signing the user out is an asynchronous task.

Inside the function, we're going to call the following method a weight off dot sign out.

Firebase provides a method called Sign Out, which will sign the user out of the system.

It's going to clear the credentials from the storage.

Firebase will revoke the token that stored internally if the user attempts to hang on to it.

This single method will take care of everything on the client and server.

After logging out from Firebase, we can update the state after the sign out function set the this dot

user logged in state property to false.

The action function is ready.

Let's call it from the header component.

We'll head on over to it.

The very last step is to call the sign out function.

If the logout link is clicked, scroll to the template block on the anchor element for the logout link.

Listen for the click event with the Prevent Modifier.

The Prevent modifier will stop the default behavior.

If this event is triggered, we'll want to call the sign out method we mapped.

This will complete the logout functionality.

It's a very straightforward process.

Let's test the logout functionality in the browser.

If I were to press the logout link, we would almost immediately see the login link again.

Let's check if things are clear in the developer tools.

First, we'll check with the state.

As you can see, the user logged in state property has been set to false.

All right.

Let's check the storage next.

We want to make sure Firebase deleted the user's token and their information.

We'll navigate to the application panel on the sidebar, inspect the storage under indexed DB.

We'll find that the values stored by Firebase are gone.

The sign out method we called in the action 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 us in.

We'll continue to see the login links like we did before.

Perfect.

We've successfully logged the user out of the application.