401 Unauthorized error when calling API

Help
1

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

2

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:

3

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

4

Was there any update on this? As Iā€™m experiencing the same issue and have not been able to get my .NET Core API to successfully accept the access token.

5

Hi,
I think Iā€™m facing a similar issue ā€¦

Iā€™m following the Vue.js Auth0 Quickstart example:

Auth0 Vue SDK Quickstarts: Login

and Iā€™ve arrived at the ā€˜Checkpointā€™:

Try running the application at this point. Provided you have configured your Auth0
credentials correctly, you should be redirected to the Auth0 Universal
Login page, and back to your app against once you have logged in.

When I look at the login history of the user Iā€™m trying to login as, I see:

[Success Login]

But in the debug output of the Vue.js app in my browser, I see the following error message:

Failed to load resource: the server responded with a status of 401 ()
Response:
{ā€œerrorā€:ā€œaccess_deniedā€,ā€œerror_descriptionā€:ā€œUnauthorizedā€}

Did something change, or am I missing anything obvious?

Thx,
Gioti

6

Fyi, I got passed the above 401 unauthorized error message by configuring the following setting:

Auth0 >> Applications >> Application Properties >> Application Type == Singe Page Application

2 Likes
7

solution of @giotis works for me. After checking everything regarding CORS urls, callback urls but still got issue. This configure save me a day :smiley: . I checked and realized that I choose a wrong applications. I have a list of 9 applications in the Auth0. It should be Single Page Application instead of Machine to Machine. Thanks so much @giotis

1 Like
8

Perfect! Glad to hear that!