Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed User Authentication With Express and Mongo!
You have completed User Authentication With Express and Mongo!
Preview
Learn how to use session variables to provide custom information for your site's users. Using session variables, you can identify and particular user and provide information tailored to their needs.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[SOUND] At this point,
we've added the most important
0:00
aspects of a user authentication
system to our project.
0:04
The user can sign up on the site, log in,
and visit pages that only they can view.
0:09
In this section of the course
we'll refine our application.
0:15
First we'll add logic to
our template files so
0:18
they display different information
based on a user's logon status.
0:20
We'll also add a log out feature so
a user can safely log out without
0:24
fear that someone might jump on
their computer and impersonate them.
0:28
I'll also show you how to write custom
middleware to add two simple methods
0:32
that'll let you control routes based
on whether a user is logged in or not.
0:36
And finally, I'll show you how to use
MongoDB to create a production ready
0:41
session storage system, one that can
handle thousands of simultaneous users.
0:44
Let's get started.
0:49
Our app currently creates
a session whenever a user logs in.
0:52
That session contains a user ID which
identifies a valid user in our system.
0:56
That's a really useful
piece of information.
1:01
We know that visitors who
haven't logged in won't
1:03
have a session ID with a user ID property,
and those who are logged in will.
1:06
With that basic distinction,
we can customize our app for each group.
1:11
For example,
1:15
we can show different content on pages
based on a visitor's logged in status.
1:16
In particular, we can change the Log
in button here, to say Log out for
1:21
users who've already logged in.
1:25
In addition, if you're logged in you
won't need this sign up link either.
1:28
So we can easily hide that.
1:32
Let me show you what our navigation
will look like once we're done.
1:34
Notice the Sign up and Log in buttons.
1:38
I'll log in and notice the change.
1:40
There's no Sign up button anymore,
and now it says Log out.
1:44
In fact clicking the Log out button now
leads to a different route, /logout.
1:48
And because we're logged
out the Sign up button and
1:53
the Log in button have returned.
1:56
Since the pug templating language
supports basic programming logic
1:58
we can easily add that
customization to our templates.
2:02
The first thing I need to do however
is make the session's user id value
2:06
available to our entire application.
2:10
To do that, I'll add some
programming to our main app.JS file.
2:13
Just below the spot where
I've added sessions,
2:18
I'll add another level of middleware.
2:22
This will make the user ID
available to our templates.
2:28
I'm typing res.locals.currentUser
= req.session.userId.
2:38
And then I called the next
piece of middleware.
2:44
The response object has
a property called locals.
2:47
locals provides a way for you to add
information to the response object.
2:51
Think of it as stuffing a custom
variable into the response.
2:56
In Express all of your views have
access to the response's locals object.
3:00
Here we store the user's ID
into a current user property.
3:05
Remember that req stands for
3:09
the request object and
res stands for the response object.
3:12
Sessions are attached
to the request object.
3:17
So we retrieve the user ID by accessing
the session on the request object.
3:20
If the user is logged in,
3:25
res.locals.currentUser will
hold the number, their user ID.
3:26
However if the visitor is not logged
in there will be no session and
3:33
no session ID.
3:36
So the value of current
user will be undefined.
3:37
Now all of the application's views
can access this current user value.
3:40
So I'm gonna save this file and then we'll
add a bit of logic to the navigation bar.
3:45
The navigation view is in
the Views folder in the navbar.
3:50
pug file.
3:54
I'll add a simple line of logic
3:55
to only show the Sign Up button
to those who are not logged in.
3:58
I'll add a blank line just above
the sign-up button column and
4:02
type if not currentUser.
4:06
In other words if there is not a value for
the current user property, for example,
4:09
it's undefined,
then show the code that follows.
4:13
Pug provides a very concise
way to write HTML markup.
4:17
But you need to pay attention
when adding logic like this.
4:21
Pug looks at indentation to
understand how the logic flows.
4:24
So I need to indent the line
directly below the if statement.
4:28
The Sign Up link.
4:32
If I don't then all of the other
buttons will also be hidden.
4:33
We can use if else logic to toggle
between a log out and login button.
4:38
I'll start by checking to see
if there is a currentUser value.
4:42
If so I'll add a div and a little image
4:46
and a button that takes these
into a slash log-out route.
5:02
Otherwise will show the Log in button
that leads to the /log in route.
5:12
We can see how this works by saving
this file and starting up the server.
5:20
I'll jump into my terminal,
and type Nodemon started up.
5:24
Then I'll visit local host 3000.
5:31
There is the Sign Up Link,
and the Log in button.
5:33
I'll log in and check it out.
5:37
The Sign up button's gone,
and now it says Log out.
5:42
I'll click it.
5:46
Hm, it doesn't work.
5:47
That's because it's leading to the /logout
route which we haven't yet created.
5:49
We'll do that in the next video.
5:54
But before we do that, take a minute to
imagine other ways you could customize
5:57
your applications by adding
logic to template files.
6:01
For example,
6:04
say you stored the date a user last
logged into the site in your database.
6:05
When the user logs back in you could
check the date of their last visit and
6:10
then let them know what's been added
to the site since they last visited or
6:13
you could add bonus content on pages
information that only logged in users
6:17
could see like discounts on your services
or import messages about their accounts.
6:21
Really the sky's the limit.
6:26
What would you wanna to add
to your own applications?
6:28
Give it some thought and
I'll see you in the next video.
6:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up