In this video we're going to focus on making sure that our render off button method shows the appropriate
button to allow the user to either sign in or sign out.
Right now we've just have the simple device.
Now the first thing I want to address is the first case of our IF statement.
So if this statement is signed and is equal to no we are returning a div that says I don't know if we
are signed in.
Now this is probably not super appropriate.
Instead I think that we should just return absolutely nothing if we don't know if the user is signed
in.
We could potentially do a spinner or something like that but I think just returning Noal is returning
nothing is totally fine here.
So if we do not know if the user is signed in because we just rendered this component to the screen
I'm going to simply return.
No.
So now if we do a very quick test we can flip back over and you'll notice that we just see nothing right
there until we actually determine our authentication status.
So again that's probably pretty appropriate for right now.
So next we'll handle the case in which the user is signed in.
If the user is signed in we want to show a button that says to the user click me to sign out or something
to that effect.
So rather than the div right here I'm going to instead return a little bit of GSX.
So I'll put in a button with a class name of UI red Google button inside there I'm going to place an
icon with the class name of Google icon that's going to show an icon to the user with a little Google
logo on it and then give it the text sign out like so and then I'll save this if I flip back over
OK.
This right here you'll see that I got an error message.
If you see this error message it's totally fine.
It's just a little issue with the Google API itself.
So if you see that message you can just do a quick refresh and it should go away like so.
OK.
So I now see this nice red button that says Sign out.
Of course if I click it nothing happens but we'll hook up that functionality in just a moment.
Now let's take care of the final state right here the case in which the user is not signed in.
So if the user is not signed in we want to show a button to them that says something like sign in with
Google.
So I'm going to again delete that div and I'll put in a return statement for a button element with a
class name of UI red Google button.
I'm going to again give it a class name of Google icon and then this time I'll give it some text like
sign in with Google.
It's now we flip back over.
We're not going to actually see this button unless we actually sign out or see me.
Yes unless we actually sign out.
So I'll do a quick refresh right here and then I'm going to manually sign out at my console so to do
so I could do a G API dot off to get off instance that sign out like so analyse that by an update.
Now at present the button looks kind of nasty when I am all zoomed in like that but you probably see
something a little bit more like this which is far more appropriate So it's very easy to see sign in
with Google right there.
OK.
So it looks pretty reasonable.
Now lest we need to do is make sure that these buttons actually do something when the user clicks on
them.
So let's take one more quick pause.
When we come back the next section we're going to wire up some Click event handlers to both these buttons
to make sure that we either sign the user in or sign them out whenever they are clicked.