How to Make Secure HTTP Requests with Vue and Express

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 :woman_technologist:t3:

Read on :hammer_and_wrench:

Let me know if you have any questions!

1 Like

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 (https://github.com/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