In the last section we tweaked the header to make sure that it was aware of whether or not the current
user was logged in to really test this out.
Now we can open up our chrome developer tools go to the Network tab and on the very right hand side
over here you'll see a little dropdown that you can use to throttle your internet connection so we can
use this to really exaggerate the duration of the request.
To find out the current user.
And when we do so love better sense of what a user would see if they were using our app on a mobile
device.
So for me I just set this to Wi-Fi which is enough of a throttle to kind of notice this change.
And I have logged in.
You'll also notice that so I went back over to localhost 5000 slash slash Google.
Now when I refreshed the page watch the text right here much more closely.
So refresh and again it's just sometimes very brief.
OK.
That time it was definitely there.
You'll see it it says just like hey I'm still figuring out if I'm logged in still deciding.
So you can see just very briefly right there.
So you can easily imagine that if we had a lot of content inside the header that sudden flash of content
would be something that is really annoying for our users and I don't know if you use mobile that often
or how often you go around the Internet watching like news sites or anything like that.
But one of the most common complaints about mobile web is when elements start to jump on the screen
and that's exactly what we are really taking care of right here.
We're making sure that we're not going to show any content until we are sure that it is the correct
content to actually show.
OK.
So let's go back over to our own.
You know one thing really quick if you did change that throttle suddenly setting over here to make sure
that you change it back.
So disable throttling otherwise you're going to be kind of disappointed as you go and start to use our
application.
Everything seems really really slow.
So make sure you turn that off.
And now we're back to a good fast speed.
OK.
So let's test this out now.
I mean let's actually finish off this render content method right here.
So we want to return the correct content for the header.
Depending on the users current authentication state and we're first going to take care of the base case
the case in which we are still deciding.
So if we are still deciding what content to show I really don't want to show anything at all.
And so I'm going to return nothing because I don't want to show anything in the letter or at least on
the right hand side of it.
Now I'll take care of the false case the case in which the user is signed out of our application in
this case.
I want to return that link that says log into our application.
So I'm going to return from here and fly with an anchor tag.
It's going to have an H.F. property which we'll fill out in just a second.
A close off the anchor tag a close off the line like so then the text inside of here will place log
in with Google.
And then for the actual Tref remember the route that we place here it's a relative route over to our
express API which will be slash off slash Google like some OK and looks like you're wants to see all
that on a single line which is fine.
So now we will also take care of the default case here the case in which we are logged in.
Now we don't really have a lot to show in this case just yet.
Remember that according to the mockups we eventually want to show like these payment buttons and the
log out button and all that kind of good stuff.
We don't really have the infrastructure for all of that just yet.
So let's just kind of return some just whatever GSX for now something to just show inside of there and
say hey we're kind of working on this stuff.
So back inside our case statement from this one I'm going to turn a single ally
and I'll give it an anchor tag with the text log out.
So we'll come back later and really flesh this thing out when we start to talk about billing inside
of our application.
OK so now it's time to test this out one last time.
Back at the header it looks like I'm currently logged in so I see the log out button if I go over to
the other tab and I log out.
So when you go to localhost 5000 slash API slash log out.
So now log logged out of the application.
So now go back over the rock side refresh and I see correctly log in with Google appear on screen.
Now when I click this button I get redirected over to our flow.
I get asked to select an account.
All that stuff is totally fine.
And I get sent back to our application.
And again we see the same error message as before which is cannot get slashed or slash school sashed
callback.
So at this point to really finish off this first phase of the header the last thing we really have to
do is make sure that when we sign in we get redirected to somewhere a little bit more reasonable inside
of our application.
So let's take care of this step inside the next section and make sure that our user gets dumped back
into location.
That's a little bit more befitting of the fact that they just signed Dan Rather than seeing this nasty
little error message.
So quick break and I'll see you in the next section.