README

Vue-Auth0-Plugin

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

:warning: Currently, only compatible with Vue 3. Support for Vue 2 is planned.

Prerequisites

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

Installation

npm install --save vue-auth0-plugin

Samples

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

Usage

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();

AuthenticationGuard

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

Changelog can be seen at Github Releases.

Contributing

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.

License

MIT

Usage no npm install needed!