1
00:00:00,270 --> 00:00:05,730
In this lecture, we're going to initialize Firebase before initializing our app.

2
00:00:06,150 --> 00:00:12,360
This step is optional, but I like to wait for Firebase to initialize before initializing angular.

3
00:00:12,660 --> 00:00:15,090
Let's find out why in the browser.

4
00:00:15,270 --> 00:00:19,610
Open your app with the developer tools under the network panel.

5
00:00:19,620 --> 00:00:20,970
Turn throttling on.

6
00:00:21,270 --> 00:00:24,900
I recommend setting the throttle option to slow 3G.

7
00:00:27,300 --> 00:00:35,520
Next, refresh the page as the page loads, the log in link will appear for a few seconds until Firebase

8
00:00:35,520 --> 00:00:36,630
is initialized.

9
00:00:36,780 --> 00:00:39,240
We are assuming the user isn't logged in.

10
00:00:39,600 --> 00:00:44,160
It makes sense why we see the log in link during the loading process.

11
00:00:44,550 --> 00:00:50,760
Once Firebase is initialized, our subscription will cost the template to render different links.

12
00:00:51,330 --> 00:00:53,490
I'm not a huge fan of this behaviour.

13
00:00:53,760 --> 00:00:58,440
It would be nice if our app could display the correct set of links immediately.

14
00:00:58,770 --> 00:01:05,730
Unfortunately, this is not achievable unless we enable server side rendering or static site generation.

15
00:01:06,210 --> 00:01:11,730
However, there is an alternative solution that will get us pretty close to the desired behaviour.

16
00:01:13,590 --> 00:01:21,420
At the moment, we are initializing angular first, after angular is initialized, Firebase gets initialized.

17
00:01:21,720 --> 00:01:24,660
This order of initialization is absolute.

18
00:01:25,020 --> 00:01:27,000
What if we could reverse this order?

19
00:01:27,510 --> 00:01:32,250
By reversing the order, we could render the correct links almost immediately.

20
00:01:32,580 --> 00:01:37,170
It's completely possible and allowed to render Firebase before angular.

21
00:01:37,410 --> 00:01:38,580
Let's learn how.

22
00:01:40,110 --> 00:01:47,370
In the resource section of this lecture, I provide a link to fire bases installation page for the SDK.

23
00:01:47,790 --> 00:01:51,690
The installation of Firebase is handled by angular fire.

24
00:01:52,020 --> 00:01:55,110
We didn't have to manually install the SDK.

25
00:01:55,440 --> 00:02:02,520
However, since we're trying to initialize Firebase first, we will need to manually install the SDK.

26
00:02:02,910 --> 00:02:05,850
This page will go over the steps in detail.

27
00:02:06,120 --> 00:02:09,000
You can refer to it if you want more information.

28
00:02:09,720 --> 00:02:13,890
We need to initialize Firebase from the main TKTS file.

29
00:02:14,220 --> 00:02:16,200
Open this file in your editor.

30
00:02:18,800 --> 00:02:26,390
As a refresher, the main doctor's file is the entry file for our app, it's the first file that runs

31
00:02:26,390 --> 00:02:28,640
when we load our app in the browser.

32
00:02:29,000 --> 00:02:32,540
We've discussed the code inside this file at length.

33
00:02:32,900 --> 00:02:37,760
Check out the third section if you'd like to review the code inside this file.

34
00:02:38,390 --> 00:02:41,600
We're going to initialize Firebase in this file.

35
00:02:41,930 --> 00:02:46,760
Angular does not get loaded until we call the bootstrap module function.

36
00:02:47,090 --> 00:02:53,390
As long as we initialize Firebase before calling this function, we should get the desired behavior.

37
00:02:53,750 --> 00:03:01,540
The first step is to import Firebase at the top of the file import Firebase from the Firebase slash

38
00:03:01,580 --> 00:03:04,070
compat slash app package.

39
00:03:06,460 --> 00:03:09,610
Once again, we're installing Firebase manually.

40
00:03:09,970 --> 00:03:13,600
We're not importing functions from the angular fire package.

41
00:03:13,900 --> 00:03:18,910
Instead, we're directly importing Firebase along with Firebase.

42
00:03:19,090 --> 00:03:24,460
We will import the Firebase slash compat slash auth package.

43
00:03:26,910 --> 00:03:34,290
Whenever we initialize Firebase, it'll automatically check if the user is logged in, the authentication

44
00:03:34,290 --> 00:03:36,330
package handles this process.

45
00:03:36,690 --> 00:03:43,770
We can create an event listener for when a response is given, we will be adding an event listener momentarily.

46
00:03:44,430 --> 00:03:49,650
First, we need to initialize Firebase after the conditional statement.

47
00:03:49,770 --> 00:03:53,850
We will call the Firebase Dot initialize app function.

48
00:03:56,500 --> 00:04:00,580
The Initialise Out function will connect our app to Firebase.

49
00:04:00,850 --> 00:04:04,570
It has one argument, which is the configuration settings.

50
00:04:04,870 --> 00:04:11,410
This would be the same value we passed into the Initialize app function from the angular fire module

51
00:04:11,770 --> 00:04:13,210
at the top of the file.

52
00:04:13,390 --> 00:04:15,760
Let's import the environment file.

53
00:04:18,320 --> 00:04:25,310
Next, we will pass in the environment, dot Firebase object into the Initialize app function.

54
00:04:27,960 --> 00:04:30,820
The next thing we'll do is listen to the event.

55
00:04:31,170 --> 00:04:35,790
We're going to add the code before we initialize the angular application.

56
00:04:36,150 --> 00:04:38,100
We will run the following function.

57
00:04:38,430 --> 00:04:42,330
Firebase kicked off on state changed.

58
00:04:45,040 --> 00:04:51,640
We are calling the OFTH function to gain access to the authentication methods, which is where we can

59
00:04:51,640 --> 00:04:52,990
listen for the event.

60
00:04:53,260 --> 00:04:59,830
This method has one argument, which is the callback function to call when the event is emitted will

61
00:04:59,830 --> 00:05:01,480
pass in an arrow function.

62
00:05:03,990 --> 00:05:08,910
Firebase will limit the event whenever the user's authentication state changes.

63
00:05:09,210 --> 00:05:15,730
This includes when the user is logged out, it'll run immediately after Firebase is loaded on the page.

64
00:05:16,020 --> 00:05:18,480
It's guaranteed to run at least once.

65
00:05:18,840 --> 00:05:22,110
It's safe to load angular after the event fires.

66
00:05:22,380 --> 00:05:27,240
We're going to cut and paste the bootstrap function inside this event handler.

67
00:05:29,920 --> 00:05:32,080
There is one problem with this approach.

68
00:05:32,320 --> 00:05:35,080
The event can be emitted multiple times.

69
00:05:35,320 --> 00:05:40,930
We don't want to initialize anger there every time the user authentication status changes.

70
00:05:41,230 --> 00:05:46,210
We can prevent this issue from occurring by using a variable before the event.

71
00:05:46,390 --> 00:05:51,190
Define a variable called app in it with a default value of false.

72
00:05:53,690 --> 00:06:00,770
Next, inside the callback function, create a conditional statement that checks if the app and IT variable

73
00:06:00,770 --> 00:06:02,180
is equal to false.

74
00:06:04,800 --> 00:06:08,640
Well, cut and paste the angular app into the conditional statement.

75
00:06:11,140 --> 00:06:15,370
Lastly, we will update the app init variable to true.

76
00:06:18,010 --> 00:06:24,520
By using a simple, conditional statement, we can check if the app has been initialized, if it has.

77
00:06:24,670 --> 00:06:27,040
We won't need to initialize it again.

78
00:06:27,370 --> 00:06:33,610
Let's try testing our app in the browser, refresh the page with throttling turned on.

79
00:06:37,880 --> 00:06:42,920
This time, the log in link appears for a brief second, unlike before.

80
00:06:43,070 --> 00:06:48,120
We are waiting for our app to connect to Firebase before initializing angular.

81
00:06:48,500 --> 00:06:53,720
By the time Angular is fully bootstrapped, it'll know if the user is logged in or not.

82
00:06:54,050 --> 00:06:58,730
Let's try logging out of our app during the authentication process.

83
00:06:58,970 --> 00:07:01,820
Firebase will store a token on the client.

84
00:07:02,210 --> 00:07:07,160
You never have to worry about the token because it's managed for you by the SDK.

85
00:07:07,520 --> 00:07:14,090
However, that doesn't mean you don't have access to it, and the developer tools switched to the application

86
00:07:14,090 --> 00:07:14,600
panel.

87
00:07:15,140 --> 00:07:19,700
The application panel allows you to view the metadata of your application.

88
00:07:20,090 --> 00:07:25,310
This includes things like the storage service workers or manifest documents.

89
00:07:25,670 --> 00:07:30,410
We're interested in viewing the storage for the application on the sidebar.

90
00:07:30,440 --> 00:07:34,400
There are various storage solutions Firebase uses.

91
00:07:34,400 --> 00:07:40,890
Indexed DB under this storage will find the local storage options for Firebase.

92
00:07:41,240 --> 00:07:41,990
Click on it.

93
00:07:42,590 --> 00:07:49,790
Firebase will store the user's information under a key called Firebase off under the value column.

94
00:07:49,910 --> 00:07:52,250
There is an extensive list of properties.

95
00:07:52,700 --> 00:07:57,080
This location is where Firebase stores the user's authentication.

96
00:07:57,080 --> 00:08:02,840
Information will want to remove this to start with a clean slate without a token.

97
00:08:03,110 --> 00:08:06,830
Firebase will not be able to verify the user is logged in.

98
00:08:07,220 --> 00:08:10,280
It'll default to sing, the user is logged out.

99
00:08:11,000 --> 00:08:13,550
We have two ways of clearing the data.

100
00:08:13,910 --> 00:08:18,590
We can select the row and then click on this button that says Delete selected.

101
00:08:21,240 --> 00:08:27,750
Alternatively, we can switch to the clear data tab under the storage section in the sidebar.

102
00:08:28,320 --> 00:08:32,850
This section will give you an overview of the data stored from the application.

103
00:08:33,270 --> 00:08:37,320
Scrolling down, you'll come across a button to clear the data.

104
00:08:37,679 --> 00:08:38,460
Click on it.

105
00:08:41,100 --> 00:08:45,300
I prefer to clear the entire data just in case I miss anything.

106
00:08:45,630 --> 00:08:49,890
It'll altogether remove data associated with our application.

107
00:08:50,280 --> 00:08:53,130
After doing so, let's refresh the page.

108
00:08:55,680 --> 00:09:03,190
The app loads normally Firebase is unable to authenticate the user henceforth, the menu will render

109
00:09:03,210 --> 00:09:04,260
the log in link.

110
00:09:04,620 --> 00:09:07,380
That's exactly what we were looking to accomplish.

111
00:09:07,920 --> 00:09:13,320
We've successfully created an application that persists the user's authentication.

112
00:09:13,650 --> 00:09:17,670
We've completed the registration form after 10 lectures.

113
00:09:17,850 --> 00:09:23,070
We were able to register the user, store their data and persist their log in.

114
00:09:23,340 --> 00:09:25,980
It took a lot of work, but it's well worth it.

115
00:09:26,580 --> 00:09:30,030
In the next lecture, we're going to work on the login form.

116
00:09:30,270 --> 00:09:32,310
When you're ready, I'll see you there.