Section 11 (Firebase): Lesson 8 - Firebase authentication

Hey you and welcome.

In this video we will learn to use Firebase authentication in my contact app.

Right now you can access it without any authentication and that's a security risk.

I want to put a authentication layer where if you're not authenticated, you should not be able to see

the contacts or even add information into the database.

So I need to know who you are.

In order to do that, we will use Firebase authentication.

So let's dive right into it.

I'm looking at the documentation for Firestore Firebase authentication, and that's in the authentication

section in web, and I'm going to be using Google authentication.

There are plenty more of social or even in-house authentication.

I just chose Google.

That's an easier one to work with and already have an account for it.

And in order to work with Google authentication, this is the code base that is available to us.

In this code sample, we can see that we're going to have to start working with Firebase Auth instead

of Firebase Firestore that we have been working with.

We will bring in sign in with pop up.

That is one of the methods.

There's also sign in with redirect.

I will work with, sign in with pop up and that's a promise.

And we have to await that promise that will return us the user once the authentication is complete.

So that's the one we will work with.

And in order to do so, if I go back to my VS code, I will start a new provider that will be a parent

provider called auth provider or let's call it auth context.

I believe we called other contact contexts.

So let's call this auth context.

That way we're aligned with the naming convention and let's start with importing React.

From React.

I will hide my file explorer.

This will export a const of auth context or auth provider.

Provider will wrap on the parent side and this will be a function component.

From React and it will expect children.

So props with children.

It's a function component.

We will destructure children out.

And we will render return.

Self closing fragment children like so perfect.

So that's our provider ready to go.

Let's start working with context API.

So export const auth context, which is a create context function from react and this will have an object

and initially we will not provide anything.

We'll may provide something later on.

The whole concept of this is that auth provider will do the authentication for us and if the authentication

is not done, it will hide the entire app.

That means no children will be rendered.

All right, so let's just save this.

Let's go to index dot TSX.

That's the root of our application.

And if I scroll further down, so router provider and contact provider, those are the two places where

the queries are being done and the app exists.

So above those is where my authentication layer will be.

So authentication.

Provide or art provider.

I think I called it.

There we go.

Auto import and let's nest these all in.

There we are save and the app should work exactly the same.

I haven't done anything yet, but if I go to my auth provider and just instead of returning children

I say return null.

That should not return anything.

That means the page is empty.

So that's the concept here, is that I'm going to check for authentication first.

If there is no user authenticated, I will present with a different component altogether.

So let's build out that component.

I'll go over to my Firefox and in chakra templates there is a section for social media buttons and that's

where I will steal some of the components here.

Actually only one component.

I just need this Google button sign in with Google.

So that's the code I need.

Let's copy that over.

They even center it for us.

That's perfect.

That's exactly what I needed.

I'll go back to my VS code and paste that code in this return with the parentheses and import things

that I need from chakra UI.

So there we are.

FC button that may not be auto importable we'll bring that in later.

Text oh, text didn't work.

I'll import that manually.

There we are.

And then FC Google.

Let's bring that in.

It's coming from.

Oh, okay.

React icons.

I think I have that in my library, so that should be just a simple import.

Perfect.

There we are.

Center And let's bring up the Firefox again and vs code.

All right.

We're looking good.

So sign in with Google button is there.

Now we have to make it functional in order to make this button functional.

Let's go back to Firefox and I'll look at the documentation and copy paste some of the code here.

So we'll work with auth.

This get auth will make it consistent with how we had get Firestore in our firebase TS.

So let's go back to VS code and let's go to Firebase Dot TS and right at the bottom that's where we

have been exporting our DB Analytics app.

Let's export.

Auth.

Get auth.

Which will come from Firebase Firestore.

I think I have to import that manually or okay.