Adding authentication to any application is always a crucial task. If you’re working with a Vue application, you can utilize the vue-authenticate library to make your work easier. Vue-authenticate is an easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google, and other OAuth providers. The best part about this library is that it is not strictly coupled to one request handling library like vue-axios. You will be able to use it with different libraries.

Installation

You can install this package via Npm:

npm install vue-authenticate

Usage

Next import these libraries.

import Vue from 'vue'
import VueAxios from 'vue-axios'
import VueAuthenticate from 'vue-authenticate'
import axios from 'axios';

Vue.use(VueAxios, axios)
Vue.use(VueAuthenticate, {
  baseUrl: 'http://localhost:3000', // Your API domain
  
  providers: {
    github: {
      clientId: '',
      redirectUri: 'http://localhost:8080/auth/callback' // Your client app URL
    }
  }
})

Email & password login and registration

new Vue({
  methods: {
    login: function () {
      this.$auth.login({ email, password }).then(function () {
        // Execute application logic after successful login
      })
    },

    register: function () {
      this.$auth.register({ name, email, password }).then(function () {
        // Execute application logic after successful registration
      })
    }
  }
})
<button @click="login()">Login</button>
<button @click="register()">Register</button>

Social account authentication

For social account authentication, Follow the instructions below:

new Vue({
  methods: {
    authenticate: function (provider) {
      this.$auth.authenticate(provider).then(function () {
        // Execute application logic after successful social authentication
      })
    }
  }
})

<button @click="authenticate('github')">auth Github</button>
<button @click="authenticate('facebook')">auth Facebook</button>
<button @click="authenticate('google')">auth Google</button>
<button @click="authenticate('twitter')">auth Twitter</button>

Custom request and response interceptors

You can easily set up custom request and response interceptors if you use a different request handling library.

Important: You must set both request and response interceptors at all times.

/**
* This is an example for request and response interceptors for Axios library
*/

Vue.use(VueAuthenticate, {
  bindRequestInterceptor: function () {
    this.$http.interceptors.request.use((config) => {
      if (this.isAuthenticated()) {
        config.headers['Authorization'] = [
          this.options.tokenType, this.getToken()
        ].join(' ')
      } else {
        delete config.headers['Authorization']
      }
      return config
    })
  },

  bindResponseInterceptor: function () {
    this.$http.interceptors.response.use((response) => {
      this.setToken(response)
      return response
    })
  }
})

If you want to use this library with Vuex, You can visit its complete documentation and source code on Github.