Auth0 access token to API works in postman but not when calling from Vue

0
votes

I have 2 items set up in Auth0:

  1. Application - Single Page Application
  2. API - Custom API, machine to machine

I've followed the instruction in the link below to call the custom API:

https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api

I've downloaded the sample with settings configured for both items mentioned above. The Vue app are able to log in correctly, and are able to call the external API by using the downloaded example codes (the external API, "backend", in the example code was written in Node JS).

However, when I change the backend to my Laravel/Lumen app which already set up for item no.2 (custom API), the Vue app received 401 unauthorized error. So, I copied the access token retrieved through Vue:

const accessToken = await this.$auth.getTokenSilently();

console.log(accessToken);

And try to call the Lumen backend with this access token - and it works perfectly fine! Is there a setting somewhere that I might've missed to enable Vue & Lumen to work with Auth0?

p/s: The custom Lumen API was made following the instruction from:

https://auth0.com/blog/developing-restful-apis-with-lumen/

1
vue.jslumenauth0
Is the laravel app registered and allowed access to the API in the auth0 dashboard? If you go to the api in the dash and see M2M connections you should be able to toggle the apps. – Dan Woda
Already did as I set the lumen app to the API registered in Auth0. However, after further investigation, I found out that the Vue app is not sending the Authorization header to the lumen app. It's weird because the same Vue code worked fine with express js backend. So I guess it's not an issue with Auth0. Thanks – Osh Mansor

1 Answers

0
votes

Ok it turns out I made a mistake in the axios part of the sample code. The sample is using get, while my API is using post. So I ended up sending the header in the wrong axios parameter. Hope this helps someone that encountered the same problem.