Hi there,
I am building a SPA in Vue.js with auth0-spa-js.
Following this post, I created a feature to update user_metadata using the Management API.
<template>
<v-container>
<v-text-field v-model="telephone" name="telephone"></v-text-field>
<v-btn @click="patchUserData">
<strong>Update user_metadata</strong>
</v-btn>
</v-container>
</template>
<script>
export default {
data() {
return {
telephone: this.$auth.user["https://myapp.example.com/user_metadata"]["telephone"],
};
},
methods: {
async patchUserData() {
const differentAudienceOptions = {
audience: `https://${process.env.VUE_APP_AUTH0_DOMAIN}/api/v2/`,
scope: "update:current_user_metadata",
};
const token = await this.$auth.getTokenWithPopup(
differentAudienceOptions
);
const metadata = { telephone: this.telephone };
await axios.patch(
`https://${process.env.VUE_APP_AUTH0_DOMAIN}/api/v2/users/` +
this.$auth.user.sub,
{ user_metadata: metadata },
{ headers: { Authorization: `Bearer ${token}` } }
);
},
},
};
</script>
However, when I reload this page, the old information is displayed.
(I think I need to regenerate some tokens because the display changes when I log in again.)
Does using $auth.getTokenSilently() solve this problem?
I’m not use to Vue.js, so it would be great to get some sample code.