Original subtitles

In this lecture, we're going to persist the user authentication.

Previously we waited for Firebase to initialize.

At this point we can check with Firebase if the user is logged in, we're going to perform this check

in the earliest phase of our application.

The app component is considered the root component.

This component is the first component that's initialized.

Open the app component file.

First we're going to need the state import the map readable store function from the penny a package.

Next import the user store.

Inside the components configuration object.

Add the computed object.

Called the map writable state function with the spread operator.

Pass in the user store.

Lastly, add an array with the user logged in state.

Overall, we're mapping the state to the component.

These are steps we've taken before.

It's time to start checking the authentication status of the user inside the exported object.

We're going to define the created method.

This life cycle function is called when the component is created, as you learned in a previous lecture.

In this function, we're going to perform a conditional statement.

The condition will check if the user is logged in.

If they are, we'll update the state.

Otherwise, we won't do anything at the top of the script.

BLOCK.

Import the authentication service from the Firebase File.

This service will help us detect the authentication of the user back in the lifecycle function.

Add a conditional statement.

Next set the condition to the following of dot current user.

The current user property holds information about the user currently logged in.

If they're not logged in, it'll be set to null.

If the variable is an object filled with properties, this will evaluate to a truth value.

The last step is to set the user logged in state property to true within the conditional statement.

Update the state.

Let's check if everything is working.

Open the app in your browser.

We'll start by refreshing the page.

The app will start normally.

It won't start until the Firebase event we're listening for is fired off.

The event is emitted immediately after the page loads.

We don't have to worry about the app never loading because we're guaranteed that the callback function

will execute at least once.

Open the developer tools.

If you haven't already under the View panel, a new tab should be available called Pinna.

This tab contains a complete list of stores within our application.

As you can see, the modal store is available.

If you can't find the user store, that's perfectly fine.

Chances are you're not logged into the application.

I'm going to quickly register an account.

Next, I will refresh the page.

If we look at the developer tools, the user store has been added.

Taking a closer look, the user logged in state property has been set to true.

Let's refresh the page.

Great.

We can refresh the page as many times as we want.

We'll always be logged in.

Let's try testing if the opposite is true.

During the authentication process, Firebase will store a token on the client.

You never have to worry about the token because it's managed for you by the sdhc.

However, that doesn't mean you don't have access to it, and the developer tools switch to the application

panel.

The application panel allows you to view the metadata of your application.

This includes things like storage service workers or the manifest document.

We're interested in viewing the storage for the application on the sidebar.

There are various storage solutions.

Firebase uses indexed DB.

Under this storage, we'll find the Firebase Local Storage.

Click on it.

Firebase will store the user's information under a key called Firebase Auth.

Under the value column, there's an extensive list of properties.

This location is where Firebase is storing the user's authentication information.

We'll want to remove this to start with a clean slate.

Without a token, Firebase will not be able to verify the user is logged in.

It'll default to saying the user is logged out.

We have two ways of clearing the data.

We can select the row and then click on this button that says Delete Selected.

Alternatively, we can switch to the Clear Data tab under the application section.

In the sidebar, this town will give you an overview of the data stored from the application.

Scrolling down, you'll come across a button to clear the data.

Click on it.

I prefer to clear the entire data just in case I miss anything.

It'll altogether remove any data associated with our application after doing so.

Let's refresh the page.

The app loads.

Normally we'll switch to the View panel to view the mutation logs.

Unlike before, the user store may not appear.

Alternatively, if it does, the user logged in state property should be set to false.

This is because we removed the user's data from the storage.

Firebase is unable to authenticate the user.

Henceforth, these state does not get updated.

That's exactly what we're looking to accomplish.

We've successfully created an application that persists the user's authentication.

We've completed the registration form.

After ten lectures, we were able to register the user, store their data and persist their log in.

It took a lot of work, but it's well worth it.

In the next lecture we're going to work on the login form.

When you're ready, I'll see you there.