developers

Introducing the Brand-New Auth0 Vue SDK

Learn about the essential features of the Auth0 Vue SDK and how it helps developers secure Vue 3 apps.

Steve Hobbs

Developer Experience Engineer

Mar 17, 2022 • 4 min read

Today, we are announcing the release of the Auth0 Vue SDK, a new SDK that makes it easy to integrate Auth0 with any Vue 3 apps. This new SDK only supports Vue 3 apps. To secure Vue 2 (Vue.js) apps, developers can use the Auth0 SPA SDK instead.

Vue.js is a progressive JavaScript framework designed for building user interfaces using HTML, JavaScript, and CSS. It makes building apps for the modern web easy while providing developers with a lot of flexibility.

The Auth0 Developer Experience team designed the new Auth0 Vue SDK to follow idiomatic patterns that are familiar to Vue developers. The Vue SDK abstracts the features of the Auth0 SPA SDK into a Vue plugin that developers can consume in Vue 3 components either using the Options API or the new Composition API.

Starting today, Vue developers can:

Auth0 Vue SDK Features

This new Auth0 Vue SDK arrives at a great time as Evan You announced on February 7th, 2020, that Vue 3 is now the default version of Vue. As such, the Auth0 Vue SDK fully supports Vue 3 along with the Options API and the Composition API. The SDK also provides full TypeScript support.

Here’s a breakdown of the essential features that developers can enjoy when using the new Auth0 Vue SDK:

  • Quick implementation of login and logout functionality into Vue 3 apps using the Auth0 Universal Login page.
  • Easy access to profile information about the logged-in user.
  • Availability of access tokens to retrieve protected user data from an external API.
  • Simple mechanism to protect Vue 3 routes using a router guard from the SDK with the Vue Router.

Vue 2 Auth0 SDK Support

The new Auth0 Vue SDK only works with Vue 3. If you’re working on an app that uses Vue 2, you can use the Auth0 SPA SDK instead to implement authentication in your application.

To see the integration of Vue.js (Vue 2) with the Auth0 SPA SDK in action, take a look at the "Vue.js/JavaScript Authentication" code sample from the Auth0 Developer Hub!

Integrate Auth0 Vue into Your Vue 3 Application

You can quickly integrate the Auth0 Vue SDK with your Vue 3 application by following a few steps.

If you don’t already have an Auth0 application to work with, create a Single Page Application in your Auth0 Dashboard and configure the following URLs for your application under Application URLs:

  • Allowed Callback URLs: 
    http://localhost:8080
  • Allowed Logout URLs: 
    http://localhost:8080
  • Allowed Web Origins: 
    http://localhost:8080

You can replace 

http://localhost:8080
with the root URL of your application.

Take note of the Client ID and Domain, as you will need those in the next step.

Install the Auth0 Vue SDK from npm:

npm install @auth0/auth0-vue

Import the Vue plugin and use the 

createAuth0
function to register it with your Vue 3 app:

import { createAuth0 } from '@auth0/auth0-vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: '<YOUR AUTH0 DOMAIN>',
    client_id: '<YOUR AUTH0 CLIENT ID>',
    redirect_uri: window.location.origin,
  }),
);

app.mount('#app');

Replace the 

<YOUR AUTH0 DOMAIN>
and 
<YOUR AUTH0 CLIENT ID>
placeholders with the actual Client ID and Domain values you got from the Auth0 dashboard. Create a 
LoginButton.vue
component and use the Auth0 Vue SDK to log the user in. Here’s an example using a Single File Component and the Composition API:

// LoginButton.vue
<template>
  <button @click="login">Log in</button>
</template>

<script>
import { useAuth0 } from "@auth0/auth0-vue";

export default {
  setup() {
    const { loginWithRedirect } = useAuth0();

    return {
      login() {
        loginWithRedirect();
      },
    };
  },
};
</script>

If you prefer to use the Options API, the same thing can be achieved using the 

$auth0
accessor:

<template>
  <button @click="login">Log in</button>
</template>

<script>
export default {
  methods: {
    login() {
      this.$auth0.loginWithRedirect();
    },
  },
};
</script>

Add a 

LoginComponent
to your app, start it up, and click the button to see the magic of authentication!

Please check out the Quickstart for more things you can do with the SDK and the repository on GitHub for a more detailed description of the setup and usage of the SDK.

Enjoy!