Calling PATCH method to edit User data/metadata always leads to a CORS error

Hi friends, sorry to bother again!

I’ve been trying to edit my user data/metadata by calling the Management API and using the PATCH method. As advised, the call is taking place through my Node backend, not my React front-end.

However, for every which-way I try to do this, I keep getting a CORS (Allowable origins) error when using PATCH/POST? I have properly setup my app and added my calling URL to Allowable Origins, CORS exemptions, etc. I have also tried using Axios and Fetch to make the call, but also to no avail. I believe I have things set up correctly in my app because I can do GET calls to the Management API just fine.

I’ve strictly followed the Auth0 tutorials on doing this. I’ve also searched through the forums to find ways that other users have supposedly solved this, and implemented their solutions. However, nothing is working, I cannot get rid of this CORS error. In addition, I’ve tried updating User data/metadata using the API explorer, but that also fails with an error of ‘incorrect body of request.’

Below is my code, has anyone in a similar situation been able to solve this?

const ChangeName = () => {
  const [newNickname, setNickname] = useState("null");

  const { user } = useAuth0();

  var getAccessToken = function (callback) {
    if (!"dev-7-8i89hb.us.auth0.com") {
      callback(
        new Error(
          "The AUTH0_DOMAIN is required in order to get an access token (verify your configuration)."
        )
      );
    }

    var options = {
      method: "POST",
      url: "https://dev-7-8i89hb.us.auth0.com/oauth/token",
      headers: {
        "content-type": "application/json",
      },
      body: {
        audience: "https://dev-7-8i89hb.us.auth0.com/api/v2/",
        grant_type: "client_credentials",
        client_id: "XXX_MY_CLIENT_ID",
        client_secret:
          "XXX_MY_CLIENT_SECRET",
      },
      json: true,
    };

    request(options, function (err, res, body) {
      if (err || res.statusCode < 200 || res.statusCode >= 300) {
        return callback((res && res.body) || err);
      }

      callback(null, body.access_token);
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    getAccessToken(function (err, accessToken) {
      if (err) {
        console.log("Error getting a token:", err.message || err);
        return;
      }

      console.log("Posting nickname");

      var management = new ManagementClient({
        token: accessToken,

        domain: "dev-7-8i89hb.us.auth0.com",
      });

      var params = { id: user.user_id };
      var data = { nickname: `'${newNickname}` };

      management.updateUser(params, data, function (err, user) {
        if (err) {
          console.log(err);
        }
        console.log(user)
       // Updated user.
      });
    });

    alert(
      'Thank you for submitting the form. You can always examine or edit it under the tab "My Profile"'
    );
      };


  return (
    <div id="container_Buy">
      <h2 class="Headline">Change Your Nickname:</h2>
        <form onSubmit={handleSubmit}>
        <ul class="flex-outer">
          <li>
            <label for="first-name">
              What would you like to change your new username to?
            </label>
            <input
              type="string"
              id="nickname"
              name="nickname"
              value={newNickname}
              onChange={(e) => setNickname(e.target.value)}
              required
            />
          </li>
        </ul>
      </form>
    </div>
  );
};

export default ChangeName;

Would appreciate any assistance on this matter.

Thank you and have a good day,

Rob

1 Like

Hello, just wanted to see if anyone else has experienced a CORS issue when trying to use the PATCH call to update user data? I suspect it may be something more than a CORS issue (maybe an Axios issue?), but I’m not sure…

I’ve been stuck on this for a few days now. I’ve tried using both the basic tutorial method as well as using updateUser method in the management client in node-auth0. I’ve ensured that the call is being made via an M2M token from my app’s backend. I confirmed this is being done correctly because GET calls to the management API from my Node back-end work just fine.

Note that making a PATCH call using the management API in the documentation via copying and pasting the token works OK for me. It also works fine for me if I make the PATCH call using curl in Postman.

I’ve ensured that the origin (http://localhost:3000/) and any possible branches have been added to the application’s allowable web origins and CORS websites. I’ve experimented with different ways of making my PATCH call, including adding additional CORS related headers and installing the CORS module on my backend as per external instructions, such as here and here.

Nothing works. The error messages that come back is always:

Access to XMLHttpRequest at 'https://dev-X-XXXXhb.us.auth0.com/api/v2/users/XXXXXX8c288f1a2a3' from origin 'http://localhost:3000' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.

Again, it could possibly be something other than CORS, but what? Can anyone please help? I’m happy to share the website where the app has been deployed as well as the HAR file.

Thank you,

R