In this video we're going to create a new page that will allow a user to sign out the application as
a quick reminder in order to sign out.
We need to make a request to our off service.
We've got a sign out root handler.
It's all we really have to do is make a POST request to API users sign out and I will sign our user
out there's something else really important I want to mention the request to sign out must be coming
from inside of our components or inside of some components.
If we try to make the sign out request from inside of a get initial props that request is going to be
issued by the server and the server doesn't really care or doesn't really know what to do with any cookies.
When we try to sign a user out back inside of that sign out root handler remember we are resetting the
user session and so we're going to send back a cookie whenever we make a request from get initial props
on the server.
If any cookie gets returned to us we're not really doing anything with it whatsoever.
So we need to make sure that these requests always comes from the user's browser in order to sign out
correctly and that means that we need to make a request from a component as opposed to from a get initial
props.
Function OK so let's create a new page inside of our auth directory called sign out dodging us inside
of here.
We're going to get our user request joke and we're also going to get the use effect function from react
so I gonna get use effect from react and I'll get user request from up to directories books use request
I'll then export a component
so inside of here whenever this component is displayed I want to just return a message to the user and
say something like signing you out or then going to immediately as soon as this component is rendered.
We're going to use the use effect took to try to make a request to sign the user out.
Once the user is signed out by making use of user request right here or then going to navigate the user
back to our main landing page.
So that's the general idea.
That's how we're going to accomplish this so I'm going to first set up a request function or a request
function by using user request.
So remember we get back a do request function whenever we call use the request and to use request we
have to provide a couple of different arguments.
We have to provide that your URL the method and a body upon is required and then we can optionally also
provide on success if we want to have the ability to respond to a successful request.
So in our case are you URL we'll be API users sign out the method we'll be post.
The body is gonna be an empty object.
It really really wasn't maybe the best idea to have sign out be tied to a post request but that's how
we ended up.
So it's what we're doing and we'll define an on success now as we saw previously.
Back over inside of sign in and sign up inside of on success.
As soon as we successfully make this request we want to navigate the user owns the route route.
So we're gonna do something very similar.
Bakari to what we did back over instead of sign in and sign up do you want to Colorado or not push and
navigate to our route route tobacco over here.
I'll do a route or not push our route route.
After we successfully sign out and I'll make sure that I also imports router from next router at the
top then finally we need to make sure we call do request at some point time so I'm going to set up use
effect.
I only want to run the thing at one time so I gonna put in an array or see it a second argument of an
array and inside of here I will call do request and that should be at.
I'm gonna save this flip back over I'm going to refresh the page.
And now in theory if I take a look at my application inside of chrome console and I see my cookie right
there I should be able to click on sign out get navigate it over it automatically redirected to the
landing page I should see that I'm not signed in anymore and the cookie cookies should be cleared as
well.
It looks like that is exactly what occurred Nashville to sign up again just to test this once more I'll
sign up.
Sign out cookies reset.
I got redirected to the landing page and I no longer signed it.
Perfect.
All right.
Well I think that's it for the authentication aspects of this client site application.
So let's take a quick pause right here and continue in just a moment.