1
00:00:01,330 --> 00:00:07,430
In the last section we set up our firebase account and we enabled email and password for authentication.

2
00:00:07,710 --> 00:00:12,990
That's only half the set up though as we still have to set up the firebase client library so we can

3
00:00:12,990 --> 00:00:15,060
interact with their servers.

4
00:00:15,210 --> 00:00:19,200
So we do a little bit set up now but don't worry the set apart isn't too bad.

5
00:00:19,200 --> 00:00:22,470
It's just more installation of modules.

6
00:00:22,950 --> 00:00:28,530
So first thing we're going to do is install the firebase library as an NPM module.

7
00:00:28,530 --> 00:00:30,420
So I'm going to open up my command line.

8
00:00:30,440 --> 00:00:41,020
I'm inside of my project directory of author right now and I will NPM install dash dash save firebase.

9
00:00:41,050 --> 00:00:46,270
So again this is going to reach out to the NPM registry and install firebase as a dependency.

10
00:00:46,270 --> 00:00:50,640
After that we will be able to set up firebase inside of our application.

11
00:00:50,740 --> 00:00:57,820
Now when we created our firebase project like over the firebase consul here when we made this authentication

12
00:00:57,820 --> 00:01:04,570
thing it created a distinct bucket of data for our project that sits on the firebase servers.

13
00:01:04,570 --> 00:01:10,690
So now in theory on the firebase servers there are some like big folder or bucket where all of our data

14
00:01:10,690 --> 00:01:12,210
is going to set.

15
00:01:12,400 --> 00:01:19,390
So to set up our firebase library locally we have to tell it exactly what bucket to go reach out and

16
00:01:19,390 --> 00:01:22,950
try to get access to on the firebase servers.

17
00:01:23,270 --> 00:01:23,580
OK.

18
00:01:23,590 --> 00:01:29,410
So my firebase library is done installing and we are now going to tell it hey when you boot up please

19
00:01:29,410 --> 00:01:33,410
try to connect to this very specific bucket of data.

20
00:01:33,500 --> 00:01:35,080
That's the goal here.

21
00:01:35,110 --> 00:01:39,950
So inside of our app component we're going to place that initialization code inside of here.

22
00:01:40,480 --> 00:01:45,350
We will first import firebase from firebase.

23
00:01:45,400 --> 00:01:47,980
So this gives us access to the firebase library.

24
00:01:48,460 --> 00:01:54,550
And then we are going to set up some initialization or configuration for it and we need to think for

25
00:01:54,550 --> 00:01:57,830
a second what is the what is the best time to do set up like that.

26
00:01:57,850 --> 00:02:00,890
You know when's the best time in our application to do that set up.

27
00:02:01,450 --> 00:02:07,180
And so I would say well maybe the best time to that set up would be right before this component right

28
00:02:07,180 --> 00:02:14,670
here this app component gets rendered to the screen of our device to get a handle or a hook on that

29
00:02:14,950 --> 00:02:16,960
we can use a lifecycle method.

30
00:02:17,020 --> 00:02:25,720
So add the lifecycle method component will mount and inside of here is where we will do our firebase

31
00:02:25,720 --> 00:02:27,140
initialization.

32
00:02:27,340 --> 00:02:34,230
Remember that lifecycle methods are methods that are automatically invoked inside of our component.

33
00:02:34,270 --> 00:02:39,420
All we have to do is define the method and if we define it it will be automatically called.

34
00:02:40,390 --> 00:02:41,010
All right.

35
00:02:41,080 --> 00:02:48,490
So last step we are going to go back over to firebase and on the right hand topsides here you can find

36
00:02:48,640 --> 00:02:55,360
a button that says web setup and click web setup and this gives me a bunch of stuff to copy paste into

37
00:02:55,360 --> 00:02:56,820
my application.

38
00:02:56,860 --> 00:02:58,650
Note that this is all set up.

39
00:02:58,660 --> 00:03:04,750
Assuming that you're using a way or like you're in a web environment so it's got some script tags and

40
00:03:04,750 --> 00:03:06,280
all that kind of good stuff.

41
00:03:06,280 --> 00:03:09,180
And we're clearly not in a web environment we're using re-act need.

42
00:03:09,190 --> 00:03:14,280
So we're going to kind of just copy paste a section out of this.

43
00:03:14,620 --> 00:03:19,170
I'm going to grab just this configuration object right here.

44
00:03:19,190 --> 00:03:23,740
It's just everything from the opening curly brace to the closing Crilley brace.

45
00:03:23,740 --> 00:03:29,000
And then I'm going to copy it and we'll pull it back over to our component will mount.

46
00:03:29,410 --> 00:03:38,680
And inside of here we'll call firebase initialiser out and I'm going to paste in excuse me I'm going

47
00:03:38,680 --> 00:03:44,410
to paste in that configuration and I'm also make sure I delete the dangling semicolon here.

48
00:03:47,820 --> 00:03:48,340
OK.

49
00:03:48,360 --> 00:03:49,300
And the last thing is.

50
00:03:49,320 --> 00:03:53,850
Yes lint really wants to have single quotes and I am happy to oblige.

51
00:03:53,910 --> 00:03:57,240
So I'm going to replace all these with single quotes like so.

52
00:03:59,710 --> 00:04:00,350
OK.

53
00:04:00,820 --> 00:04:04,730
Well the last thing you know I put that import statement as the last statement.

54
00:04:04,750 --> 00:04:08,220
It should really be above any import statements for stuff that we write.

55
00:04:08,230 --> 00:04:15,820
That was a mistake on my side some is going to cut this line and move it above the head or import.

56
00:04:15,850 --> 00:04:17,370
There we go much better.

57
00:04:17,920 --> 00:04:18,270
OK.

58
00:04:18,280 --> 00:04:19,600
So that's that's it all.

59
00:04:19,630 --> 00:04:21,420
That's all we had to do for our firebase setup.

60
00:04:21,430 --> 00:04:27,850
So at this point in time we have installed the firebase library and we gave it a little bit of configuration

61
00:04:27,850 --> 00:04:30,610
that told it hey we've already got a project set up for you.

62
00:04:30,620 --> 00:04:34,950
There's some bucket of data on the firebase servers that you need to make access to.

63
00:04:35,200 --> 00:04:38,680
And this is the configuration that makes that happen.

64
00:04:39,370 --> 00:04:43,750
So I think that we are just about all set out to start working on our form.

65
00:04:43,750 --> 00:04:46,910
Let's continue on the next section and start working on that Sign-Up form