1
00:00:00,790 --> 00:00:05,500
We've now wired up our Google off component to print out whether or not the user is currently aloft

2
00:00:05,590 --> 00:00:10,840
through our application but the only issue here is that if we attempt to sign in or sign out on the

3
00:00:10,840 --> 00:00:15,280
fly like while the user is visiting the application the text does not update.

4
00:00:15,280 --> 00:00:17,820
So in this video I want to figure out how to fix that.

5
00:00:17,860 --> 00:00:23,900
The first thing I want to show you is another method that is tucked or hidden away on that object.

6
00:00:23,920 --> 00:00:32,460
So at my console I going reference GAAP dot off to get off instance at just a moment ago in the last

7
00:00:32,460 --> 00:00:39,750
video you had seen that we got reference to this start off dot is signed in and then we get to figure

8
00:00:39,750 --> 00:00:41,890
out whether or not the user is actually signed in.

9
00:00:42,030 --> 00:00:48,750
So let's try running that again over at her console so I can do that is signed in and then get.

10
00:00:48,750 --> 00:00:50,880
Like so in this case I am signed in.

11
00:00:50,880 --> 00:00:52,420
So I see you right here.

12
00:00:52,590 --> 00:00:53,500
Now I want to inspect.

13
00:00:53,500 --> 00:00:58,800
This is signed in objects you're a little bit more closely you know we could reference the documentation

14
00:00:58,800 --> 00:01:02,630
to figure out what different methods are available on this site in property right here.

15
00:01:02,670 --> 00:01:06,510
But this is actually a pretty good learning opportunity for javascript in general so I want to show

16
00:01:06,510 --> 00:01:08,900
you something kind of interesting about this object.

17
00:01:09,110 --> 00:01:17,280
It's going to do the API to get off instance that is signed in by itself without any parentheses or

18
00:01:17,310 --> 00:01:18,620
anything like that.

19
00:01:18,960 --> 00:01:22,880
So when I reference that object I see a print up of an object right here.

20
00:01:22,980 --> 00:01:27,030
And just as before I see a couple of very mysteriously named properties on it.

21
00:01:27,030 --> 00:01:32,800
So again these are private functions that you and I are not supposed to call but very interestingly

22
00:01:32,860 --> 00:01:35,400
and this is the kind of javascript interesting part here.

23
00:01:35,530 --> 00:01:40,840
You'll notice that there appears to not be any get function assigned to this object but just two seconds

24
00:01:40,840 --> 00:01:42,870
ago we were able to call some get function.

25
00:01:42,970 --> 00:01:45,460
So where is that function actually defined.

26
00:01:45,790 --> 00:01:50,650
Well if you've ever been curious I'm sure anytime you can log an object inside your browser you've always

27
00:01:50,650 --> 00:01:53,660
seen this underscore underscore produ property right here.

28
00:01:53,860 --> 00:01:57,940
And I'm sure you've always been kind of curious what the heck that thing was.

29
00:01:57,940 --> 00:01:59,970
So this is a little bit behind the scenes stuff.

30
00:02:00,100 --> 00:02:02,550
Essentially this underscore underscore produ reference right.

31
00:02:02,560 --> 00:02:06,010
There is a reference to this object's prototype property.

32
00:02:06,340 --> 00:02:11,620
Now if you study javascript in depth you will know that prototypes are how javascript does inheritance

33
00:02:11,620 --> 00:02:14,170
between different so-called classes.

34
00:02:14,260 --> 00:02:17,400
Because remember in javascript we don't actually have classes.

35
00:02:17,410 --> 00:02:20,210
Instead we have prototypes internally.

36
00:02:20,230 --> 00:02:26,170
This API library uses inheritance all over the place for assembling all these different functions that

37
00:02:26,170 --> 00:02:29,550
we are making use of and all these different objects that we're making use of.

38
00:02:29,860 --> 00:02:34,900
So the actual get function that we care about right there is actually available through the prototype

39
00:02:35,080 --> 00:02:36,160
of this object.

40
00:02:36,280 --> 00:02:42,420
And again this underscore underscore protip property is a reference to the prototype of this object.

41
00:02:42,430 --> 00:02:46,630
So if I expand this you're going to see that the get function that we just called is actually tucked

42
00:02:46,630 --> 00:02:51,640
away on the prototype of the is signed in object.

43
00:02:51,660 --> 00:02:54,000
Now again that is just a little kind of interesting thing.

44
00:02:54,000 --> 00:02:59,430
I thought you might be interested in more relevant to the problem at hand and figuring out how to update

45
00:02:59,460 --> 00:03:03,140
our Hetter appear text any time the user signs and or signs out.

46
00:03:03,150 --> 00:03:06,810
You'll notice that there's also a method on this prototype called listen.

47
00:03:07,110 --> 00:03:11,230
So this is a method that we can pass a callback function to.

48
00:03:11,460 --> 00:03:16,620
If we pass a callback function to listen it will be invoked any time that users on authentication status

49
00:03:16,680 --> 00:03:17,740
is changed.

50
00:03:17,780 --> 00:03:22,270
And so we can pass a callback to that thing and then maybe call set state or something like that inside

51
00:03:22,290 --> 00:03:25,530
there and then we could somehow update the text inside the header.

52
00:03:25,550 --> 00:03:28,130
Any time these are signs in or signs out.

53
00:03:28,280 --> 00:03:30,630
So let's try wiring that up right now.

54
00:03:30,630 --> 00:03:35,160
Back inside my code editor I'm going to find the component did mount lifecycle method.

55
00:03:35,400 --> 00:03:41,240
Here's the then statement where we initially set our states with the current value of is signed in.

56
00:03:41,580 --> 00:03:45,140
So immediately after that I'm going to set up a little event listener.

57
00:03:45,300 --> 00:03:50,000
So I'll say get a reference to that thought ject is signed in.

58
00:03:50,250 --> 00:03:55,080
And then I will call the listen function that we just spoke about and to the thing I'm going to pass

59
00:03:55,110 --> 00:04:00,050
a callback function I'm going to call it this dot on off change.

60
00:04:00,180 --> 00:04:03,640
So we don't have a function with that name or a method on this class just yet.

61
00:04:03,660 --> 00:04:07,450
So I going to add it as an additional method underneath the component did mount.

62
00:04:07,460 --> 00:04:09,800
So I will say on off change

63
00:04:12,550 --> 00:04:17,120
and because this is a callback function I'm going to set it up as a ero functions that its context is

64
00:04:17,120 --> 00:04:19,590
bound to my component.

65
00:04:19,640 --> 00:04:24,080
So then inside of your dysfunction right here is going to be called any time that users authentication

66
00:04:24,080 --> 00:04:25,180
status changes.

67
00:04:25,340 --> 00:04:30,110
So instead of you're probably going to want to update our state and update the state which whether or

68
00:04:30,110 --> 00:04:37,070
not the user is currently signed in so inside of you're all called this set states all update is signed

69
00:04:37,070 --> 00:04:42,350
in property on my state object and for the value of that I'm just going to reach back into the library

70
00:04:42,590 --> 00:04:47,910
and get the users current authentication status just as we did before wifi is signed in.

71
00:04:48,060 --> 00:04:51,440
Get all say this off.

72
00:04:51,610 --> 00:04:57,650
Remember that is our reference to the thought ject that is signed in.

73
00:04:57,710 --> 00:04:58,660
Get like so

74
00:05:02,590 --> 00:05:04,260
I guess that's definitely not bad.

75
00:05:04,520 --> 00:05:10,370
So now in theory if we flip back over to our application we can do a quick refresh.

76
00:05:10,630 --> 00:05:15,120
We're still going to see the text appropriately appear for either we are signed in or we are not.

77
00:05:15,250 --> 00:05:20,710
But now any time that we sign out or sign in we should see some updated text right there even if we

78
00:05:20,710 --> 00:05:22,220
do not refresh the page.

79
00:05:22,450 --> 00:05:30,240
So I'm going to try manually signing out of my library right now so I'll say gee API ought to get instance

80
00:05:31,890 --> 00:05:34,550
dot sign out like so.

81
00:05:36,130 --> 00:05:41,190
If you are currently signed out you could do sign in instead to go to the auth process.

82
00:05:41,200 --> 00:05:42,890
But we're going to do sign out right now.

83
00:05:42,980 --> 00:05:46,900
It's going to call sign out and then you'll notice that the text appears says immediately.

84
00:05:46,900 --> 00:05:53,190
I am not signed in and now we can get that to flip back to being signed in by doing a same call but

85
00:05:53,200 --> 00:05:55,410
for sign in instead.

86
00:05:55,870 --> 00:05:58,250
So when we do that we'll go through the flow again.

87
00:06:01,110 --> 00:06:06,680
It's all select my account and then I see the text appear automatically update to reflect the fact that

88
00:06:06,680 --> 00:06:09,010
I now signed it perfect.

89
00:06:09,020 --> 00:06:13,100
So we now have the ability to date our authentication state on the fly.

90
00:06:13,100 --> 00:06:15,530
Now one little optimization we could do here.

91
00:06:15,530 --> 00:06:21,110
You'll notice how inside of the dot then statement we have essentially the same exact line of code that

92
00:06:21,110 --> 00:06:23,460
we have down inside of on change.

93
00:06:23,480 --> 00:06:29,570
So if we wanted to we could actually remove this right here and instead call this dot on off change

94
00:06:29,630 --> 00:06:35,240
like so that's going to make sure that we get the current authentication status when we first initialize

95
00:06:35,240 --> 00:06:39,710
our library and update the authentication state to be whatever its values should be.

96
00:06:39,710 --> 00:06:41,560
So if you want to do that refactor it's fine.

97
00:06:41,570 --> 00:06:45,920
But I would recommend you kind of leave it as is for right now because we're going to eventually come

98
00:06:45,920 --> 00:06:51,770
back to this class into a big refactor to it or not a big factor but a little refactor once we add redux

99
00:06:51,770 --> 00:06:52,860
into our project.

100
00:06:52,880 --> 00:06:58,060
So I would recommend you have the tools set state calls for right now even though it's not super ideal.

101
00:06:58,430 --> 00:06:59,570
OK so this looks great.

102
00:06:59,570 --> 00:07:04,130
Now the last thing we do is make sure that our render off button right here doesn't return as simple

103
00:07:04,130 --> 00:07:09,740
div but instead returns an actual off button that says the user to the user either hey click this to

104
00:07:09,740 --> 00:07:11,900
sign in or click this to sign out.

105
00:07:11,900 --> 00:07:13,680
So let's take care of that in the next video.