In the last video we played around with the API library a little bit more inside the browser console.
We saw that we can call that get off instance method.
And anytime that we call that it's going to give us a object back that has a ton of different functions
assigned to it that we can use to essentially manipulate the user's authentication status.
So now in this video we're going to continue developing our Google Earth class right here.
Let me set up a couple of quick goals for what we're going to try to do.
All right.
So inside of my component or the Google off component I want to try to get a reference to that off object
after it is initialized.
Now when I say object right here I'm talking about how just in the last video we were able to say API
to get off instance when we call that this is the author object I'm talking about.
So this is the thing that has all those different methods assigned to it that we can use to manipulate
the user's authentication status or even figure out if they are currently signed in.
So we're going to get a reference to that object after we initialize the library.
Then after that we're going to attempt to figure out whether or not the user is currently signed in.
Remember in the last video we went through the authentication flow.
So right now in theory we are currently a lot with Google inside of our application.
So I want to figure out whether or not the user using our application is signed in.
And then once we figure that out I want to somehow print out that authentication status on the screen.
It's just a very quick little goal here to make sure that we understand the basics of Google both in
how to interact with this library.
Remember right now we're not going to worry about redux at all.
I just want to get this component up and running by itself.
OK.
So back inside of my code editor I'm going to find my google off class.
So remember when we loaded up that additional library right here we had to pass in a callback function
that was invoked after this additional module inside the library was success successfully loaded up
in a very similar fashion.
When we call client Dom init right here that executes an asynchronous operation or an asynchronous network
request over to Google's API server in order to initialize our client.
So we want to get some type of callback function or some type of notice for when that initialization
set up is all done.
So to do so we're going to chain on a then statement right here.
All right let me tell you why we are doing that.
When we called Load up here load only allows us to get a signal or a notification of when the loading
process is complete bypassing in a callback function.
But when we call init we do not have to use a callback function when we called in it it returns a promise
a promise is an object that will give us a little tap on the shoulder so to speak after this client
library has been successfully initialized.
So by chaining on this.
Then steepen right here and passing in an Aero function.
This aero function is going to be automatically invoked after a library has successfully initialized
itself.
So inside of here we can write some amount of code that will be only executed once our entire API library
is ready to go.
So it's at this point right here that we can start to figure out whether or not the user is currently
signed in and then attempt to print out that status on the screen.
So inside if you're going to first begin by getting a reference to that off object and saving a reference
to it on my component class.
So I'm going to say this dot off equals window dot G API.
Off to get off instance.
So now after running this code right here inside of any other function inside my class I can reference
this dot off and that will give me a reference to that Auth. instance that I can use to sign the user
in or sign them out or get the users current on the nation status.
Because remember our goal right now is to somehow figure out whether or not the user is signed in and
then print out that authentication status on the screen.
So keep in mind that when this component or this method right here gets called our component has already
been rendered to the screen.
So now if we want to essentially update the text or what content this component shows we need to somehow
get the component to the render.
So we're going to be making use of component level state here.
After we initialize our library and get access to this object we're going to update our component level
state with whether or not the users currently signed in when we update that state.
It will cause the component to automatically render and we can then print up the authentication status
on the screen so inside of here after getting a reference to this start off I'm going to call this Scott
set state and I going to pass an object here and say is signed in.
And that's going to be the result of calling this off that is signed in.
Get like so.
OK so now after loading a library after initializing it we finally get our reference to the author library
itself or the author object.
And then we're going to update our component level state with this new property called is signed in.
And we're just going to take that directly off with that object now is signed in right here if you want
to you can flip back over to the Google API documentation and see that this is a property on that object.
And if we want to get whether or not the user is currently signed in we just referenced that get function
or we invoke it like so.
OK so now that we are making use of component level state we need to make sure that we initialize the
state object when our component class is created.
So at the top of this class I'm going to say state is is signed in and I'm going to default that to
have a value of NULL.
The reason I'm putting no right here is that we do not know if the user is signed in or not signed in
when our application first loads.
So if there is a value of no four is signed in that means that we do not know if the user is signed
in or not signed in.
And so we we probably should not print anything on the screen at that point in time.
OK.
So now inside my render method I could put some logic directly inside if you're to look at the value
of this statement is signed in and then print out either yes no they are signed in.
But instead I'm going to make a little helper method just to help us kind of print out the appropriate
text sanguinea make a helper method called render off button.
Right now we're just going to be returning some div with text in it.
But as you might guess in just a moment we're going to replace this with some actual button logic or
some button to show up on the screen.
OK so inside if you're all say if this statement is signed in equals no then I'm going to return a div
that says I don't know if we are signed
and then else if this state DOT this statement is signed in we could say equals equals true.
But we don't actually have to say equals equals true.
We can just reference the property by itself and would be the same thing.
Now if we are signed in then I'm going to return a div that says I am signed in.
And then finally we'll handled the last case the case in which I am not signed in and is signed in is
equal to a value of false.
And so in this case I will return a div that says I am not signed in like so.
And then finally done inside my render method I'm going to reference that helper method we just put
together.
So I will call this render off
OK.
I'm going to save this and we'll flip back with the browser and test this out.
So I'm going to flip back over and I see at the top right hand side it says I am signed in.
So that means we are currently signed in.
Now just to make this a little bit more interesting let's try actually signing out right now we don't
have a button to sign our user out but we can very easily sign out by using our counsel and directly
manipulating the API library so I can say gee API.
Off to get off instance your number that's going to get us access to the thought ject.
And then one of the methods on that object is sign out right there.
So I'm going to say gee AAPI off to get instant start.
Sign out.
And then once I called out I'm no longer considered to be signed in via Google Earth so I can now refresh
the page.
And when I do so I should see I am not signed in print up inside my head or.
So refresh of the page.
You see that it said there very briefly it said I don't know if I'm signed in.
That was while the JPI Libre was loading up and trying to decide whether or not our user was signed
in and the ones that determined that the user was not signed in we called Set States and we now see
I am not signed in.
So now if we want to we can sign in one more time.
By doing GPI off to get instance sign in that will kick us through the floor again.
So I'm going to select an account right here.
And then we get kicked active back over to our page.
Now we don't have any logic inside of our application right now to get a callback or some type of notification
when the user does sign in.
So if you want to see that header text update we have to actually refresh the page.
So I'll do so right now and you'll see that it now goes back to saying I am signed in.
Now the really nice thing about this Google API library is that it's going to hold your authentication
status between refreshes of the page.
So for example if I refresh right now you'll see that I am still signed in and I can refresh as much
as I want and I'm still going to be signed in until I actually sign out.
OK.
So that's pretty much the basics of this library.
In a nutshell.
Now it would be really nice if we made sure that whenever the user actually signs in we dynamically
like on the fly changed the text right here.
So let's try to take a shot at that in the next section.
So quick break and I'll see you in just a minute.