401 Unauthorized error when calling API

Using free version of auth0 for the moment;

I have created a .NET Core 3.0 web API and also created this API in my Dashboard; also Enabled RBAC and Add Permissions in the Access Token

So if I go to postman and make a post request to https://MYDOMAIN.eu.auth0.com/oauth/token

in the request I have this headers:

grant_type:client_credentials
client_id:MYCLIENTID
client_secret:MYSECRET
audience:MYAUDIENCE

So I make this request and get a token. With this token I call a POST method in my API and all is good.

The problem is when I request tokens from my Vue JS app. I have followed the examples in the docs (based on auth0-spa-js) to get the tokens;

I hav tried 2 ways of calling my API:

//method 1
const claims = await this.$auth.getIdTokenClaims();
const id_token = claims.__raw;

//method2
const token = await this.$auth.getTokenSilently();

const apiHeaders = {
        'Content-Type': 'application/json',
        'Authorization': "Bearer " + id_token //also tried method2 token
      }
this.$http.post(ApiBaseUrl,MyJSON,apiHeaders)

The response is always 401 Unauthorized. Also if I copy this token in postman, I get 401.

Even tried manually adding the API access to the user from my dashboard, but I get the same 401.

Is there anything else I need to configure. Seems like the token I get in my Vue JS app is not valid for my API

Hi @kunalvm

To call your API you should use the access_token instead of the id_token. Please check the Vue.js quickstart demonstrating this:

In the example you mention, the method2 in my Code is used

//method2
const token = await this.$auth.getTokenSilently();

I already tried that. Am I missing something else?

There must be something else that can affect the access to the api