CORs Error on API Call to Auth0

Extensions
1

Hi,

I’m getting an
AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK',...},
which is probably related to a CORS error on my request to my Auth0 API call.

I need to request my own API token from Auth0 in order to authenticate to my own database. However the CORS error below:

XMLHttpRequest at 'https://{tenant}.us.auth0.com/oauth/token' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

is what I get.

NOTE: I already added multiple URL links to my allow list including a lot of urls such as:
https://auth0.com/, https://auth0.com/, https://{tenant}/oauth/token, https://{tenant}.us.auth0.com/api/v2/ to the Allowlist for URL Fetching Domains and Allowlist panel Urls

My only thoughts on the points of error would be either on how my post request is defined, which I find hard to believe because I took it straight from the docs:

var axios = require("axios").default;

var options = {
  method: 'POST',
  url: 'https://{tenant}.com/oauth/token',
  headers: {'content-type': 'application/x-www-form-urlencoded'},
  data: new URLSearchParams({
    grant_type: 'client_credentials',
    client_id: 'YOUR_CLIENT_ID',
    client_secret: 'YOUR_CLIENT_SECRET',
    audience: 'YOUR_API_IDENTIFIER'
  })
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

Or something in my allowlist domains? … Maybe I’m missing a link to Auth0??

Can you please think of what I might be missing here?

2

This leaks your Auth0 client secret to anyone using the extension…

The remote server has set a header which disallows the access-control-allow-origin header being used in calls made to it.

This isn’t a “Twitch/Extension Configuration” problem.

It’s Auth0 blocking this request as it includes a disallowed header, in this case access-control-allow-origin is the conflicting header.

This is likely done to prevent you trying to generate a client_credentials token and leaking your client secret to the world

1 Like
3

Thats taken straight from their documentation. Thanks for the insight, I later figured that would be the problem too, however I wasn’t sure how to fix it. Thanks for the tip tho. Does the twitch extension add the access-control-allow-origin to all calls outgoing, and therefore being blocked by auth0?

However I fixed this by not going through Auth0.
I’m using passport now passport-http-bearer

4

As a followup,

What is the best way to hide the secrets in the extension? Using a file, then importing those secrets in?