Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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