Connect a Front-End to a Secure API using JWTs

Please, add instructions to run index.js/html on server. I could run API server and authentication server on separate ports but not sure how to run "index.html" on server. Thanks.

I got the answer:$ npm install http-server ( in the same directory as project is otherwise you have to browse the path) To run the server: $http-server ( by default it will execute on port 8080) then in the browser http://localhost:8080/index.html

Yes, you can use any regular web server to serve the index.html file. I personally use "serve" (also available on npm).

You make a HUGE jump here from working with an API in Postman, to hooking it up to a front end. You offer no explanation of how to get that all set up. Big oversight.

For those that want to do this... first grab the index.html file he's using in the video from his github account: https://raw.githubusercontent.com/joellord/egghead-auth-course/master/lesson7/end/index.html

Then create a separate express server file that serves the index.html file, something like this.

const express = require("express")
const bodyParser = require("body-parser")

const app = express()
const PORT = process.env.PORT || 4321

app.get("/", (req, res) => {
  res
    .status(200)
    .sendFile(__dirname + "/templates/index.html")
})


app.listen(PORT, () => {
  console.log(`Server is running on Port ${PORT}`)
})

Then add a new script to your package.json, something like:

"serve": "node frontendServer.js"

That should bridge the gap here,

You will then need to run both servers. One managing the index.html on the front end, and the other for the API.

Pretty shocking that they missed this out on paid for premium content.

You also need to set up serving of static files as an express middleware

app.use(express.static(__dirname + '/public')

AND you also need to have the UI-Updates file which is also on the github for this course.

Seriously guys... this is a disgrace. You're taking money off people for half finished courses. Sort it out. Quality control.

Also, the fetch request for logging in uses the wrong variable... uses AUTH_URL instead of API_URL ... means the frontend is currently fetching authorization from itself lol. Make sure its API_URL

Jason Watmore's blog has an article on how to use http-server to feed static pages:

http://jasonwatmore.com/post/2016/06/22/nodejs-setup-simple-http-server-local-web-server

If you haven't installed http-server, you can by: npm install -g http-server

Then, open command prompt on the project folder, and start the server with: http-server

Finally, use http://localhost:8080/index.html to access the page.

N.B: Make sure to read the port that is supplied in the command prompt when the server starts. This is displayed under Available on:

With the jump from setting up the backend only and testing with Postman to having a frontend hooked up make this lesson and tutorial a bit useless.. Even with the comments above giving insight in how to bring up and serve the index.html page the instructor should put this in the tut. I downloaded the code from the github repo's 'start' folder and cannot launch the code via node at all. @Joel's comment from a month ago is too vague to understand how to hook up the front end to the backend and it feels like a massive leap from the previous lesson to the current code in this lesson. Why are good JWT tuts so hard to find. :(

Unfortunately, I think this was more of a promotional video to promote Auth0 than to properly illustrate how to do it without a framework etc... as was claimed in the beginning. From what I understand, we have 3 things: Auth Server, Resource Server, and Client.

Auth Server is the example in one of the videos that had the "/login" example that used the "jwt.sign(...)" to sign a jwt token.

Resource Server is the example that used the "/resource" route to serve the data etc...

Client which he did not show is to run the html. If you're using VS Code you can use the live server to run that which will probably run on port 5500 by default. This way you won't have to setup a third server if you're not interested in doing that to run the example.

This lesson isn't too hard to follow if you have the basic concepts of JWT down. Installing Visual Studio Code and using live server is a quick way to host the static file.

He wasn't organized, he jumped around from server to server without letting viewers know. I had an idea of what he was doing from my spring/java background. Anyhow, if you're interested in the cleaned up version of the code I'll share it with you. I have it somewhere on my system and I'll dig it up if you'd like to see a functioning version of it.

why running API_URL and AUTH URL on different ports? In the previous lessons they were all runnig on same port.

The API server and the Auth server should both be running at the same time. Hence, they have to run on different ports in order to work simultaneously.

@Joel Lord please can you address the comments on the missing tutorial context? You seem to have skipped over those