"UX Basics" was retired on August 31, 2018. You are now viewing the recommended replacement.
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 Practice ExpressJS: Middleware!
You have completed Practice ExpressJS: Middleware!
Preview
This video introduces our middleware challenge.
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
[MUSIC]
0:00
Hello, everyone.
0:09
Travis here with another practice session.
0:10
Today we'll delve into the world
of middleware and ExpressJS.
0:13
Middleware are simply functions that
get run in between the user sending
0:17
a request and
the server sending back a response.
0:21
They have access to the request and
response objects, meaning we can
0:24
modify them to fit our needs, and they can
either end the request response cycle or
0:28
call the next middleware
function in the stack.
0:33
In this exercise,
we'll create a middleware function to
0:36
replicate user authentication to
allow access to protected routes.
0:39
Let's get started.
0:44
Go ahead and
download the project files and
0:45
open them in your preferred text editor.
0:48
Let's take a look at package.json first.
0:50
We currently have two dependencies in
this project, express and nodemon.
0:54
I've included nodemon so that we don't
have to stop and restart our express
0:59
server every time we make a change,
we'll just need to refresh the browser.
1:03
Let's install these dependencies.
1:07
Open up your terminal.
1:09
If you're using VS Code,
you can go to Terminal,
1:11
New Terminal, or you can click
this toggle button up here, or
1:14
my preferred way of using
the keyboard shortcut CTRL+'.
1:17
If you're using a different terminal, be
sure you're at the root of this directory.
1:21
Now let's run npm i.
1:25
I short for install and this will install
all of our dependencies needed to run
1:27
this project, let's start
the server by running npm start.
1:32
I'm going to close the terminal for
more space but I'd recommend leaving
1:36
yours open to see if any errors happen
while you're working on this exercise.
1:40
Let's look at the data.json file.
1:45
This will replicate our database.
1:48
Inside is an object with
a property named users.
1:50
Users value is an array of
objects with names and emails.
1:54
Please feel free to add your own name and
1:58
email to the array to test with and
save the file.
2:01
All right, let's check out app.js.
2:04
We can see I've already got a basic server
set up and it's running on port 3000.
2:07
Here we have four routes.
2:10
The home, or root route, has our homepage
header that will render in the browser.
2:13
There are also settings,
secret, and forbidden routes.
2:18
Our goal is to allow anyone
to access the homepage.
2:22
But only allow users who are in our
data.json file access to the settings and
2:26
secret roots.
2:31
If they try to access them
without authorization,
2:33
we need to redirect them
to the forbidden route.
2:36
Let's see these in the browser.
2:39
Head to localhost 3000, and
you should see our home page.
2:41
Now I'll request the settings page.
2:46
We can see here that our
username is currently undefined.
2:48
Saving the user's name will
be a part of the challenge.
2:52
Now I'll request the secret page, and
2:56
finally our forbidden route.
3:00
This is what we'll redirect users to if
they are not a user in our mock database.
3:04
All right, let's go back to the code and
open authuser.js.
3:10
This is where our challenge will start.
3:13
We'll first need to import our
users array from data.json.
3:17
I've provided comments and
hints here to help you along the way.
3:21
Please keep in mind this is not
a typical or recommended approach for
3:24
user authentication in the real world.
3:28
This is just a simple way we can mimic
it for our middleware practices sake.
3:30
Once you're ready to
start testing your work,
3:35
we'll need to complete
a few steps in app.js.
3:38
You'll need to import
your new function and
3:41
place it as the first middleware
in our settings and secret routes.
3:43
To send our username for authentication,
3:46
we'll need to append a URL query
parameter when requesting these routes.
3:49
Line 8 has an example of this for
you to reference.
3:54
Directly after our route name, we add
a question mark to start our query string
3:57
and pass additional data to the server.
4:01
We're giving the parameter a name or
key of username and a value of Brian.
4:03
This is where you can type your own
name that you added to data.JSON.
4:07
Let's see a preview of how it should work
once the exercise has been completed.
4:12
From the homepage, I'll request
the secret page with no query parameter.
4:17
You can see we're immediately
redirected to the forbidden page.
4:22
I'll try again, but with a username that
does not exist in our mock database.
4:25
Now we're getting the message I provided
to let them know they sent an incorrect
4:31
username.
4:35
Finally, I'll go to the settings
page with the correct username.
4:35
It has rendered the page for us, and
my username has been added to the heading.
4:39
Nice, okay, I think you've got
everything you need to succeed so
4:43
good luck and have fun.
4:48
In the next video I'll
show you my solution.
4:50
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