1
00:00:00,000 --> 00:00:03,000
Now to make this logout button work,

2
00:00:03,000 --> 00:00:07,000
we need to add a new Server Action.

3
00:00:07,000 --> 00:00:10,000
So I'll go to my auth-actions.js file,

4
00:00:10,000 --> 00:00:13,000
and in there I'll export a new async function,

5
00:00:13,000 --> 00:00:14,000
which I'll name logout,

6
00:00:14,000 --> 00:00:18,000
and that function should do what the name suggests.

7
00:00:18,000 --> 00:00:20,000
Now, before we continue working on that function,

8
00:00:20,000 --> 00:00:23,000
I'll go to the auth.js file though,

9
00:00:23,000 --> 00:00:27,000
where I have all that Lucia authentication related code

10
00:00:27,000 --> 00:00:30,000
because I also want to add a new function there,

11
00:00:30,000 --> 00:00:34,000
a function called destroySession,

12
00:00:34,000 --> 00:00:37,000
because that's in the end what I want to do

13
00:00:37,000 --> 00:00:39,000
when I log a user out,

14
00:00:39,000 --> 00:00:42,000
it means that we want to destroy the session

15
00:00:42,000 --> 00:00:45,000
and the session cookie for that user.

16
00:00:46,000 --> 00:00:48,000
Now, how do we do that?

17
00:00:48,000 --> 00:00:51,000
Well, we can start by checking

18
00:00:51,000 --> 00:00:54,000
whether the user has a valid session.

19
00:00:54,000 --> 00:00:57,000
So we can call verifyAuth here,

20
00:00:58,000 --> 00:01:01,000
and we'll get back this result object,

21
00:01:01,000 --> 00:01:05,000
which has a user and a session key,

22
00:01:05,000 --> 00:01:07,000
at least if we await this,

23
00:01:07,000 --> 00:01:11,000
since verifyAuth actually returns a promise.

24
00:01:11,000 --> 00:01:14,000
But then we get a session and a user key here.

25
00:01:14,000 --> 00:01:15,000
And I'm interested in a session.

26
00:01:17,000 --> 00:01:21,000
Because if here I find that we don't have a session,

27
00:01:21,000 --> 00:01:25,000
I know that there was no session cookie to begin with,

28
00:01:25,000 --> 00:01:29,000
and in that case, we can return an object

29
00:01:29,000 --> 00:01:33,000
where we could say unauthorized in some error key

30
00:01:35,000 --> 00:01:37,000
because something went wrong here.

31
00:01:37,000 --> 00:01:39,000
We could also throw an error, alternatively.

32
00:01:40,000 --> 00:01:43,000
If we make it past this if check though,

33
00:01:43,000 --> 00:01:45,000
we know that we did have a session cookie

34
00:01:45,000 --> 00:01:48,000
and we had a valid session as well,

35
00:01:48,000 --> 00:01:52,000
but now I want to invalidate it and destroy the cookie.

36
00:01:53,000 --> 00:01:57,000
Therefore, we should call lucia.invalidateSession

37
00:01:58,000 --> 00:02:03,000
and pass our session ID to that method and await that.

38
00:02:04,000 --> 00:02:06,000
That will under the hood,

39
00:02:06,000 --> 00:02:09,000
reach out to that session's database table

40
00:02:09,000 --> 00:02:11,000
and delete the session from there

41
00:02:11,000 --> 00:02:15,000
so that we forget the fact that this user was logged in.

42
00:02:17,000 --> 00:02:20,000
In addition, we should also clear that session cookie,

43
00:02:20,000 --> 00:02:22,000
and we did that before.

44
00:02:22,000 --> 00:02:25,000
Here, we want to create a blank session cookie

45
00:02:25,000 --> 00:02:28,000
and then set it so that we effectively

46
00:02:28,000 --> 00:02:30,000
get rid of that session cookie.

47
00:02:31,000 --> 00:02:36,000
And that's all that should happen when we destroy a session,

48
00:02:36,000 --> 00:02:38,000
we should delete it from the database in the end

49
00:02:38,000 --> 00:02:40,000
and clear that cookie.

50
00:02:41,000 --> 00:02:44,000
So now with that destroySession function added,

51
00:02:44,000 --> 00:02:48,000
we can go back to our auth-actions here,

52
00:02:48,000 --> 00:02:51,000
and in that logout action

53
00:02:51,000 --> 00:02:53,000
we can and should now call this newly added

54
00:02:53,000 --> 00:02:57,000
destroySession function and await it.

55
00:02:58,000 --> 00:03:03,000
And then we can and should redirect the user

56
00:03:03,000 --> 00:03:04,000
and redirect to the starting page,

57
00:03:04,000 --> 00:03:08,000
so to the log-in page, for example.

58
00:03:08,000 --> 00:03:13,000
Well, and with that, we can now use this logout action here

59
00:03:13,000 --> 00:03:15,000
in our layout,

60
00:03:15,000 --> 00:03:18,000
the auth specific layout,

61
00:03:18,000 --> 00:03:23,000
and assign the logout action as a action to this form here

62
00:03:25,000 --> 00:03:29,000
so that this logout button will trigger this action.

63
00:03:29,000 --> 00:03:33,000
For that, of course, you must import this logout action,

64
00:03:33,000 --> 00:03:36,000
and if you then do that and you save that and reload

65
00:03:36,000 --> 00:03:39,000
and you are logged in, if you click logout,

66
00:03:39,000 --> 00:03:41,000
you see, I'm redirected.

67
00:03:42,000 --> 00:03:46,000
And if I now try to access /training, that will fail,

68
00:03:46,000 --> 00:03:50,000
and I'm continuously redirected here to the login page

69
00:03:50,000 --> 00:03:53,000
because that session cookie was destroyed.

70
00:03:54,000 --> 00:03:57,000
And I have for now have to log in again

71
00:03:57,000 --> 00:03:59,000
to view that page again.

72
00:03:59,000 --> 00:04:01,000
And then of course we can also log out again,

73
00:04:03,000 --> 00:04:05,000
and that's how we can implement authentication

74
00:04:05,000 --> 00:04:08,000
with NextJS and Lucia.