So, let's make
this Logout button here work.
For this, of course, we can give it
the onClick prop, and then trigger some function.
A function, which I'll add here,
and a function, which I'll name LogoutHandler.
So, let's now, bind that function
to this button now by pointing added Logout Handler.
And now to logout we can, again,
use another function provided by next-auth/client.
And that is the signOut function with a capital O.
We had signIn for logging in,
we have signOut for, well ,signing out.
So here we can call, signOut like this.
And that, now, all returns a promise,
which tells us when it's done.
But here I don't even care about that
because since I'm using useSession
this component will be updated automatically anyways,
as soon as the active session changes.
And it will change when we sign out.
Next.js will then clear that cookie
and clear that information
that the active user is logged in.
Hence, if I now save here, if I reload I'm still logged in,
I can still see the profile point here.
But if I click logout that changes.
Now, if you go to Application in the dev tools again,
and we inspect our cookies, we also see
that one very important cookie is missing,
and this session token cookie.
That's missing now because Next.js cleared that
when we sent this signOut request.
Now, of course, we can still sign in again though,
if we enter valid credentials,
and then our UI updates appropriately.
So, that is how this works.
That's how we can logout and update the UI.
Now, of course, it would be nice that if we are logged in,
we can't even visit this login page here.
And on the other end, if we are on profile
and I logout I don't want to be able
to stay on that logout page, and that's also something
which we can implement with NextAuth.