1
00:00:00,540 --> 00:00:05,010
In the last section we tweaked the header to make sure that it was aware of whether or not the current

2
00:00:05,010 --> 00:00:07,560
user was logged in to really test this out.

3
00:00:07,560 --> 00:00:13,680
Now we can open up our chrome developer tools go to the Network tab and on the very right hand side

4
00:00:13,680 --> 00:00:19,230
over here you'll see a little dropdown that you can use to throttle your internet connection so we can

5
00:00:19,230 --> 00:00:22,260
use this to really exaggerate the duration of the request.

6
00:00:22,260 --> 00:00:23,640
To find out the current user.

7
00:00:23,640 --> 00:00:28,890
And when we do so love better sense of what a user would see if they were using our app on a mobile

8
00:00:28,890 --> 00:00:29,720
device.

9
00:00:29,940 --> 00:00:36,600
So for me I just set this to Wi-Fi which is enough of a throttle to kind of notice this change.

10
00:00:36,600 --> 00:00:37,670
And I have logged in.

11
00:00:37,710 --> 00:00:42,490
You'll also notice that so I went back over to localhost 5000 slash slash Google.

12
00:00:42,600 --> 00:00:46,580
Now when I refreshed the page watch the text right here much more closely.

13
00:00:46,800 --> 00:00:50,920
So refresh and again it's just sometimes very brief.

14
00:00:50,970 --> 00:00:51,250
OK.

15
00:00:51,300 --> 00:00:52,530
That time it was definitely there.

16
00:00:52,530 --> 00:00:57,330
You'll see it it says just like hey I'm still figuring out if I'm logged in still deciding.

17
00:00:57,360 --> 00:00:59,190
So you can see just very briefly right there.

18
00:00:59,460 --> 00:01:05,130
So you can easily imagine that if we had a lot of content inside the header that sudden flash of content

19
00:01:05,130 --> 00:01:10,160
would be something that is really annoying for our users and I don't know if you use mobile that often

20
00:01:10,200 --> 00:01:14,820
or how often you go around the Internet watching like news sites or anything like that.

21
00:01:14,820 --> 00:01:20,040
But one of the most common complaints about mobile web is when elements start to jump on the screen

22
00:01:20,310 --> 00:01:23,440
and that's exactly what we are really taking care of right here.

23
00:01:23,550 --> 00:01:28,020
We're making sure that we're not going to show any content until we are sure that it is the correct

24
00:01:28,020 --> 00:01:29,830
content to actually show.

25
00:01:30,350 --> 00:01:30,850
OK.

26
00:01:30,990 --> 00:01:32,870
So let's go back over to our own.

27
00:01:32,920 --> 00:01:37,440
You know one thing really quick if you did change that throttle suddenly setting over here to make sure

28
00:01:37,440 --> 00:01:38,720
that you change it back.

29
00:01:39,030 --> 00:01:44,340
So disable throttling otherwise you're going to be kind of disappointed as you go and start to use our

30
00:01:44,340 --> 00:01:44,950
application.

31
00:01:44,950 --> 00:01:46,750
Everything seems really really slow.

32
00:01:46,780 --> 00:01:48,170
So make sure you turn that off.

33
00:01:48,300 --> 00:01:51,300
And now we're back to a good fast speed.

34
00:01:51,770 --> 00:01:52,070
OK.

35
00:01:52,080 --> 00:01:53,600
So let's test this out now.

36
00:01:53,720 --> 00:01:57,160
I mean let's actually finish off this render content method right here.

37
00:01:57,330 --> 00:02:00,810
So we want to return the correct content for the header.

38
00:02:00,900 --> 00:02:06,510
Depending on the users current authentication state and we're first going to take care of the base case

39
00:02:06,570 --> 00:02:08,700
the case in which we are still deciding.

40
00:02:08,910 --> 00:02:13,540
So if we are still deciding what content to show I really don't want to show anything at all.

41
00:02:13,650 --> 00:02:19,020
And so I'm going to return nothing because I don't want to show anything in the letter or at least on

42
00:02:19,020 --> 00:02:21,310
the right hand side of it.

43
00:02:21,420 --> 00:02:26,910
Now I'll take care of the false case the case in which the user is signed out of our application in

44
00:02:26,910 --> 00:02:27,510
this case.

45
00:02:27,510 --> 00:02:32,250
I want to return that link that says log into our application.

46
00:02:32,250 --> 00:02:37,900
So I'm going to return from here and fly with an anchor tag.

47
00:02:37,980 --> 00:02:41,590
It's going to have an H.F. property which we'll fill out in just a second.

48
00:02:41,790 --> 00:02:50,160
A close off the anchor tag a close off the line like so then the text inside of here will place log

49
00:02:50,160 --> 00:02:52,410
in with Google.

50
00:02:52,650 --> 00:02:57,510
And then for the actual Tref remember the route that we place here it's a relative route over to our

51
00:02:57,510 --> 00:03:04,820
express API which will be slash off slash Google like some OK and looks like you're wants to see all

52
00:03:04,820 --> 00:03:06,880
that on a single line which is fine.

53
00:03:07,280 --> 00:03:11,780
So now we will also take care of the default case here the case in which we are logged in.

54
00:03:11,780 --> 00:03:14,660
Now we don't really have a lot to show in this case just yet.

55
00:03:14,660 --> 00:03:20,570
Remember that according to the mockups we eventually want to show like these payment buttons and the

56
00:03:20,570 --> 00:03:22,690
log out button and all that kind of good stuff.

57
00:03:22,790 --> 00:03:25,670
We don't really have the infrastructure for all of that just yet.

58
00:03:25,670 --> 00:03:31,520
So let's just kind of return some just whatever GSX for now something to just show inside of there and

59
00:03:31,520 --> 00:03:34,220
say hey we're kind of working on this stuff.

60
00:03:34,250 --> 00:03:38,930
So back inside our case statement from this one I'm going to turn a single ally

61
00:03:42,720 --> 00:03:48,070
and I'll give it an anchor tag with the text log out.

62
00:03:48,180 --> 00:03:52,170
So we'll come back later and really flesh this thing out when we start to talk about billing inside

63
00:03:52,170 --> 00:03:54,120
of our application.

64
00:03:54,120 --> 00:03:56,970
OK so now it's time to test this out one last time.

65
00:03:57,210 --> 00:04:02,730
Back at the header it looks like I'm currently logged in so I see the log out button if I go over to

66
00:04:02,730 --> 00:04:05,320
the other tab and I log out.

67
00:04:05,370 --> 00:04:10,060
So when you go to localhost 5000 slash API slash log out.

68
00:04:10,080 --> 00:04:12,510
So now log logged out of the application.

69
00:04:12,530 --> 00:04:18,530
So now go back over the rock side refresh and I see correctly log in with Google appear on screen.

70
00:04:18,600 --> 00:04:23,380
Now when I click this button I get redirected over to our flow.

71
00:04:23,460 --> 00:04:25,650
I get asked to select an account.

72
00:04:25,650 --> 00:04:27,010
All that stuff is totally fine.

73
00:04:27,070 --> 00:04:29,060
And I get sent back to our application.

74
00:04:29,130 --> 00:04:34,140
And again we see the same error message as before which is cannot get slashed or slash school sashed

75
00:04:34,140 --> 00:04:35,210
callback.

76
00:04:35,220 --> 00:04:40,140
So at this point to really finish off this first phase of the header the last thing we really have to

77
00:04:40,140 --> 00:04:45,570
do is make sure that when we sign in we get redirected to somewhere a little bit more reasonable inside

78
00:04:45,570 --> 00:04:46,590
of our application.

79
00:04:46,830 --> 00:04:50,960
So let's take care of this step inside the next section and make sure that our user gets dumped back

80
00:04:50,960 --> 00:04:51,760
into location.

81
00:04:51,840 --> 00:04:56,160
That's a little bit more befitting of the fact that they just signed Dan Rather than seeing this nasty

82
00:04:56,160 --> 00:04:57,350
little error message.

83
00:04:57,480 --> 00:04:59,910
So quick break and I'll see you in the next section.