Original subtitles

The very last thing we want to do before moving on to the login form is to persist the authentication.

After a user registers an account, they are automatically logged into the system.

The token is stored locally on the system.

The Firebase SDK handles that.

We've also taken the time to create a state property.

The problem we currently face is that if the user refreshes the page, then there are no longer authenticated

into the app.

At the end of the day, the UX is plain JavaScript.

Any data stored in the store will become lost if the user navigates away from our site.

The user logged in state property is set to false.

This value is not what we want.

We want to be able to log the user back in.

If they come back to the application, we can use the token generated by Firebase to help us solve this

issue.

Firebase will keep track of the token for us.

Even if the page refreshes, we can use it to tell the Vue application to set the state property to

true.

If the user is logged in, here's how we'll solve this problem.

First, we'll need to load firebase before we load view.

We can't check if the user is logged in if Firebase hasn't been initialized.

The second step is to check the token after the Vue application has been initialized.

If the token is valid, then we'll set the state property to true.

We'll take care of the first step in this lecture.

Let's begin open the main JS file in your editor.

The first step is to initialize Firebase before we initialize the app.

The app is initialized in the main JS file.

We're going to modify it to wait for Firebase to initialize first.

Specifically, we want to wait for when the authentication service is ready.

Behind the scenes, Firebase will make a request to the authentication service.

It'll check if the user is logged in.

After receiving a response, Firebase will fire an event we can listen to.

We'll want to listen for that event.

It'll tell us if the user is logged in.

First, we'll need to update the import statement for the Firebase file.

Previously, we were importing the file without assigning the import a reference.

We'll want to update this to grab the authentication object.

The authentication object is how we'll be able to listen for the event.

The structure, the import statement for the authentication object.

The next thing we'll do is listen for the event.

We're going to add the code before we initialize the view application using the authentication object

call.

The method off state changed.

This method has one argument which is the callback function to call when the event is emitted will pass

in an arrow function.

Firebase will emit the event whenever the user's authentication state changes.

This includes when the user is logged out.

It will run immediately after Firebase is loaded on the page.

It's guaranteed to run at least once.

This event makes it safe to place the view instance inside of it.

We're going to cut the new instance of view and paste it into the callback function.

There is one problem with this approach.

The event can be emitted multiple times.

We don't want to initialize view every single time.

We can prevent this issue from occurring by using a variable before the events define a variable called

app.

We won't assign it any type of value.

Then inside the callback function, create a conditional statement that checks if the app variable is

empty.

We'll cut and paste the View app into the conditional statement.

Lastly, we'll set the app variable to the create app function.

By storing the application in a variable, we can check if the app has already been initialized.

If it already has, we won't need to initialize it again.

This takes care of the first step.

We've loaded Firebase so that we can check if the user is authenticated when the application starts.

The next step is to check if the user is authenticated.

After the application is initialized.

We'll take care of this step in the next lecture.