- Adding User Login 1:16
- Tracking Visits With Sessions and Cookies 2:22
- Working with Sessions in Express 3:28
- Review: Sessions, Cookies and Express 5 questions
- Adding Log In Routes 1:39
- Creating a Login Form With Pug (Jade) 2:48
- Authenticating the Username and Password 7:28
- Creating the Profile Route and Page 3:53
- Review: Login Routes 5 questions
Preview
Video Player
00:00
00:00
Creating the Profile Route and Page
3:53Create the user profile page using the Pug templating language.Add programming logic to password protect the profile page for unauthorized users, or show user information for the currently logged in user.
We've almost finished creating
the basic authentication system for
0:00
our bookworm site.
0:03
The only missing piece
is the profile page.
0:05
That's our only password
protected page on the site.
0:07
I'll start by creating the template for
the page.
0:10
I'll add a file named
profile.pug in the views folder.
0:14
And I'll add my template code.
0:22
I'm not going to type it out,
I'll just paste it in there.
0:23
You can find this code in the teacher's
notes if you want to copy and
0:26
paste it too.
0:28
The two important items in this template
are these placeholders, name and favorite.
0:29
These are variable placeholders that,
when the template is rendered,
0:36
will be filled with the users name and
their favorite book.
0:39
To wire this template up to our app,
0:42
we need to add one more route to the
index.js file inside the routes directory.
0:45
Let's add a basic GIT route.
0:53
Remember, in the last video when a user
successfully logs in their user ID,
1:01
that's the idea used in Mongo
to identify a single document,
1:06
is stored as a session variable.
1:10
In other words,
1:12
if there is no user ID in the session,
then the user can't be locked in.
1:12
We can check for that case first.
1:17
So here I'm just looking to see if
the user ID session variable exists.
1:25
If it doesn't,
1:31
we'll spit out a message that says you
are not authorized to view this page.
1:32
We'll also send out an error
status code of 403,
1:35
that means forbidden, basically the page
is off limits unless you're logged in.
1:40
Remember that a session is a property of
the request object, and individual pieces
1:46
of data that you store in there are
properties on the session, req.session.
1:51
Now what to do if the user ID's
session variable is in place.
1:58
In this case, we can retrieve the user ID
from the session store and execute a query
2:02
against the Mongo database, retrieving
the user's information from Mongo.
2:06
I'll add a basic error check in
case the query doesn't work.
2:16
However, if there's no error,
we can render the profile template.
2:23
Passing a title, The user's name,
2:32
And the user's favorite book.
2:41
Remember, user.name is data that
comes from the Mongo database,
2:46
user.favoriteBook is the same.
2:50
Here, name is a variable that we're
using to send to our template.
2:54
So in other words,
2:58
we're sending the user name from the
database in a variable to the template.
2:58
Let's see how it works.
3:04
I'll save this page and
switch over to the terminal.
3:05
Well I've already got nodemon running,
so I don't need to start it again.
3:08
I'll switch to my browser and
go to a local host 3000 and log in.
3:12
Sure enough, there's my name and
my favorite book, it works!
3:17
Now we've written a lot of
code in this course so far,
3:21
and we have a basic user
authentication system in place.
3:23
There are a few things
we can do to improve it.
3:27
For one,
we haven't added a logout feature.
3:29
In addition,
the navigation bar could use some help.
3:33
For example, when you're logged in,
this login button here should say log out.
3:35
Likewise, we're already signed up, so
we shouldn't see the sign up link again.
3:40
In the next section of this course,
I'll show you how to add these features,
3:45
as well as teach you how to write your
own middleware for this application.
3:49
See you there.
3:52