1
00:00:02,070 --> 00:00:06,000
I need this CSRF token on all my pages,

2
00:00:06,000 --> 00:00:08,790
because I need it for the logout button header.

3
00:00:08,790 --> 00:00:12,973
And therefore, basically all pages need that CSRF Token.

4
00:00:14,050 --> 00:00:15,100
Of course, at the moment,

5
00:00:15,100 --> 00:00:18,300
I'm always generating and passing the CSRF token

6
00:00:18,300 --> 00:00:20,550
into every template therefore.

7
00:00:20,550 --> 00:00:23,030
So, every route that renders a template,

8
00:00:23,030 --> 00:00:25,450
also passes into CSRF token,

9
00:00:25,450 --> 00:00:29,593
because I'm referring to that token in my header include.

10
00:00:30,890 --> 00:00:32,253
There, I have this input.

11
00:00:33,120 --> 00:00:36,333
This works, but it's a bit annoying and easy to overlook.

12
00:00:37,210 --> 00:00:40,890
Therefore, instead of doing it like this,

13
00:00:40,890 --> 00:00:44,660
I actually would rather not pass it in,

14
00:00:44,660 --> 00:00:48,160
in all those render method calls.

15
00:00:48,160 --> 00:00:52,350
Instead, I wanna use this res.locals approach again,

16
00:00:52,350 --> 00:00:55,330
to automatically set it for all the responses

17
00:00:55,330 --> 00:00:56,653
that are generated.

18
00:00:58,280 --> 00:01:00,950
And we can do this in app.js.

19
00:01:00,950 --> 00:01:05,140
Here, after initializing the CSRF package,

20
00:01:05,140 --> 00:01:08,090
I actually will use my own custom middleware,

21
00:01:08,090 --> 00:01:11,260
which should add this res.locals field,

22
00:01:11,260 --> 00:01:14,310
with the generated CSRF token.

23
00:01:14,310 --> 00:01:16,380
And we could do this in line here,

24
00:01:16,380 --> 00:01:19,390
but since we learned about creating a middlewares folder

25
00:01:19,390 --> 00:01:21,330
for our own middlewares,

26
00:01:21,330 --> 00:01:26,330
I'll add my own csrftokenmiddleware.js file in there.

27
00:01:28,310 --> 00:01:32,070
And in this CSRFtokenmiddleware.js file,

28
00:01:32,070 --> 00:01:34,200
all add a function,

29
00:01:34,200 --> 00:01:37,483
Add CSRF Token could be the name,

30
00:01:38,630 --> 00:01:43,630
where I get a request, a response, and this next function,

31
00:01:44,300 --> 00:01:46,450
because this function should act

32
00:01:46,450 --> 00:01:48,480
as a regular express middleware.

33
00:01:48,480 --> 00:01:52,080
And all express middlewares get requests and responses

34
00:01:52,080 --> 00:01:54,590
and this next function.

35
00:01:54,590 --> 00:01:58,280
And I will then generate my CSRF token here,

36
00:01:58,280 --> 00:02:02,200
by calling req.CSRF token as a method.

37
00:02:02,200 --> 00:02:06,863
That is possible, because the CSRF package adds this method.

38
00:02:07,970 --> 00:02:10,800
Then I reach out to res.locals,

39
00:02:10,800 --> 00:02:14,360
and add my CSRF token like that.

40
00:02:14,360 --> 00:02:18,250
Of course, alternatively, we do this in one line only,

41
00:02:18,250 --> 00:02:21,460
like this that also works.

42
00:02:21,460 --> 00:02:23,570
And then there after, I call next,

43
00:02:23,570 --> 00:02:26,913
so that we continue with the next middleware in line.

44
00:02:28,310 --> 00:02:30,900
And then here, I'll just export

45
00:02:30,900 --> 00:02:33,450
this add CSRF Token function,

46
00:02:33,450 --> 00:02:36,293
so that it can be used in other files.

47
00:02:37,150 --> 00:02:40,820
Because now in app.js, here I wanna use that.

48
00:02:40,820 --> 00:02:45,820
I will add my Add CSRF token middleware here.

49
00:02:47,130 --> 00:02:48,130
Let's also name it,

50
00:02:48,130 --> 00:02:50,560
Add CSRF Token Middleware,

51
00:02:50,560 --> 00:02:54,010
to be in line with that name I chose here.

52
00:02:54,010 --> 00:02:56,260
Though the name, of course, is up to you.

53
00:02:56,260 --> 00:03:00,370
And reach out to middlewares, CSRF token middleware.

54
00:03:00,370 --> 00:03:04,242
And then after initializing the CSRF token,

55
00:03:04,242 --> 00:03:08,173
I'll activate my own Add CSRF Token middleware.

56
00:03:09,080 --> 00:03:12,883
And that will add that CSRF token to the res.locals field.

57
00:03:13,930 --> 00:03:16,740
Now you learned before that everything that's stored in this

58
00:03:16,740 --> 00:03:18,420
res.locals field,

59
00:03:18,420 --> 00:03:22,010
is automatically available in all the templates.

60
00:03:22,010 --> 00:03:25,170
We just have to access it a bit differently.

61
00:03:25,170 --> 00:03:29,300
In the header EJS file now, it's not CSRF token like this,

62
00:03:29,300 --> 00:03:30,913
but instead locals.csrftoken.

63
00:03:33,230 --> 00:03:35,220
That's how we get access to the data,

64
00:03:35,220 --> 00:03:37,393
stored in res.locals.

65
00:03:38,750 --> 00:03:41,790
And I'll do this in all my other forms as well now,

66
00:03:41,790 --> 00:03:43,410
like in the post-form.

67
00:03:43,410 --> 00:03:46,193
There I now access locals.csrftoken.

68
00:03:47,300 --> 00:03:52,300
And in post-item, where I also have a form for deleting.

69
00:03:52,660 --> 00:03:55,313
I also access locals.csrftoken.

70
00:03:57,200 --> 00:03:59,640
And in login, where I also have a form,

71
00:03:59,640 --> 00:04:02,373
it's now also locals.csrftoken.

72
00:04:04,250 --> 00:04:06,010
And the same in signup.

73
00:04:06,010 --> 00:04:10,293
Here I also have locals.csrftoken.

74
00:04:13,050 --> 00:04:17,240
With that, we can go back to the post-controller.

75
00:04:17,240 --> 00:04:20,839
And there, actually search for all the occurrences

76
00:04:20,839 --> 00:04:23,050
of CSRF token,

77
00:04:23,050 --> 00:04:24,550
and removed that,

78
00:04:24,550 --> 00:04:27,653
because it's now always added through res.locals.

79
00:04:30,460 --> 00:04:33,510
So we can now get rid of it like this.

80
00:04:33,510 --> 00:04:36,890
And then also already dive into the auth routes again,

81
00:04:36,890 --> 00:04:40,170
and search for the CSRF tokens there as well,

82
00:04:40,170 --> 00:04:44,453
to also remove them there as well, in all these places.

83
00:04:46,880 --> 00:04:50,330
And with that, we should still be able to navigate around,

84
00:04:50,330 --> 00:04:55,330
still log out successfully without errors and log back in.

85
00:04:55,770 --> 00:05:00,093
And still create a new post, This works,

86
00:05:01,020 --> 00:05:02,670
that also works.

87
00:05:02,670 --> 00:05:04,210
And with that,

88
00:05:04,210 --> 00:05:08,790
we are ensuring that we now also do provide the CSRF token

89
00:05:08,790 --> 00:05:10,393
in a more convenient way.

90
00:05:11,320 --> 00:05:14,280
And that was a lot of refactoring.

91
00:05:14,280 --> 00:05:16,870
Now, you can always do more.

92
00:05:16,870 --> 00:05:18,320
You can do more.

93
00:05:18,320 --> 00:05:20,470
You can refactor more,

94
00:05:20,470 --> 00:05:22,650
and definitely feel free to explore

95
00:05:22,650 --> 00:05:26,260
other possible optimizations that come to your mind.

96
00:05:26,260 --> 00:05:27,640
Play around with the code.

97
00:05:27,640 --> 00:05:30,090
That's the best practice of all.

98
00:05:30,090 --> 00:05:33,070
Here in this demo project, we're basically done.

99
00:05:33,070 --> 00:05:35,900
Though, of course, the auth routes are totally

100
00:05:35,900 --> 00:05:37,760
not refactored.

101
00:05:37,760 --> 00:05:40,250
We're not using the MVC pattern here.

102
00:05:40,250 --> 00:05:42,740
We didn't refactor anything.

103
00:05:42,740 --> 00:05:46,270
And that is simply a good practice for you.

104
00:05:46,270 --> 00:05:50,460
Try refactoring the auth routes here,

105
00:05:50,460 --> 00:05:53,410
as you'll learn it with the tools you'll learned it.

106
00:05:53,410 --> 00:05:56,660
And of course there won't be a single right solution,

107
00:05:56,660 --> 00:06:00,220
but definitely try applying the MVC pattern.

108
00:06:00,220 --> 00:06:02,420
See how you could apply this here,

109
00:06:02,420 --> 00:06:05,350
and see how you could refactor this to make the

110
00:06:05,350 --> 00:06:07,070
routes file slimmer,

111
00:06:07,070 --> 00:06:10,230
and to implement the MVC pattern.

112
00:06:10,230 --> 00:06:11,430
In the next lecture,

113
00:06:11,430 --> 00:06:15,350
I'll come back to you with my already refactored code,

114
00:06:15,350 --> 00:06:18,630
and I'll walk you through the refactorings I did there,

115
00:06:18,630 --> 00:06:20,083
and why I did them.