1
00:00:02,190 --> 00:00:05,790
So we are able to log in and to treat the user as

2
00:00:05,790 --> 00:00:08,500
logged in, which is why we have that logout button

3
00:00:08,500 --> 00:00:09,550
in this case,

4
00:00:09,550 --> 00:00:13,850
but we're not able to log the user out and we want to have

5
00:00:13,850 --> 00:00:16,100
that functionality as well.

6
00:00:16,100 --> 00:00:18,700
Thankfully, we already have the logout button,

7
00:00:18,700 --> 00:00:22,120
but a button on its own doesn't do anything.

8
00:00:22,120 --> 00:00:24,990
Unlike an anchor element, it doesn't lead anywhere.

9
00:00:24,990 --> 00:00:28,960
And without JavaScript browser site JavaScript,

10
00:00:28,960 --> 00:00:32,180
we can click the button as often as we want it won't do

11
00:00:32,180 --> 00:00:33,013
anything.

12
00:00:34,110 --> 00:00:34,943
But of course,

13
00:00:34,943 --> 00:00:38,430
we just need to wrap a button in a form to change that.

14
00:00:38,430 --> 00:00:41,950
If I add such a form here and we moved the button in here,

15
00:00:41,950 --> 00:00:44,160
then with the form action method,

16
00:00:44,160 --> 00:00:48,060
we got tools of controlling what this button does.

17
00:00:48,060 --> 00:00:52,450
And here I will do just that I will use form action to send

18
00:00:52,450 --> 00:00:54,400
the request to slash logout.

19
00:00:54,400 --> 00:00:57,820
And the method used here is post

20
00:00:57,820 --> 00:00:59,660
because forms only know post

21
00:00:59,660 --> 00:01:04,090
or get and post makes more sense to me here because when

22
00:01:04,090 --> 00:01:06,540
we logout, when we click this button,

23
00:01:06,540 --> 00:01:09,170
we plan on changing something on the server.

24
00:01:09,170 --> 00:01:12,960
We will change the session and remove any data from that

25
00:01:12,960 --> 00:01:17,303
session that identifies this user as being logged in.

26
00:01:18,350 --> 00:01:21,390
We can't use other methods like delete here.

27
00:01:21,390 --> 00:01:23,230
Forms don't support this.

28
00:01:23,230 --> 00:01:24,513
So post it is.

29
00:01:25,610 --> 00:01:27,260
Since it is a post form,

30
00:01:27,260 --> 00:01:29,670
it also needs a CSRF token.

31
00:01:29,670 --> 00:01:33,600
You need that in every form that sends a post request.

32
00:01:33,600 --> 00:01:37,990
So here I'll add my hidden input again with a name of

33
00:01:37,990 --> 00:01:39,313
_CSRF.

34
00:01:40,730 --> 00:01:41,700
And then here,

35
00:01:41,700 --> 00:01:46,500
the value again is set with EJS and it's set to

36
00:01:48,020 --> 00:01:52,910
locals.csrfToken just as we did it in the sign-up and

37
00:01:52,910 --> 00:01:54,750
log in forms.

38
00:01:54,750 --> 00:01:58,970
And you could extract that into a separate includable EJS

39
00:01:58,970 --> 00:01:59,980
snippet,

40
00:01:59,980 --> 00:02:03,050
but I'll just not do it here because it's just one line,

41
00:02:03,050 --> 00:02:05,210
but it is something you could do for sure,

42
00:02:05,210 --> 00:02:08,080
so that you don't have to re-add that token manually all

43
00:02:08,080 --> 00:02:08,979
the time.

44
00:02:08,979 --> 00:02:12,420
I think it's a good practice here to really not forget that

45
00:02:12,420 --> 00:02:15,123
you need that token and why we have it.

46
00:02:16,390 --> 00:02:18,460
But with that, we have this logout form.

47
00:02:18,460 --> 00:02:21,840
Now we need a route and the handler to do something when

48
00:02:21,840 --> 00:02:24,343
that button is clicked and that form is submitted.

49
00:02:25,490 --> 00:02:28,270
Now I'll start with the handler.

50
00:02:28,270 --> 00:02:32,750
So with a controller action in the auth controller,

51
00:02:32,750 --> 00:02:36,050
there I'll add a function logout,

52
00:02:36,050 --> 00:02:39,800
which is a regular controller function here,

53
00:02:39,800 --> 00:02:41,993
which gets a request and a response.

54
00:02:42,980 --> 00:02:46,743
And then what? What do we do in here?

55
00:02:47,900 --> 00:02:49,110
In the end, it's very simple.

56
00:02:49,110 --> 00:02:50,730
We just want to remove some data

57
00:02:50,730 --> 00:02:52,713
from the session. That's all.

58
00:02:53,800 --> 00:02:55,960
So therefore,

59
00:02:55,960 --> 00:02:58,253
I'll go back to this,

60
00:02:59,710 --> 00:03:02,850
util authentication JS file,

61
00:03:02,850 --> 00:03:05,460
and in there add a new function

62
00:03:05,460 --> 00:03:07,610
which we could call destroyUserSession or

63
00:03:10,530 --> 00:03:13,950
userAuthSession because we're not

64
00:03:13,950 --> 00:03:15,420
destroying the entire session.

65
00:03:15,420 --> 00:03:18,550
We're just getting rid of the data that identifies the user

66
00:03:18,550 --> 00:03:20,063
as being authenticated.

67
00:03:20,970 --> 00:03:25,740
And here I expect to get the req object so that in here I

68
00:03:25,740 --> 00:03:29,573
can call reqsession.uid and set this to null.

69
00:03:30,470 --> 00:03:34,880
Null is a built in value type in JavaScript.

70
00:03:34,880 --> 00:03:38,510
And it basically means nothing. There is no value.

71
00:03:38,510 --> 00:03:40,430
It is a value which we can set.

72
00:03:40,430 --> 00:03:44,060
If you want to express that we have no value,

73
00:03:44,060 --> 00:03:46,390
which is exactly what I want to do here.

74
00:03:46,390 --> 00:03:49,340
I want to express that I have no user ID,

75
00:03:49,340 --> 00:03:51,720
and if we have no user ID, of course,

76
00:03:51,720 --> 00:03:53,293
the user is not logged in.

77
00:03:54,520 --> 00:03:58,430
And then thereafter, we can call the reqsession safe,

78
00:03:58,430 --> 00:04:01,050
but we don't have to do that. We only want to do that.

79
00:04:01,050 --> 00:04:02,440
If we then have an action,

80
00:04:02,440 --> 00:04:04,730
which we want to execute once this is done,

81
00:04:04,730 --> 00:04:08,300
otherwise the express session package will automatically

82
00:04:08,300 --> 00:04:09,550
save the session.

83
00:04:09,550 --> 00:04:13,030
Whenever a request was handled successfully.

84
00:04:13,030 --> 00:04:16,350
We just can get into a timing error with any possible

85
00:04:16,350 --> 00:04:17,660
redirects thereafter,

86
00:04:17,660 --> 00:04:21,190
but that's not necessarily a huge concern here in this case.

87
00:04:21,190 --> 00:04:24,440
So therefore here we don't necessarily need to call safe,

88
00:04:24,440 --> 00:04:26,690
but of course we could do it if we wanted to.

89
00:04:27,610 --> 00:04:28,443
But with that

90
00:04:28,443 --> 00:04:30,897
I'm going to expose destroyUserAuthSession here

91
00:04:33,835 --> 00:04:34,668
Like this.

92
00:04:36,240 --> 00:04:40,310
So that back in auth controller in logout,

93
00:04:40,310 --> 00:04:45,070
I can simply call authUtil.destroyUserAuthSession

94
00:04:45,070 --> 00:04:47,743
and pass my rec intuitive function.

95
00:04:48,660 --> 00:04:50,500
And then they're all after all call res

96
00:04:50,500 --> 00:04:54,580
redirect to redirect back to the starting page

97
00:04:54,580 --> 00:04:57,120
or /login. Anything like this.

98
00:04:57,120 --> 00:05:00,083
It's up to you where you want to redirect there author.

99
00:05:02,270 --> 00:05:05,890
Then I just exposed this logout function here in this

100
00:05:05,890 --> 00:05:09,623
object, which I export in my auth controller file.

101
00:05:10,900 --> 00:05:14,070
And with that, we can wire it up to a route.

102
00:05:14,070 --> 00:05:19,070
So in auth routes we can now register another post route

103
00:05:19,350 --> 00:05:22,210
to /logout

104
00:05:22,210 --> 00:05:26,360
where I point at authController.logout

105
00:05:26,360 --> 00:05:27,193
like this.

106
00:05:29,310 --> 00:05:31,910
With that, I now reload,

107
00:05:31,910 --> 00:05:33,250
of course I'm still logged in.

108
00:05:33,250 --> 00:05:35,000
That's the idea behind sessions

109
00:05:35,000 --> 00:05:38,170
that they survive page reloads.

110
00:05:38,170 --> 00:05:39,420
But if I click logout,

111
00:05:39,420 --> 00:05:42,390
I'm redirected and the logout button is gone.

112
00:05:42,390 --> 00:05:44,220
And if I go back to the starting page,

113
00:05:44,220 --> 00:05:49,220
it's still gone until we log in again. If I do log in again,

114
00:05:50,470 --> 00:05:52,570
it should of course reappear

115
00:05:52,570 --> 00:05:55,293
as soon as we are done. Here it is.

116
00:05:56,190 --> 00:05:57,390
So that's now working.

117
00:05:57,390 --> 00:05:59,883
That's the log out functionality added.