This package has been deprecated

Author message:

This module has been superceeded by @mbari/mbari-auth

mbari-auth-vue

This is a VueJS component that is designed to assist in using Auth0 in a VueJS application. There are basically two components in this module, a Button and a component to be used in a router to handle the callback from Auth0. It's built on top of the Auth0JS library which can be found here:

https://www.npmjs.com/package/auth0-js

In order to use this component, you will need to use a Vue router and a Vuex store and supply those to the components. The Vue router is necessary so that a callback can be created for OAuth2 flow to work. The Vuex store is where the user data will be attached once authentication is complete. You will also need an Auth0 account and you will need to create an Auth0 'client' to be used by these components. Note that your vue router must use 'history' mode or callbacks from Auth0 will NOT work due to the '#' in the URL if the router is in hash mode.

To use:

1. Create a client in Auth0 and record the domain, clientID, and audience for later use
2. In the client configuration page in Auth0, add the allowed callback URL that you will be using as your callback for Auth0.
3. Install this module using

npm i --save mbari-auth-vue

1. In your application, create a Vue router and Vuex store
2. In your application, add the authentication button component using something like

<template>
    <div>
        <auth-button
            :authConfig="authConfig"
            :store="$store"
            logoutMethod="logout">
        </auth-button>
    </div>
</template>
<script>
  import {authButton} from 'mbari-auth-vue'

  export default {
    name: 'app',
    data() {
      return {
        authConfig: {
          domain: 'your-domain',
          clientID: 'your-client-id',
          redirectUri: 'your-callback-url',
          audience: 'your-audience',
          responseType: 'your-response-type, likely token id_token'
        }
      }
    },
    components: {
      authButton
    }
  }

</script>

This will create an HTML button and pass in the Auth0 configuration and the Vuex store to the Vue component. The logoutMethod is the name of the method that the component will call on the Vuex store if the user clicks the Logout button.

1. In your application, create a router-view and pass in the callback component from this module. For example, in your router, you might have:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import { callback } from 'mbari-auth-vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/callback',
      name: 'Callback',
      component: callback
    },
    {
      path: '*',
      redirect: '/home'
    }
  ]
})

and in your application, you might have:

<template>
  <div id="app">
    <h1>Hello {{ username }}</h1>
    <auth-button
      :authConfig="authConfig"
      :store="$store"
      logoutMethod="logout">
    </auth-button>
    <router-view
      :authConfig="authConfig"
      :store="$store"
      loginMethod="login"
      :router="$router"
      returnRoute="/home"></router-view>
  </div>
</template>

<script>
  import {authButton} from 'mbari-auth-vue'

  export default {
    name: 'app',
    data() {
      return {
        authConfig: {
          domain: 'your-domain',
          clientID: 'your-client-id',
          redirectUri: 'your-callback-url',
          audience: 'your-audience',
          responseType: 'your-response-type, likely token id_token'
        }
      }
    },
    components: {
      authButton
    }
  }
</script>

where you pass in the Auth0 configuration object, the Vuex store, the name of the loginMethod which will be called by the callback component to attach the user data to the store, the router itself and the name of the returnRoute which will be used by the callback to send the user to a specific location after authentication has completed.

Note that in the Vuex store, you will need a couple of methods to handle the user data. For example, you might create a method named 'login' on the store that is of the form login(context, payload). This will be called when authentication is successful and the payload parameter will be a user data object that comes from Auth0. Then in your Vuex store you can do what you wish with the user data (i.e. store it in local storage, send it to an API, etc.). You will also need a logout method that is of the form logout(context) and this will be called when a user logs out.