In the last section we set up our firebase account and we enabled email and password for authentication.
That's only half the set up though as we still have to set up the firebase client library so we can
interact with their servers.
So we do a little bit set up now but don't worry the set apart isn't too bad.
It's just more installation of modules.
So first thing we're going to do is install the firebase library as an NPM module.
So I'm going to open up my command line.
I'm inside of my project directory of author right now and I will NPM install dash dash save firebase.
So again this is going to reach out to the NPM registry and install firebase as a dependency.
After that we will be able to set up firebase inside of our application.
Now when we created our firebase project like over the firebase consul here when we made this authentication
thing it created a distinct bucket of data for our project that sits on the firebase servers.
So now in theory on the firebase servers there are some like big folder or bucket where all of our data
is going to set.
So to set up our firebase library locally we have to tell it exactly what bucket to go reach out and
try to get access to on the firebase servers.
OK.
So my firebase library is done installing and we are now going to tell it hey when you boot up please
try to connect to this very specific bucket of data.
That's the goal here.
So inside of our app component we're going to place that initialization code inside of here.
We will first import firebase from firebase.
So this gives us access to the firebase library.
And then we are going to set up some initialization or configuration for it and we need to think for
a second what is the what is the best time to do set up like that.
You know when's the best time in our application to do that set up.
And so I would say well maybe the best time to that set up would be right before this component right
here this app component gets rendered to the screen of our device to get a handle or a hook on that
we can use a lifecycle method.
So add the lifecycle method component will mount and inside of here is where we will do our firebase
initialization.
Remember that lifecycle methods are methods that are automatically invoked inside of our component.
All we have to do is define the method and if we define it it will be automatically called.
All right.
So last step we are going to go back over to firebase and on the right hand topsides here you can find
a button that says web setup and click web setup and this gives me a bunch of stuff to copy paste into
my application.
Note that this is all set up.
Assuming that you're using a way or like you're in a web environment so it's got some script tags and
all that kind of good stuff.
And we're clearly not in a web environment we're using re-act need.
So we're going to kind of just copy paste a section out of this.
I'm going to grab just this configuration object right here.
It's just everything from the opening curly brace to the closing Crilley brace.
And then I'm going to copy it and we'll pull it back over to our component will mount.
And inside of here we'll call firebase initialiser out and I'm going to paste in excuse me I'm going
to paste in that configuration and I'm also make sure I delete the dangling semicolon here.
OK.
And the last thing is.
Yes lint really wants to have single quotes and I am happy to oblige.
So I'm going to replace all these with single quotes like so.
OK.
Well the last thing you know I put that import statement as the last statement.
It should really be above any import statements for stuff that we write.
That was a mistake on my side some is going to cut this line and move it above the head or import.
There we go much better.
OK.
So that's that's it all.
That's all we had to do for our firebase setup.
So at this point in time we have installed the firebase library and we gave it a little bit of configuration
that told it hey we've already got a project set up for you.
There's some bucket of data on the firebase servers that you need to make access to.
And this is the configuration that makes that happen.
So I think that we are just about all set out to start working on our form.
Let's continue on the next section and start working on that Sign-Up form