Now to make this logout button work,
we need to add a new Server Action.
So I'll go to my auth-actions.js file,
and in there I'll export a new async function,
which I'll name logout,
and that function should do what the name suggests.
Now, before we continue working on that function,
I'll go to the auth.js file though,
where I have all that Lucia authentication related code
because I also want to add a new function there,
a function called destroySession,
because that's in the end what I want to do
when I log a user out,
it means that we want to destroy the session
and the session cookie for that user.
Now, how do we do that?
Well, we can start by checking
whether the user has a valid session.
So we can call verifyAuth here,
and we'll get back this result object,
which has a user and a session key,
at least if we await this,
since verifyAuth actually returns a promise.
But then we get a session and a user key here.
And I'm interested in a session.
Because if here I find that we don't have a session,
I know that there was no session cookie to begin with,
and in that case, we can return an object
where we could say unauthorized in some error key
because something went wrong here.
We could also throw an error, alternatively.
If we make it past this if check though,
we know that we did have a session cookie
and we had a valid session as well,
but now I want to invalidate it and destroy the cookie.
Therefore, we should call lucia.invalidateSession
and pass our session ID to that method and await that.
That will under the hood,
reach out to that session's database table
and delete the session from there
so that we forget the fact that this user was logged in.
In addition, we should also clear that session cookie,
and we did that before.
Here, we want to create a blank session cookie
and then set it so that we effectively
get rid of that session cookie.
And that's all that should happen when we destroy a session,
we should delete it from the database in the end
and clear that cookie.
So now with that destroySession function added,
we can go back to our auth-actions here,
and in that logout action
we can and should now call this newly added
destroySession function and await it.
And then we can and should redirect the user
and redirect to the starting page,
so to the log-in page, for example.
Well, and with that, we can now use this logout action here
in our layout,
the auth specific layout,
and assign the logout action as a action to this form here
so that this logout button will trigger this action.
For that, of course, you must import this logout action,
and if you then do that and you save that and reload
and you are logged in, if you click logout,
you see, I'm redirected.
And if I now try to access /training, that will fail,
and I'm continuously redirected here to the login page
because that session cookie was destroyed.
And I have for now have to log in again
to view that page again.
And then of course we can also log out again,
and that's how we can implement authentication
with NextJS and Lucia.