Vue Calling an API Quickstart - Error Unauthorised

[t.kirkpatrick]

I’ve been stuck on the following for a couple of days - going around in circles.

I’m trying to get the Vue/Auth0 quickstart working, as I need to be able to get custom attributes for a user from the Azure AD Enterprise connection.

Here is the quickstart in question: auth0-vue-samples/02-Calling-an-API at master · auth0-samples/auth0-vue-samples · GitHub

I have setup the connection:

{
  "domain": "XXXXXXXXXX.eu.auth0.com",
  "clientId": "XXXXXX",
  "authorizationParams": {
    "audience": "https://XXXXXXXXX.eu.auth0.com/api/v2/"
  }
}

I have setup an API that seems to work on the ‘Test’ Tab.

I have tried every combination of types of application, granting access to the scopes. The quickstart logs in successfully if I use an application with Token Endpoint Authentification Method set to None, but by using this I can’t pass client_credentials, therefore I’m unable to call the external API after login.

When using a machine-machine application (or any other combination that there could possibly be!), the error I receive is:

h0-spa-js.production.esm.js:1          POST https://XXXX.eu.auth0.com/oauth/token 401

auth0-spa-js.production.esm.js:1 Uncaught (in promise) Error: Unauthorized
    at O.method (auth0-spa-js.production.esm.js:1:9730)
    at async O (auth0-spa-js.production.esm.js:1:9383)
    at async ee._requestToken (auth0-spa-js.production.esm.js:1:38589)
    at async ee.handleRedirectCallback (auth0-spa-js.production.esm.js:1:31097)
    at async ne.__proxy (plugin.ts:165:7)
    at async ne.__checkSession (plugin.ts:139:13)

In the Auth0 logs, I get a Failed Exchange

{
  "date": "2023-02-13T15:46:24.561Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "XXXXXXX",
  "client_name": null,
  "ip": "XXXXXX",
  "user_agent": "Chrome 109.0.0 / Mac OS X 10.15.7",
  "details": {
    "code": "******************************************X"
  },
  "hostname": "XXXXXX.eu.auth0.com",

If I set to SPA and have None selected in the token endpoint, the application logs in successfully. When I click the ‘Call API’ button, I get the following error in my terminal:

Error: connect ECONNREFUSED ::1:3001

Can anybody help!?

[rueben.tiow]

Hi @t.kirkpatrick,

Welcome to the Auth0 Community!

I noticed that you are calling the Auth0 Management API in your app, but encountered the 401 Unauthorized error.

In this case, I recommend checking that the client_id and client_secret are correct, and match the M2M application on your tenant.

Let me also add that on the Test tab of your API settings, there is an option to copy a sample code and run it.

//Node.js example

var request = require("request");

var options = { method: 'POST',
  url: 'https://{your_domain}/oauth/token',
  headers: { 'content-type': 'application/json' },
  body: '{"client_id":"YOUR_CLIENT_ID","client_secret":"YOUR_CLIENT_SECRET","audience":"https://{YOUR_DOMAIN}/api/v2/","grant_type":"client_credentials"}' };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

Please let me know how this goes for you.

Thanks,
Rueben