Cors error when trying to PATCH user profile

Help
1

I did put a couple hours into trying to figure this out, but I’m lost.

I’m getting the following error when trying to update an Auth0 user using the API. Doing the same PATCH request with Postman using the same values works like a charm.

Access to fetch at ‘https://chequemate.us.auth0.com/api/v2/users/auth0|5f6ec6f68ee071006fb063b4’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I have my Single Page application (React v16.13.1) and an API Explorer Application (which is what’s connected to the Auth Management API). My backend is Express v4.16.1 which is using middleware of “cors”: “^2.8.5”

In React I’m getting my Token by posting to the url “https://chequemate.us.auth0.com/oauth/token” with “client_id”, “client_secret”, and “audience” values set from the API Explorer application and also including “grant_type”: “client_credentials”.

This gets me a token that I can successfully use in Postman when I try to update the api at the url https://chequemate.us.auth0.com/api/v2/users/${user.auth0_id}. The options on this fetch request are:

method: ‘PATCH’,
headers: {‘content-type’: ‘application/json’, authorization: Bearer ${token_from_above}, ‘cache-control’: ‘no-cache’},
body: { “name”: user.name, “picture”: user.picture }

(I’ve tried passing the body as a string, and wrapped in JSON.stringify() but that didn’t change anything)

I put these same values into Postman and I can successfully update the user picture. However, in my Single Page app I cannot.

My Single Page app uses class components and is enclosed within the withAuth0(App) wrapper, like so:

<Auth0Provider
    domain={process.env.REACT_APP_AUTH0_DOMAIN} // these are values from Single Page app
    clientId={process.env.REACT_APP_AUTH0_CLIENT_ID} // these are not from API Explorer Application
    audience={process.env.REACT_APP_AUDIENCE} // could that be part of the issue?
    redirectUri={process.env.REACT_APP_REDIRECT_URI}> // i don't understand the various environments
    <React.StrictMode>
        <App />
    </React.StrictMode>
</Auth0Provider>

Thanks for any advice and suggestions. Happy to provide more details if needed.

Much obliged

3

Hi @ryanbuckleyca

You shouldn’t be doing this. Any user with access to your application can grab your credentials and can make calls to the management API.

Here is more on using the management API in a SPA:

In short, you should be making these calls from your secure backend.

4

I understand, thank you. However, I’m still having a similar issue even when calling the PATCH update from the backend instead. The token I’m getting back is not valid. For example, when I get my token manually from the Auth Management API’s API Explorer, and simply paste that into my code below, it works. But when I generate the token using the following, it gives me an authorization error.

I’ve tried using the axios version of the token request using headers: {‘content-type’: ‘application/x-www-form-urlencoded’}, it also says there is an authentication error.

const updateAuthUser = (user) => {
var request = require(“request”);

var options = {
method: ‘POST’,
url: ‘https://chequemate.us.auth0.com/oauth/token’,
headers: { ‘content-type’: ‘application/json’ },
body: {"client_id":"${process.env.AUTH0_MGMT_API_CLIENT_ID}","client_secret":"${process.env.AUTH0_MGMT_API_CLIENT_SECRET}","audience":"${process.env.AUTH0_MGMT_API_AUDIENCE","grant_type":"client_credentials"}
};

request(options, function (err, res, body) {
if (err) throw new Error(err);

const token = body.access_token

var options = {
  method: 'PATCH',
  url: `https://chequemate.us.auth0.com/api/v2/users/${user.auth0_id}`,
  headers: {'content-type': 'application/json', authorization: `Bearer ${token}`, 'cache-control': 'no-cache'},
  body: `{"name":"${user.name}","picture":"${user.picture}"}`
};
request(options, function (err, res, body) {
  if (err) throw new Error(err);
  return body
})

})
}

(apologies, but the code markdown doesn’t seem to be working here)

5

Okay, so I figured it out with a bit of taking from here and there.

The first thing is my code above was returning data that was in a different format than what the axios request returns. Having that format difference, combined with using the header content type of ‘application/json’ was enough to resolve the problem for me.

1 Like
6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.