So we are able to log in and to treat the user as
logged in, which is why we have that logout button
in this case,
but we're not able to log the user out and we want to have
that functionality as well.
Thankfully, we already have the logout button,
but a button on its own doesn't do anything.
Unlike an anchor element, it doesn't lead anywhere.
And without JavaScript browser site JavaScript,
we can click the button as often as we want it won't do
anything.
But of course,
we just need to wrap a button in a form to change that.
If I add such a form here and we moved the button in here,
then with the form action method,
we got tools of controlling what this button does.
And here I will do just that I will use form action to send
the request to slash logout.
And the method used here is post
because forms only know post
or get and post makes more sense to me here because when
we logout, when we click this button,
we plan on changing something on the server.
We will change the session and remove any data from that
session that identifies this user as being logged in.
We can't use other methods like delete here.
Forms don't support this.
So post it is.
Since it is a post form,
it also needs a CSRF token.
You need that in every form that sends a post request.
So here I'll add my hidden input again with a name of
_CSRF.
And then here,
the value again is set with EJS and it's set to
locals.csrfToken just as we did it in the sign-up and
log in forms.
And you could extract that into a separate includable EJS
snippet,
but I'll just not do it here because it's just one line,
but it is something you could do for sure,
so that you don't have to re-add that token manually all
the time.
I think it's a good practice here to really not forget that
you need that token and why we have it.
But with that, we have this logout form.
Now we need a route and the handler to do something when
that button is clicked and that form is submitted.
Now I'll start with the handler.
So with a controller action in the auth controller,
there I'll add a function logout,
which is a regular controller function here,
which gets a request and a response.
And then what? What do we do in here?
In the end, it's very simple.
We just want to remove some data
from the session. That's all.
So therefore,
I'll go back to this,
util authentication JS file,
and in there add a new function
which we could call destroyUserSession or
userAuthSession because we're not
destroying the entire session.
We're just getting rid of the data that identifies the user
as being authenticated.
And here I expect to get the req object so that in here I
can call reqsession.uid and set this to null.
Null is a built in value type in JavaScript.
And it basically means nothing. There is no value.
It is a value which we can set.
If you want to express that we have no value,
which is exactly what I want to do here.
I want to express that I have no user ID,
and if we have no user ID, of course,
the user is not logged in.
And then thereafter, we can call the reqsession safe,
but we don't have to do that. We only want to do that.
If we then have an action,
which we want to execute once this is done,
otherwise the express session package will automatically
save the session.
Whenever a request was handled successfully.
We just can get into a timing error with any possible
redirects thereafter,
but that's not necessarily a huge concern here in this case.
So therefore here we don't necessarily need to call safe,
but of course we could do it if we wanted to.
But with that
I'm going to expose destroyUserAuthSession here
Like this.
So that back in auth controller in logout,
I can simply call authUtil.destroyUserAuthSession
and pass my rec intuitive function.
And then they're all after all call res
redirect to redirect back to the starting page
or /login. Anything like this.
It's up to you where you want to redirect there author.
Then I just exposed this logout function here in this
object, which I export in my auth controller file.
And with that, we can wire it up to a route.
So in auth routes we can now register another post route
to /logout
where I point at authController.logout
like this.
With that, I now reload,
of course I'm still logged in.
That's the idea behind sessions
that they survive page reloads.
But if I click logout,
I'm redirected and the logout button is gone.
And if I go back to the starting page,
it's still gone until we log in again. If I do log in again,
it should of course reappear
as soon as we are done. Here it is.
So that's now working.
That's the log out functionality added.