1
00:00:02,000 --> 00:00:02,000
So, let's make

2
00:00:02,000 --> 00:00:05,000
this Logout button here work.

3
00:00:05,000 --> 00:00:07,000
For this, of course, we can give it

4
00:00:07,000 --> 00:00:10,000
the onClick prop, and then trigger some function.

5
00:00:10,000 --> 00:00:12,000
A function, which I'll add here,

6
00:00:13,000 --> 00:00:16,000
and a function, which I'll name LogoutHandler.

7
00:00:17,000 --> 00:00:19,000
So, let's now, bind that function

8
00:00:19,000 --> 00:00:24,000
to this button now by pointing added Logout Handler.

9
00:00:25,000 --> 00:00:27,000
And now to logout we can, again,

10
00:00:27,000 --> 00:00:31,000
use another function provided by next-auth/client.

11
00:00:31,000 --> 00:00:36,000
And that is the signOut function with a capital O.

12
00:00:36,000 --> 00:00:38,000
We had signIn for logging in,

13
00:00:38,000 --> 00:00:41,000
we have signOut for, well ,signing out.

14
00:00:41,000 --> 00:00:43,000
So here we can call, signOut like this.

15
00:00:43,000 --> 00:00:45,000
And that, now, all returns a promise,

16
00:00:45,000 --> 00:00:47,000
which tells us when it's done.

17
00:00:47,000 --> 00:00:49,000
But here I don't even care about that

18
00:00:49,000 --> 00:00:51,000
because since I'm using useSession

19
00:00:51,000 --> 00:00:55,000
this component will be updated automatically anyways,

20
00:00:55,000 --> 00:00:58,000
as soon as the active session changes.

21
00:00:58,000 --> 00:01:00,000
And it will change when we sign out.

22
00:01:00,000 --> 00:01:03,000
Next.js will then clear that cookie

23
00:01:03,000 --> 00:01:05,000
and clear that information

24
00:01:05,000 --> 00:01:08,000
that the active user is logged in.

25
00:01:09,000 --> 00:01:13,000
Hence, if I now save here, if I reload I'm still logged in,

26
00:01:13,000 --> 00:01:16,000
I can still see the profile point here.

27
00:01:16,000 --> 00:01:18,000
But if I click logout that changes.

28
00:01:19,000 --> 00:01:23,000
Now, if you go to Application in the dev tools again,

29
00:01:23,000 --> 00:01:26,000
and we inspect our cookies, we also see

30
00:01:26,000 --> 00:01:29,000
that one very important cookie is missing,

31
00:01:29,000 --> 00:01:32,000
and this session token cookie.

32
00:01:32,000 --> 00:01:35,000
That's missing now because Next.js cleared that

33
00:01:35,000 --> 00:01:39,000
when we sent this signOut request.

34
00:01:39,000 --> 00:01:42,000
Now, of course, we can still sign in again though,

35
00:01:42,000 --> 00:01:45,000
if we enter valid credentials,

36
00:01:46,000 --> 00:01:49,000
and then our UI updates appropriately.

37
00:01:49,000 --> 00:01:51,000
So, that is how this works.

38
00:01:51,000 --> 00:01:53,000
That's how we can logout and update the UI.

39
00:01:54,000 --> 00:01:58,000
Now, of course, it would be nice that if we are logged in,

40
00:01:58,000 --> 00:02:03,000
we can't even visit this login page here.

41
00:02:03,000 --> 00:02:06,000
And on the other end, if we are on profile

42
00:02:06,000 --> 00:02:10,000
and I logout I don't want to be able

43
00:02:10,000 --> 00:02:14,000
to stay on that logout page, and that's also something

44
00:02:14,000 --> 00:02:16,000
which we can implement with NextAuth.