All language subtitles for 010 Google Sign In Authentication 3_en

OK, so now we have Google authentication, Sinon, as well as our application listening to authentication

state changes on our firebase back in.

What we need now is to actually figure out how to sign out of our off service now, Firebase makes it

very easy because on this off service, we actually just call sign out and it will sign us out.

But let's figure out where to put it in our application.

So right now.

If we look at the final application.

We actually see that there's a sign out button in the header when a user is signed in, so let's implement

that.

So the first thing we have to do is make sure that our heter is aware of when a user is signed in or

signed out by giving it the app, its current user state.

So we're just going to pass it in as a prop..

This state's current user.

So if it's null, it will pass and null if it's an object such as our user object, it will pass that

in.

And then inside of our head, our component, we want to first import that awful library from our firebase

utils.

And then we want to structure the current user property that we're passing into our header from our

app, and what we'll do is we'll use a ternary operator to conditionally render either a div if it's

true or a link if it's false.

Now, because of the nature of the ternary operator, if current user is an object, it will evaluate

to true, therefore it will render a div.

If it is false, such as if it was a null, null, evaluates to false and then it will render the link.

So what we will pass in is a div with the class name option.

So we want the same styling as our link, but we want to give because we want the padding that comes

with it so that our button is click is clickable, it's bigger, and then we're going to put an unclick

method that is a functional callback and an anonymous function that calls off Dotts sign out.

Which is provided to us by the firebase auth library.

And then we're just going to say here, sign out.

And in our link, we're also going to have the class name of option, except it's going to take us to

Sinon.

And here we're just going to say sign in.

And now if we check our application.

Normally, there's a sign in.

But if we're signed in with our Google account.

Instead, it'll be a sign out button, which, if we click, will sign us out, but we don't have our

cursor pointer on it.

So let's just add that to our styling here inside of our option.

We'll put cursor pointer just to be sure.

OK, now let's also style this button box so that it looks closer to what we had in the Google styling

box as we see in our final application.

Well, let's go to our custom button component.

And what we'll do is conditionally render a class name based off of a prop, so we'll call the prop

is Google Sinon.

And then we will conditionally render using string interpolation.

The class name.

Of Google sign in, otherwise we'll render an empty string.

And then we will also always render a custom button now we're able to do this because with react everything

is JavaScript.

So we have a lot of flexibility here.

And using this, we will now render this class of Google Sinon if this property is true.

If not, then there will be an empty string and custom button is also always render.

Now, let's go into our styles and let's add in the styling for Google Sinon, so we got to add the

ampersand.

If we don't, then we will notice that this sass file will end up applying the styles to a child element

with the classic Google Sinon of custom button.

But we want them to both be on the same element.

So what the ampersand, it will say that because the ampersand is the same as a saying custom button

dot Google sign and with no space in between.

So by doing that now, we will say background color goes to a Google blue, which I have here.

It is cash four to a five.

At for.

And then we'll also say that there's a color of whites because we want white text and then on Hova,

we're also going to change the background color to a darker shade of our Google blue.

Three, five, seven, eight, eight.

Now I have them in front of me, so I definitely don't memorize hex colors in my spare time, but we're

also going to add a border of none to our store here.

And then in our Sinon component, we want to apply them.

So we'll say is Google sign in?

So this property will get past the value of true if we don't pass a value to it, which we want, because

we want this to help us conditionally render that class that we just wrote on custom button.

And now if we look, we'll see that we have our styling, so let's stop our and to look more similar

and more aligned to our final application.

So in our Sinon component.

And our staff, we're going to switch this over to three eighty pixels.

And then we're also going to wrap those buttons in a div.

Call it what the class name of button.

And then we will apply.

So this button's class display flex and justify content space between.

Now, if we look, our buttons are the same width as our Sinon component, but there's a little bit

of extra padding here.

The reason for this is because of the way that box sizing is set in all browsers.

Box sizing value, which is a CSFs property that's set in all browsers, is such a way that our margin

patterns and borders all actually affect the overall size of our components.

If we were to inspect this, well, see, that's what happens with our form input.

You see how there's a little bit of an extra protrusion, despite the fact that the orange ends before

it, well, that's actually the padding value on our input that's modifying that if we got rid of this,

will see that our element is now in line.

So how do we change this is inside of our access, we are going to say this universal selector, so

for every element we want, block sizing should be border box.

And now.

Our elements are line because the padding, the margin and the border do not affect the element size,

so let's commit our code, so let's check what we have.

We added in our Firebase Wassa integrated firebase into application.

Created sign in page with sign in component and sign in with Google, and now let's just push this to

master.

So now what we want to add to our application is email and password Sinon, but the only way to do that

is we actually have to have email and password based users in our database so that Firebase knows whether

or not that that user is true, like it actually exists.

So in order to do that, we have to take a deeper look at Firebase Firestorm.

So let's do that.