The last thing that we have to implement on the head or component is the log out button up here.
Now you might be thinking to yourself Stephen hey this is really straightforward.
Why are we making such a big deal about log out.
All we really have to do to log out of the application is visit our local host 5000 slashy API slash
log out and that logs our user out.
Well it's a little bit more of a big deal than that and you might be thinking when I say that OK this
is going to be like another proxy thing.
And we have to make sure we like set up a proxy or blah blah blah something like that.
Well not quite.
So let me go into detail here and tell you why how we'd log out a user is actually a rather large consideration.
So first off I want to remind you how we track a user or how we even consider them to be logged in when
the user first logs in.
We put some little token inside of their cookie that says OK include this on any follow up request.
Any time you come back to our application send the cookie along so we know who you are in order to log
out.
All we really have to do on the server side of our application is make sure that that cookie value gets
on set.
So we want to take the token in there just dump it and all of sudden magically the user is now logged
out of our application.
Now how we actually empty the cookie or the request type that is used to empty the cookie is the real
question.
So the real question here is when the user clicks on the log out button right here are we going to a
make an Ajax request that's going to go to that log out route or B make this into a traditional anchored
tag that will cause the entire browser to go to this log out route and then kill the user back to somewhere
inside of our application.
So let's really kind of dive into these two methods to make sure that the difference between them is
really clear.
So method number one would be a full HTP request.
So when the user clicks on the Like button that is actually an anchor tag that causes the entire browser
to forcibly redirect or forcibly navigate over to API slash log out.
And when the user visits that route the back end server will say OK you're here we're going to log you
out and then redirect you back to somewhere inside the application.
So you still see something like that has to do with our application.
The other possibility here is that when the user clicks on that button we do not do any type of in browser
nav navigation or any like very forceable New Age TTP requests to the server.
Instead we can make a little Ajax request to the back end to the API slash log out route Ajax request
like that still get full access and all the handling that Assos is associate with cookies.
And so when we make an Ajax request like this when we get the response back the response will say hey
browser empty out your cookies you're no longer signed in and the browser of course is going to respect
that.
It would then be up to us to somehow update the redux side of our application to make sure that was
clear to the user that they are no longer signed in.
So we would have to do something like make an action creator that says hey log out the user we would
have to update our producer to say hey after this log our request is complete.
Make sure that the reducer correctly says we're no longer land land or law.
Dan excuse me.
And then finally we would want to make sure that we also redirect the user back to the route route of
our application like the landing page essentially so that the user understands that they did just successfully
log out.
So essentially the big question here is do we handle log out within the context of the react and read
up side the app or do we just use traditional browser behavior and say let the user go log out and then
get kicked back to our application.
Now obviously without a doubt handling it this way.
So not with the Ajax request not going through the whole redux side of things is way easier to take
care of but the big difference between these two are kind of the benefit to going with the Ajax request
route right here is that it would be a much faster process because the browser is not changing HDMI
documents we're just making a single Ajax request when we get the response just tell the redux side
of everything to update itself.
So this would definitely be faster than Ajax request for the faster from the user's perspective than
the full HTP request right here.
So it really comes down to the use case of your application here.
You can go either route for us.
I think we're going to go this direction.
So we're going to make sure that when you click on that button we just redirect the browser over to
API slash log out.
But I could easily see cases in which in which you might want to go with this route down here and maybe
that case would be something like I don't know maybe you want to give the user a very quick snappy experience
or it's easy to kind of make up situations where you might want to have a faster log out.
But for us really we have no requirement for this whatsoever.
And in my mind when the user goes to log out of your application like that's it you're done.
I don't really care about you anymore.
You're trying to sign out.
I don't really care if it takes you a little bit of extra time to sign out.
Too bad you're leaving anyway so you know what are you doing for me.
Right.
Anyways let's go with this route.
So we're going to wire this up inside the header and it is going to be awfully quick because we don't
have to go with all this action creator stuff and whatnot.
So back inside of our Hetter Here's our rendered content method.
Here's the log out button right here.
All we have to do is put on a Tref of slash API slash log out like so.
And the other thing that we're going to have to do you know let's first test this.
You're going to see very quickly what we have to do.
If I click on the log out button now you'll see that the entire page does in fact refresh like so but
we don't have any content on the screen.
So we need to make sure that after the user comes to this route on our back and server the back end
attempts to redirect the user over to the route route of our application.
In other words the landing page.
So the user will still see some content on the screen.
So again we're going to open up our routes off route start G-S file inside of your we have a route handler
defined to log the user out and then send them back the user model and we had previously put this together
really just to do a little bit of testing now rather than send back the current user model which will
always be essentially empty because no one is logged in.
We are going to instead redirect the user over to the route route of our application similar to what
we did up here when we redirect the user to the route slash surveys.
So in this case we'll say redstart redirect back to the route route of just forward slash like so.
OK.
So let's test this out.
I will go back to localhost three thousand.
So I get logged in with Google a click the button I go through the water flow select my account I get
kicked back to our application on the surveys route like so I see the dashboard of component appear
on the screen.
Now when I click on log out that makes request to the API slash log out route that redirects us back
to the route routed the application.
And I again see our re-act up with the landing component on the page.
All right.
So yes this was far easier to wire up this way than going with the entire kind of built in a jacksie
sort of route right here.
That would have certainly worked as well but it would have been a lot more work on our side.
So I think that the header from an authentication standpoint is now in a pretty good spot because we
are easily able to both log in and log out of the application.
So let's take a quick break.
We'll come back in the next section and we'll continue working on our app.
I'll see you in just a sec.