We've now wired up our Google off component to print out whether or not the user is currently aloft
through our application but the only issue here is that if we attempt to sign in or sign out on the
fly like while the user is visiting the application the text does not update.
So in this video I want to figure out how to fix that.
The first thing I want to show you is another method that is tucked or hidden away on that object.
So at my console I going reference GAAP dot off to get off instance at just a moment ago in the last
video you had seen that we got reference to this start off dot is signed in and then we get to figure
out whether or not the user is actually signed in.
So let's try running that again over at her console so I can do that is signed in and then get.
Like so in this case I am signed in.
So I see you right here.
Now I want to inspect.
This is signed in objects you're a little bit more closely you know we could reference the documentation
to figure out what different methods are available on this site in property right here.
But this is actually a pretty good learning opportunity for javascript in general so I want to show
you something kind of interesting about this object.
It's going to do the API to get off instance that is signed in by itself without any parentheses or
anything like that.
So when I reference that object I see a print up of an object right here.
And just as before I see a couple of very mysteriously named properties on it.
So again these are private functions that you and I are not supposed to call but very interestingly
and this is the kind of javascript interesting part here.
You'll notice that there appears to not be any get function assigned to this object but just two seconds
ago we were able to call some get function.
So where is that function actually defined.
Well if you've ever been curious I'm sure anytime you can log an object inside your browser you've always
seen this underscore underscore produ property right here.
And I'm sure you've always been kind of curious what the heck that thing was.
So this is a little bit behind the scenes stuff.
Essentially this underscore underscore produ reference right.
There is a reference to this object's prototype property.
Now if you study javascript in depth you will know that prototypes are how javascript does inheritance
between different so-called classes.
Because remember in javascript we don't actually have classes.
Instead we have prototypes internally.
This API library uses inheritance all over the place for assembling all these different functions that
we are making use of and all these different objects that we're making use of.
So the actual get function that we care about right there is actually available through the prototype
of this object.
And again this underscore underscore protip property is a reference to the prototype of this object.
So if I expand this you're going to see that the get function that we just called is actually tucked
away on the prototype of the is signed in object.
Now again that is just a little kind of interesting thing.
I thought you might be interested in more relevant to the problem at hand and figuring out how to update
our Hetter appear text any time the user signs and or signs out.
You'll notice that there's also a method on this prototype called listen.
So this is a method that we can pass a callback function to.
If we pass a callback function to listen it will be invoked any time that users on authentication status
is changed.
And so we can pass a callback to that thing and then maybe call set state or something like that inside
there and then we could somehow update the text inside the header.
Any time these are signs in or signs out.
So let's try wiring that up right now.
Back inside my code editor I'm going to find the component did mount lifecycle method.
Here's the then statement where we initially set our states with the current value of is signed in.
So immediately after that I'm going to set up a little event listener.
So I'll say get a reference to that thought ject is signed in.
And then I will call the listen function that we just spoke about and to the thing I'm going to pass
a callback function I'm going to call it this dot on off change.
So we don't have a function with that name or a method on this class just yet.
So I going to add it as an additional method underneath the component did mount.
So I will say on off change
and because this is a callback function I'm going to set it up as a ero functions that its context is
bound to my component.
So then inside of your dysfunction right here is going to be called any time that users authentication
status changes.
So instead of you're probably going to want to update our state and update the state which whether or
not the user is currently signed in so inside of you're all called this set states all update is signed
in property on my state object and for the value of that I'm just going to reach back into the library
and get the users current authentication status just as we did before wifi is signed in.
Get all say this off.
Remember that is our reference to the thought ject that is signed in.
Get like so
I guess that's definitely not bad.
So now in theory if we flip back over to our application we can do a quick refresh.
We're still going to see the text appropriately appear for either we are signed in or we are not.
But now any time that we sign out or sign in we should see some updated text right there even if we
do not refresh the page.
So I'm going to try manually signing out of my library right now so I'll say gee API ought to get instance
dot sign out like so.
If you are currently signed out you could do sign in instead to go to the auth process.
But we're going to do sign out right now.
It's going to call sign out and then you'll notice that the text appears says immediately.
I am not signed in and now we can get that to flip back to being signed in by doing a same call but
for sign in instead.
So when we do that we'll go through the flow again.
It's all select my account and then I see the text appear automatically update to reflect the fact that
I now signed it perfect.
So we now have the ability to date our authentication state on the fly.
Now one little optimization we could do here.
You'll notice how inside of the dot then statement we have essentially the same exact line of code that
we have down inside of on change.
So if we wanted to we could actually remove this right here and instead call this dot on off change
like so that's going to make sure that we get the current authentication status when we first initialize
our library and update the authentication state to be whatever its values should be.
So if you want to do that refactor it's fine.
But I would recommend you kind of leave it as is for right now because we're going to eventually come
back to this class into a big refactor to it or not a big factor but a little refactor once we add redux
into our project.
So I would recommend you have the tools set state calls for right now even though it's not super ideal.
OK so this looks great.
Now the last thing we do is make sure that our render off button right here doesn't return as simple
div but instead returns an actual off button that says the user to the user either hey click this to
sign in or click this to sign out.
So let's take care of that in the next video.