In this lecture, we're going to initialize Firebase before initializing our app.
This step is optional, but I like to wait for Firebase to initialize before initializing angular.
Let's find out why in the browser.
Open your app with the developer tools under the network panel.
Turn throttling on.
I recommend setting the throttle option to slow 3G.
Next, refresh the page as the page loads, the log in link will appear for a few seconds until Firebase
is initialized.
We are assuming the user isn't logged in.
It makes sense why we see the log in link during the loading process.
Once Firebase is initialized, our subscription will cost the template to render different links.
I'm not a huge fan of this behaviour.
It would be nice if our app could display the correct set of links immediately.
Unfortunately, this is not achievable unless we enable server side rendering or static site generation.
However, there is an alternative solution that will get us pretty close to the desired behaviour.
At the moment, we are initializing angular first, after angular is initialized, Firebase gets initialized.
This order of initialization is absolute.
What if we could reverse this order?
By reversing the order, we could render the correct links almost immediately.
It's completely possible and allowed to render Firebase before angular.
Let's learn how.
In the resource section of this lecture, I provide a link to fire bases installation page for the SDK.
The installation of Firebase is handled by angular fire.
We didn't have to manually install the SDK.
However, since we're trying to initialize Firebase first, we will need to manually install the SDK.
This page will go over the steps in detail.
You can refer to it if you want more information.
We need to initialize Firebase from the main TKTS file.
Open this file in your editor.
As a refresher, the main doctor's file is the entry file for our app, it's the first file that runs
when we load our app in the browser.
We've discussed the code inside this file at length.
Check out the third section if you'd like to review the code inside this file.
We're going to initialize Firebase in this file.
Angular does not get loaded until we call the bootstrap module function.
As long as we initialize Firebase before calling this function, we should get the desired behavior.
The first step is to import Firebase at the top of the file import Firebase from the Firebase slash
compat slash app package.
Once again, we're installing Firebase manually.
We're not importing functions from the angular fire package.
Instead, we're directly importing Firebase along with Firebase.
We will import the Firebase slash compat slash auth package.
Whenever we initialize Firebase, it'll automatically check if the user is logged in, the authentication
package handles this process.
We can create an event listener for when a response is given, we will be adding an event listener momentarily.
First, we need to initialize Firebase after the conditional statement.
We will call the Firebase Dot initialize app function.
The Initialise Out function will connect our app to Firebase.
It has one argument, which is the configuration settings.
This would be the same value we passed into the Initialize app function from the angular fire module
at the top of the file.
Let's import the environment file.
Next, we will pass in the environment, dot Firebase object into the Initialize app function.
The next thing we'll do is listen to the event.
We're going to add the code before we initialize the angular application.
We will run the following function.
Firebase kicked off on state changed.
We are calling the OFTH function to gain access to the authentication methods, which is where we can
listen for the event.
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 limit the event whenever the user's authentication state changes.
This includes when the user is logged out, it'll run immediately after Firebase is loaded on the page.
It's guaranteed to run at least once.
It's safe to load angular after the event fires.
We're going to cut and paste the bootstrap function inside this event handler.
There is one problem with this approach.
The event can be emitted multiple times.
We don't want to initialize anger there every time the user authentication status changes.
We can prevent this issue from occurring by using a variable before the event.
Define a variable called app in it with a default value of false.
Next, inside the callback function, create a conditional statement that checks if the app and IT variable
is equal to false.
Well, cut and paste the angular app into the conditional statement.
Lastly, we will update the app init variable to true.
By using a simple, conditional statement, we can check if the app has been initialized, if it has.
We won't need to initialize it again.
Let's try testing our app in the browser, refresh the page with throttling turned on.
This time, the log in link appears for a brief second, unlike before.
We are waiting for our app to connect to Firebase before initializing angular.
By the time Angular is fully bootstrapped, it'll know if the user is logged in or not.
Let's try logging out of our app 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 SDK.
However, that doesn't mean you don't have access to it, and the developer tools switched to the application
panel.
The application panel allows you to view the metadata of your application.
This includes things like the storage service workers or manifest documents.
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 will find the local storage options for Firebase.
Click on it.
Firebase will store the user's information under a key called Firebase off under the value column.
There is an extensive list of properties.
This location is where Firebase stores the user's authentication.
Information will 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 sing, 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 storage section in the sidebar.
This section 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 data associated with our application.
After doing so, let's refresh the page.
The app loads normally Firebase is unable to authenticate the user henceforth, the menu will render
the log in link.
That's exactly what we were looking to accomplish.
We've successfully created an application that persists the user's authentication.
We've completed the registration form after 10 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.