Learn how to build a secure Express API from scratch and then update an existing Vue.js application to make external API calls to your Express API with a JWT.
Brought to you by @holly 
Let me know if you have any questions!
When I go to “http://localhost:8080/events/1”
I continue to get this error:
Failed to load resource: the server responded with a status of 400 ()
Hi Bashir! Does http://localhost:8080/event/1 work for you? That should take you to the event page on the Vue side. The URL http://localhost:8000/events/1 (note the different port number and plural events) should be the endpoint for the Express API. Let me know if that helps.
Thank you for your reply.
http://localhost:8080/event/1 has the same issue.
Here is a screenshot from http://localhost:8080/
Hmm are you able to sign in? And you filled out this information in server.js:
const authConfig = {
domain: "YOUR-DOMAIN",
audience: "YOUR-IDENTIFIER"
};
I think that might be an axios issue and I’d be happy to take a look at the code if you have it on GitHub or something.
You can also try to pull down the final code (GitHub - auth0-blog/vue-express-auth), fill in auth_config.json and server.js with your credentials, and see if it works there.
I pulled the final code and f auth_config.json and server.js with my credentials but I am still getting the same issues. Everything seems to mostly work.
Additionally, the “Login” & “Logout” buttons are not visible.
Hello and thank you for a useful series!
I have implemented the login system using oAuth like you mentioned, and have built a profile page using it. However, in my case i want the user to be able to store data from the front end (just a list of usernames) into a MongoDB, and when the user goes to the profile page, it displays all the usernames previously saved.
How do i go about this?
Hi, I;m having this issue and don’t know how to fix it. I’ve checked the tutorial many times for possible issues that I may have caused and am stuck.
Failed to compile.
./src/services/EventService.js
Module Error (from ./node_modules/eslint-loader/index.js):
error: ‘accessToken’ is defined but never used (no-unused-vars) at src\services\EventService.js:10:32:
8 | return res.data;
9 | },
10 | async getEventSingle(eventId, accessToken) {
| ^
11 | let res = await axios.get(“http://localhost:8000/events/” + eventId, {
12 | headers: {
13 | Authorization: ‘Bearer ${accessToken}’
1 error found.
I know this thread is a bit old, but any help would be appreciated.
Hey @awang87! Sorry you’re having issues. Are you using backticks on line 13 there? It should look like this:
let res = await axios.get("http://localhost:8000/events/" + eventId, {
headers: {
Authorization: `Bearer ${accessToken}`
}
});
Let me know if that fixes it!
Yes I am using it. Did not resolve the problem.
After fixing a couple of things, I still have issues. Now I have this error from the command line. BTW I’m using Windows locally on my computer. UnauthorizedError: jwt malformed
@holly Hi I have 500Internal Server Error on postman but the authentification work fine.
Do you know why ?
Hi @sa.thierno! Is this happening for all requests? Or just the ones that require an access token? Also can you look at your terminal where the server is running and see if there’s any error message there when you make the Postman request?
Nice Explanation, I had done in one go. I just pause for misunderstanding in 2 places 1) Event List Component where the comment this comment above file confuses me for a while, Other one i dont remember now. Thanx for great explanation. Now I just want to figure out how to deploy this on heroku, netlify, vercel etc. Any suggestion for deployment on on this sites will be loved
This topic was automatically closed after 0 minutes. New replies are no longer allowed.
I was getting an error that jwt was not a function. Fixed it by using this
const { expressjwt: jwt } = require(“express-jwt”);
Also, can do this.
const jwt = require(“express-jwt”);
Then down below
const checkJwt = jwt.expressjwt({…