1
00:00:00,279 --> 00:00:04,333
We've included various third party
middleware in our application like

2
00:00:04,333 --> 00:00:06,332
Body Parser and Express Sessions.

3
00:00:06,332 --> 00:00:09,897
The cool thing is you don't need to
just rely on someone else to create

4
00:00:09,897 --> 00:00:12,240
the functionality your application needs.

5
00:00:12,240 --> 00:00:15,603
You can write your own
middleware to extend Express and

6
00:00:15,603 --> 00:00:18,392
in this,
in the next video we'll do just that.

7
00:00:18,392 --> 00:00:20,746
We'll create two pieces of middleware.

8
00:00:20,746 --> 00:00:24,308
One that will present an error
to users who aren't logged in.

9
00:00:24,308 --> 00:00:29,065
This will let us easily password protect
any page on our site with a simple call to

10
00:00:29,065 --> 00:00:30,132
the middleware.

11
00:00:30,132 --> 00:00:33,812
The second middleware function will be for
users who are logged in but

12
00:00:33,812 --> 00:00:38,190
are visiting pages that aren't for them
like the register page, the logon form or

13
00:00:38,190 --> 00:00:42,146
perhaps some promotional marketing
page targeted to just new visitors.

14
00:00:42,146 --> 00:00:44,467
In this video,
we'll tackle that last function first.

15
00:00:44,467 --> 00:00:50,326
Currently the /login route is
a form that's visible to anyone,

16
00:00:50,326 --> 00:00:53,000
including logged in people.

17
00:00:53,000 --> 00:00:58,044
See, I'm logged in now and if I go
to /login, I can see the form again.

18
00:00:58,044 --> 00:01:03,008
The same is true for the sign up form.

19
00:01:03,008 --> 00:01:07,904
While this isn't a huge deal, it would
be nice to only let non logged in users

20
00:01:07,904 --> 00:01:12,878
see that form and simply redirect logged
in users who accidentally visit this

21
00:01:12,878 --> 00:01:16,882
page to somewhere more appropriate
like their profile page.

22
00:01:16,882 --> 00:01:19,654
We can do that with our
own custom middleware.

23
00:01:19,654 --> 00:01:22,634
In my text editor, I'll open the project.

24
00:01:22,634 --> 00:01:27,533
It's common to keep your middleware code
outside of the main application in one or

25
00:01:27,533 --> 00:01:29,596
more separate JavaScript files.

26
00:01:29,596 --> 00:01:33,784
I'll create a directory named middleware.

27
00:01:37,162 --> 00:01:42,766
And in it, I'll add a file named index.js.

28
00:01:42,766 --> 00:01:45,780
I'll add all my middleware code here.

29
00:01:45,780 --> 00:01:49,546
I'm gonna call this function logged out.

30
00:01:49,546 --> 00:01:53,500
It will prevent logged in
users from accessing a route.

31
00:01:53,500 --> 00:01:59,735
Middleware functions have access to
the three parameters we've discussed,

32
00:01:59,735 --> 00:02:04,938
the request object,
the response object and the next function.

33
00:02:04,938 --> 00:02:09,633
The session middleware makes a session
object available through the request

34
00:02:09,633 --> 00:02:10,216
object.

35
00:02:10,216 --> 00:02:13,905
So in this function, we can check for
a session and a user ID value.

36
00:02:21,778 --> 00:02:26,804
If both of these are true that means
the user is logged in to the site.

37
00:02:26,804 --> 00:02:30,230
And if the user is logged in,
we'll send them to their profile page.

38
00:02:34,942 --> 00:02:39,226
In other words, we can call this
middleware on any route that we don't want

39
00:02:39,226 --> 00:02:42,016
an authorized user to see
like a marketing page.

40
00:02:42,016 --> 00:02:45,173
However, if the user is not logged in,

41
00:02:45,173 --> 00:02:50,930
we just pass execution to the next
piece of middleware by calling next.

42
00:02:50,930 --> 00:02:55,974
In other words, if the visitor is not
logged in this function won't do anything.

43
00:02:55,974 --> 00:03:00,294
Now in order to use this middleware in
our application we have to export it.

44
00:03:00,294 --> 00:03:07,716
So at the bottom of this file,
We export the function.

45
00:03:07,716 --> 00:03:11,191
Because this is router middleware,
we need to require it and

46
00:03:11,191 --> 00:03:13,450
use it in the file defining our routes.

47
00:03:13,450 --> 00:03:17,865
I'll open the index .js file
inside the route’s directory.

48
00:03:19,692 --> 00:03:24,768
And then I'll require our middleware,
Because this

49
00:03:24,768 --> 00:03:30,368
route's file is in the route’s directory,
I need to use dot dot slash to move up and

50
00:03:30,368 --> 00:03:34,702
out of the route folder,
then identify the middleware folder.

51
00:03:34,702 --> 00:03:38,935
Requiring a directory by name
like this tells Express to load

52
00:03:38,935 --> 00:03:41,680
the index.js file in that directory.

53
00:03:41,680 --> 00:03:45,100
Now to add our middleware,
we pass it into a route.

54
00:03:45,100 --> 00:03:49,288
You can do so
by referencing it with mid.logged out.

55
00:03:49,288 --> 00:03:54,780
First, let's only show the registration
form if the visitor is not logged in.

56
00:03:54,780 --> 00:03:57,932
I’ll addf the middleware inside
the get route for register.

57
00:04:05,832 --> 00:04:10,370
You'll see that I literally place
this in the middle of the route.

58
00:04:10,370 --> 00:04:12,500
It really is middleware.

59
00:04:12,500 --> 00:04:15,318
I'll do the same for
the route that displays the login form.

60
00:04:20,274 --> 00:04:21,708
Let's see how this works.

61
00:04:21,708 --> 00:04:24,608
I'll save these files and
switch to my browser.

62
00:04:24,608 --> 00:04:27,930
I have nodemon running, so
the changes I made are active.

63
00:04:27,930 --> 00:04:30,149
I'm not currently logged in,
so I'll do that first.

64
00:04:33,370 --> 00:04:37,040
Then, I'll go to /login.

65
00:04:37,040 --> 00:04:39,948
This normally displays the log in form but
not for me.

66
00:04:39,948 --> 00:04:43,100
It directs me, a logged in user,
to my profile.

67
00:04:43,100 --> 00:04:47,110
You can see the same is true
if I visit the register route.

68
00:04:49,180 --> 00:04:51,230
See how easy it was to use our middleware?

69
00:04:51,230 --> 00:04:55,448
Just plop it down in a route and
it runs when that route is called.

70
00:04:55,448 --> 00:04:58,749
In the next video we'll create
a more useful piece of middleware.

71
00:04:58,749 --> 00:05:01,048
I'll call it requires login.

72
00:05:01,048 --> 00:05:04,491
It will determine if the user
is logged in by checking for

73
00:05:04,491 --> 00:05:06,628
a session with a user ID property.

74
00:05:06,628 --> 00:05:10,428
If they are logged in, then they just
continue on to the next piece of

75
00:05:10,428 --> 00:05:15,174
middleware and eventually to wherever that
route leads like the user profile page.

76
00:05:15,174 --> 00:05:17,421
However, if the user isn't logged in,

77
00:05:17,421 --> 00:05:21,794
it will spit out an error saying that the
user must be logged in to view the page.

78
00:05:21,794 --> 00:05:26,082
And I've already shown you the basics
you need to write and use middleware.

79
00:05:26,082 --> 00:05:30,036
Before you watch the next video,
I recommend that you try to create

80
00:05:30,036 --> 00:05:33,152
the requires login middleware
function yourself.

81
00:05:33,152 --> 00:05:37,311
Add the code to the index.js file
inside the middleware folder.

82
00:05:37,311 --> 00:05:42,702
Then use that middleware in the GET
request for the /profile route.

83
00:05:42,702 --> 00:05:43,868
See if you can do it.

84
00:05:43,868 --> 00:05:45,036
If not, no worries.

85
00:05:45,036 --> 00:05:47,004
I'll show you how to do
it in the next video.

86
00:05:47,004 --> 00:05:47,950
See you there.