Simple Auth0 wrapper for Vue.js based on the Auth0 Single Page App SDK

⚠️ Currently, only compatible with Vue 3. Support for Vue 2 is planned.

You need a Auth0 tenant and a configured Auth0 application. For information about how to create these, take a look at the official documentation.

npm install --save vue-auth0-plugin

To see some samples how to use the plugin, take a look into the samples folder in the project.

Register the plugin in your main.ts file. For a list of available options, take a look here: https://auth0.github.io/auth0-spa-js/interfaces/auth0clientoptions.html.

import { createApp } from 'vue';
import VueAuth0Plugin from 'vue-auth0-plugin';
import App from './App.vue';

const app = createApp(App);
app.use(VueAuth0Plugin, {
  domain: 'YOUR_AUTH0_DOMAIN',
  client_id: 'YOUR_CLIENT_ID',
  // ... other optional options ...
});
app.mount('#app');

Then Auth0 can be injected using the provided injectAuth function. For more information about provide/inject, take a look here https://v3.vuejs.org/guide/component-provide-inject.html. For example:

import { injectAuth } from 'vue-auth0-plugin'

const auth = injectAuth();

const authenticated = auth.authenticated;
const loading = auth.loading;
const user = auth.user;

if (!auth.authenticated) {
    auth.loginWithRedirect();
}

Auth0 can also be injected as ´auth´ using the Options API like the example below

<template>
  <div class="about">
    <h1>You are logged in as {{ auth.user.name }} ({{ auth.user.nickname }})</h1>
    <img :src="auth.user.picture" alt="Profile picture"/>
    <button v-on:click="auth.logout()">Logout</button>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { injectionToken } from 'vue-auth0-plugin'
@Options({
  inject: [injectionToken],
})
export default class MyComponent extends Vue {}
</script>

If you want to use the state of authentication when you do not have access to the Vue instance, you can use the exported AuthenticationState.

import { AuthenticationState } from 'vue-auth0-plugin';

if (!AuthenticationState.authenticated) {
    // do something here
}

If you want to use the properties provided by Auth0 when you do not have access to the Vue instance, you can use the exported AuthenticationProperties.

import { AuthenticationProperties as auth0 } from 'vue-auth0-plugin';

const token = auth0.getTokenSilently();

The plugin implements a Vue Router NavigationGuard to secure routes with Auth0. The example below shows how to use this AuthenticationGuard.

import { AuthenticationGuard } from 'vue-auth0-plugin';

let routes = [
    ...
    {
        path: '/private',
        name: 'PrivateRoute',
        component: () => import(/* webpackChunkName: "private" */ '../views/Private.vue'),
        beforeEnter: AuthenticationGuard,
    },
];

const router = createRouter({
  history: createWebHistory(YOUR_BASE_URL),
  routes,
});

Changelog can be seen at Github Releases.

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

If you have questions or want to provide a good idea for improvements, please open an issue.

MIT