All language subtitles for 006 Google Sign In Authentication_en

Now that we have our fire base utility library inside of our project, let's actually set it up so that

we can start using it in our application.

Now, what we want to do is go into our project directory and we are going to add a new folder in our

source called Firebase.

Inside of this firebase, we are going to make a new file called Firebase Utils Duchies.

Now, in order to properly use and set up our fire base, utility files or utility methods, we actually

need that config object.

So if you accidentally lost it somehow, I'll show you how you can navigate back to finding that configuration.

We want to go from our dashboard to project overview, which is this page, and then you'll see this

grid item here.

If you click this, you'll see our application or sorry, you'll see our firebase project.

So we want to click this.

And then.

Scroll down, you should see this SDK snippet with the CDN, that object that we want is right here.

So we just want to copy this, go back to our Firebase utils and then we're going to import Firebase

from Firebase Agap.

So by doing this, we're pulling in the fire based utility library that belongs at this fire based app.

Now, the reason we do firebase app is because Firebase has all of the utility libraries loaded when

we included the entire dependency, when we installed Firebase with yarn.

But we don't want any that we're not using because they are quite large.

So whenever we need them, so in this case, we need off and storage.

We can import them themselves by importing Firebase Firestar for the database and Firebase Logoff for

the off.

We always need the base import, though, because that keyword is going to give us access to fast or

an author.

When we import them in, they'll be just automatically attached to this firebase keyword.

And then what we're want to do is we want to set our CONSED config equal to that object that we just

stored and then we call Firebase Initialise app with that config.

Now, what I'm about to type next will be quite a bit of code.

It will make sense once we start using it, but because it's config, it might seem a little confusing

because we are mainly configuring the firebase utility that we get.

All of it is in the documentation on Firebase itself, but these are the ones that we need for Google

authentication.

So what we want to do is we want to export CONSED off.

Which is equal to fire based off so when I mentioned that we imported fire based off, that is what

we managed to get access to is the dot off method on fire base.

And we want to export this out anywhere that we would need to use anything related to authentication.

Next, we are also going to export the firestorm that we imported the same way that we did with the

off.

So we don't need this yet, but it's better for us to just export this for now.

Now to set up our Google authentication utility, so this part is a little bit complicated, but just

follow along, we're going to do a cost provider equals New Firebase off doc Google auth provider.

And this gives us access to this new Google auth provider class from the authentication library.

It takes a couple.

Custom parameters using the custom parameters method.

And what we want to set is prompt select account.

What this means is that we want to always trigger the Google pop up whenever we use this Google Earth

provider for authentication and Sinon and I'll show you what I mean when we use it.

So we're also going to export our sign in this sign in with Google method.

That is equal to a function that calls off a sign in with pop up because signing with pop up takes this

provider class that we made, but it takes it for many different types of pop ups.

Right.

We just want the Google want.

But there's a Twitter one.

Right.

There's all kinds available to us in our Sinon.

But we just set we want to set Sinon with pop up and then we want to pass this provider through.

Now.

We also want to finally export default will be Firebase in case we want the whole library.

But you know how I mentioned that there's multiple pop ups while let's actually configure our firebase

project to allow us to use Google, sign it and I'll show you how easy that is.

So all we do is we go back to our FIREBASE project and we click this authentication under the developer

tag here.

We're going to click set up Sinon method.

And under this Google option, we just hit the edit pencil.

Enable it.

Will select the email.

That we want project support to have, right, so in case anything goes wrong with Firebase at all for

anything related to support, they're going to send it to this email that you have here.

And usually it's the email from your Google account that you used to sign into Firebase.

We just hit Save and now it's enabled we have often enabled for our project using Google.

And now we're going to use this sign in with Google inside of our sign and component.

So we're going to import it in.

Sign with Google from.

Firebase Firebrace utils, get rid of that dogs and to see how easy it is, we just are going to copy

our button.

Remove type, submit.

And fire a unclick.

That calls our Sinon with Google method, and now if we do sign in with Google.

Whenever we click it, our button in our application.

So let's refresh.

We see our button, we click it, and there's the Google prompt.

It will load any Google accounts that we already have or the users already signed in with, and we select

it and Firebase will handle the authentication there just like that.

We have authentication with Google tied in to our application.

But how do we actually utilize these users that Firebase is logging in with?

Well, let's do that right now.