1
00:00:00,025 --> 00:00:04,684
[SOUND] At this point,
we've added the most important

2
00:00:04,684 --> 00:00:09,660
aspects of a user authentication
system to our project.

3
00:00:09,660 --> 00:00:15,140
The user can sign up on the site, log in,
and visit pages that only they can view.

4
00:00:15,140 --> 00:00:18,270
In this section of the course
we'll refine our application.

5
00:00:18,270 --> 00:00:20,750
First we'll add logic to
our template files so

6
00:00:20,750 --> 00:00:24,550
they display different information
based on a user's logon status.

7
00:00:24,550 --> 00:00:28,190
We'll also add a log out feature so
a user can safely log out without

8
00:00:28,190 --> 00:00:31,190
fear that someone might jump on
their computer and impersonate them.

9
00:00:32,390 --> 00:00:36,190
I'll also show you how to write custom
middleware to add two simple methods

10
00:00:36,190 --> 00:00:39,710
that'll let you control routes based
on whether a user is logged in or not.

11
00:00:41,150 --> 00:00:44,770
And finally, I'll show you how to use
MongoDB to create a production ready

12
00:00:44,770 --> 00:00:49,820
session storage system, one that can
handle thousands of simultaneous users.

13
00:00:49,820 --> 00:00:50,570
Let's get started.

14
00:00:52,230 --> 00:00:56,320
Our app currently creates
a session whenever a user logs in.

15
00:00:56,320 --> 00:01:01,160
That session contains a user ID which
identifies a valid user in our system.

16
00:01:01,160 --> 00:01:03,640
That's a really useful
piece of information.

17
00:01:03,640 --> 00:01:06,440
We know that visitors who
haven't logged in won't

18
00:01:06,440 --> 00:01:11,550
have a session ID with a user ID property,
and those who are logged in will.

19
00:01:11,550 --> 00:01:15,750
With that basic distinction,
we can customize our app for each group.

20
00:01:15,750 --> 00:01:16,400
For example,

21
00:01:16,400 --> 00:01:21,330
we can show different content on pages
based on a visitor's logged in status.

22
00:01:21,330 --> 00:01:25,930
In particular, we can change the Log
in button here, to say Log out for

23
00:01:25,930 --> 00:01:28,260
users who've already logged in.

24
00:01:28,260 --> 00:01:32,520
In addition, if you're logged in you
won't need this sign up link either.

25
00:01:32,520 --> 00:01:34,750
So we can easily hide that.

26
00:01:34,750 --> 00:01:38,480
Let me show you what our navigation
will look like once we're done.

27
00:01:38,480 --> 00:01:40,470
Notice the Sign up and Log in buttons.

28
00:01:40,470 --> 00:01:44,580
I'll log in and notice the change.

29
00:01:44,580 --> 00:01:48,580
There's no Sign up button anymore,
and now it says Log out.

30
00:01:48,580 --> 00:01:53,890
In fact clicking the Log out button now
leads to a different route, /logout.

31
00:01:53,890 --> 00:01:56,500
And because we're logged
out the Sign up button and

32
00:01:56,500 --> 00:01:58,680
the Log in button have returned.

33
00:01:58,680 --> 00:02:02,410
Since the pug templating language
supports basic programming logic

34
00:02:02,410 --> 00:02:05,320
we can easily add that
customization to our templates.

35
00:02:06,350 --> 00:02:10,740
The first thing I need to do however
is make the session's user id value

36
00:02:10,740 --> 00:02:13,530
available to our entire application.

37
00:02:13,530 --> 00:02:17,660
To do that, I'll add some
programming to our main app.JS file.

38
00:02:18,890 --> 00:02:21,290
Just below the spot where
I've added sessions,

39
00:02:22,910 --> 00:02:24,750
I'll add another level of middleware.

40
00:02:28,070 --> 00:02:30,992
This will make the user ID
available to our templates.

41
00:02:38,820 --> 00:02:44,820
I'm typing res.locals.currentUser
= req.session.userId.

42
00:02:44,820 --> 00:02:47,940
And then I called the next
piece of middleware.

43
00:02:47,940 --> 00:02:51,960
The response object has
a property called locals.

44
00:02:51,960 --> 00:02:55,550
locals provides a way for you to add
information to the response object.

45
00:02:56,690 --> 00:03:00,400
Think of it as stuffing a custom
variable into the response.

46
00:03:00,400 --> 00:03:04,860
In Express all of your views have
access to the response's locals object.

47
00:03:05,900 --> 00:03:09,888
Here we store the user's ID
into a current user property.

48
00:03:09,888 --> 00:03:12,500
Remember that req stands for

49
00:03:12,500 --> 00:03:17,110
the request object and
res stands for the response object.

50
00:03:17,110 --> 00:03:20,540
Sessions are attached
to the request object.

51
00:03:20,540 --> 00:03:25,380
So we retrieve the user ID by accessing
the session on the request object.

52
00:03:25,380 --> 00:03:26,722
If the user is logged in,

53
00:03:26,722 --> 00:03:33,020
res.locals.currentUser will
hold the number, their user ID.

54
00:03:33,020 --> 00:03:36,100
However if the visitor is not logged
in there will be no session and

55
00:03:36,100 --> 00:03:37,290
no session ID.

56
00:03:37,290 --> 00:03:40,690
So the value of current
user will be undefined.

57
00:03:40,690 --> 00:03:45,770
Now all of the application's views
can access this current user value.

58
00:03:45,770 --> 00:03:49,680
So I'm gonna save this file and then we'll
add a bit of logic to the navigation bar.

59
00:03:50,750 --> 00:03:54,320
The navigation view is in
the Views folder in the navbar.

60
00:03:54,320 --> 00:03:55,062
pug file.

61
00:03:55,062 --> 00:03:58,020
I'll add a simple line of logic

62
00:03:58,020 --> 00:04:01,140
to only show the Sign Up button
to those who are not logged in.

63
00:04:02,310 --> 00:04:06,420
I'll add a blank line just above
the sign-up button column and

64
00:04:06,420 --> 00:04:09,290
type if not currentUser.

65
00:04:09,290 --> 00:04:13,480
In other words if there is not a value for
the current user property, for example,

66
00:04:13,480 --> 00:04:17,410
it's undefined,
then show the code that follows.

67
00:04:17,410 --> 00:04:21,290
Pug provides a very concise
way to write HTML markup.

68
00:04:21,290 --> 00:04:24,530
But you need to pay attention
when adding logic like this.

69
00:04:24,530 --> 00:04:28,320
Pug looks at indentation to
understand how the logic flows.

70
00:04:28,320 --> 00:04:32,150
So I need to indent the line
directly below the if statement.

71
00:04:32,150 --> 00:04:33,400
The Sign Up link.

72
00:04:33,400 --> 00:04:36,720
If I don't then all of the other
buttons will also be hidden.

73
00:04:38,040 --> 00:04:42,580
We can use if else logic to toggle
between a log out and login button.

74
00:04:42,580 --> 00:04:46,430
I'll start by checking to see
if there is a currentUser value.

75
00:04:46,430 --> 00:04:52,260
If so I'll add a div and a little image

76
00:05:02,760 --> 00:05:06,810
and a button that takes these
into a slash log-out route.

77
00:05:12,170 --> 00:05:19,181
Otherwise will show the Log in button
that leads to the /log in route.

78
00:05:20,210 --> 00:05:24,910
We can see how this works by saving
this file and starting up the server.

79
00:05:24,910 --> 00:05:29,980
I'll jump into my terminal,
and type Nodemon started up.

80
00:05:31,360 --> 00:05:33,010
Then I'll visit local host 3000.

81
00:05:33,010 --> 00:05:36,840
There is the Sign Up Link,
and the Log in button.

82
00:05:37,930 --> 00:05:42,630
I'll log in and check it out.

83
00:05:42,630 --> 00:05:46,240
The Sign up button's gone,
and now it says Log out.

84
00:05:46,240 --> 00:05:47,710
I'll click it.

85
00:05:47,710 --> 00:05:49,650
Hm, it doesn't work.

86
00:05:49,650 --> 00:05:54,690
That's because it's leading to the /logout
route which we haven't yet created.

87
00:05:54,690 --> 00:05:56,170
We'll do that in the next video.

88
00:05:57,450 --> 00:06:01,450
But before we do that, take a minute to
imagine other ways you could customize

89
00:06:01,450 --> 00:06:04,740
your applications by adding
logic to template files.

90
00:06:04,740 --> 00:06:05,660
For example,

91
00:06:05,660 --> 00:06:10,050
say you stored the date a user last
logged into the site in your database.

92
00:06:10,050 --> 00:06:13,740
When the user logs back in you could
check the date of their last visit and

93
00:06:13,740 --> 00:06:17,950
then let them know what's been added
to the site since they last visited or

94
00:06:17,950 --> 00:06:21,950
you could add bonus content on pages
information that only logged in users

95
00:06:21,950 --> 00:06:26,740
could see like discounts on your services
or import messages about their accounts.

96
00:06:26,740 --> 00:06:28,390
Really the sky's the limit.

97
00:06:28,390 --> 00:06:30,830
What would you wanna to add
to your own applications?

98
00:06:30,830 --> 00:06:32,690
Give it some thought and
I'll see you in the next video.