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