Vue: Calling an API
By Frederik Prijck
This quickstart demonstrates how to make calls to an external API from a Vue.JS application using Auth0. We recommend that you log in to follow this quickstart with examples configured for your account.
I want to integrate with my app
15 minutesI want to explore a sample app
2 minutesGet a sample configured with your account settings or check it out on Github.
Visit the Integrate Vue.js with an API Server section of the Vue.js Authentication By Example guide for a deep dive into calling a protected API from Vue. This guide allows you to set up a sample API server using a backend technology of your choice, effectively creating a full-stack application.
Create an API
In the APIs section of the Auth0 dashboard, click Create API. Provide a name and an identifier for your API. You will use the identifier later when you're configuring your Javascript Auth0 application instance. For Signing Algorithm, select RS256.
Configuring the plugin
To call an API, configure the plugin by setting the audience to the API Identifier of the API you want to call:
import { createAuth0 } from '@auth0/auth0-vue';
const app = createApp(App);
app.use(
createAuth0({
domain: "{yourDomain}",
clientId: "{yourClientId}",
authorizationParams: {
redirect_uri: window.location.origin,
audience: "{yourApiIdentifier}",
}
})
);
app.mount('#app');Was this helpful?
Retrieving an Access Token
With the plugin configured using an audience, Auth0 will return an Access Token that can be sent to your API.
You can retrieve an Access Token by using the getAccessTokenSilently function thats exposed by our SDK.
<script>
import { useAuth0 } from '@auth0/auth0-vue';
export default {
setup() {
const { getAccessTokenSilently } = useAuth0();
return {
doSomethingWithToken: async () => {
const token = await getAccessTokenSilently();
}
};
}
};
</script>Was this helpful?
Using the Options API
If you are using the Options API, you can use the same getAccessTokenSilently method from the global $auth0 property through the this accessor.
<script>
export default {
methods: {
async doSomethingWithToken() {
const token = await this.$auth0.getAccessTokenSilently();
}
}
};
</script>Was this helpful?
Calling an API
To call an API, include the token in the Authorization header of your request.
There are many ways to make HTTP calls with Vue. Here is an example using the fetch API with Vue's Composition API:
<script>
import { useAuth0 } from '@auth0/auth0-vue';
export default {
setup() {
const { getAccessTokenSilently } = useAuth0();
return {
doSomethingWithToken: async () => {
const token = await getAccessTokenSilently();
const response = await fetch('https://api.example.com/posts', {
headers: {
Authorization: 'Bearer ' + token
}
});
const data = await response.json();
}
};
}
};
</script>Was this helpful?