All language subtitles for 012 Adding User Logout_Downloadly.ir_en

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.