Vue-authenticate-service NPM

vue-authenticate-service

Flexible Vue Auth Service & Plugin

Installation

npm install --save vue-authenticate-service

Default import

import Vue from 'vue'
import VueAuthenticateService from 'vue-authenticate-service'

Vue.use(VueAuthenticateService, {
  // options
})

Browser

<link rel="stylesheet" href="vue-authenticate-service/dist/vue-authenticate-service.css"/>

<script src="vue.js"></script>
<script src="vue-authenticate-service/dist/vue-authenticate-service.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Vue.use(VueAuthenticateService)

Usage

1) import plugin module

import VueAuthService from 'vue-authenticate-service'

2) Prepare a Client driver

Client driver is aimed to intercept requests and responses in order to provide an accessToken for each request or process response code.

The service doesn't do any interception, it just calls the interceptors function in the provided client driver and passes the service instance as argument, so that the simplest client driver looks like:

const clientDriver = {
  interceptors: (authSerice) => {
    // some code where you can intercept your http client requests and Responses
    // access token can be retrieved by calling authSerice.accessToken() function that returns a Promise
  }
}

Ready to use Axios Client Driver is included (see the driver's code here)

import { axiosClientDriver } from 'vue-authenticate-service'
const clientDriver = axiosClientDriver(axios)

3) Prepare an API Driver

API driver is just a map to resolve the functions that are responsible for api data. The functions should return Promises:

const apiDriver = {
  login: (creds) => axios.post('/user/signin', creds),
  // user,
  // refresh,
  // facebookLogin,
  // googleLogin,
  // logout
}

4) Install the plugin providing the drivers and options

Vue.use(VueAuthService, {
  client: clientDriver,
  api: apiDriver,
  options: {
    refresh: true, // use refresh token procedure
    autoFetch: true // fetch user data on boot and on login
    // (other options to be documented)
  }
})

5) Use the service in app

// in a module (e.g. in vuex module file)
import Vue from 'vue'
Vue.$auth.login({ user, pass }).then(...)

// in a component
this.$auth.login({ user, pass }).then(...)

// cool helpers are available:
this.$auth.isLoaded() // reactive state, can be used in order to wait until user data is fetched (if authenticated)

this.$auth.isAuthenticated() // the same for checking for auth

// Promises:
this.$auth.whenLoaded()
  .then(/* do stuff */)

this.$auth.whenAuthenticated()
  .then(/* do stuff */)