Blog Detail


Add Authentication to your Vue Js App with vue-authenticate cover image

arrow_back Add Authentication to your Vue Js App with vue-authenticate

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.


You can install this package via Npm:

npm install vue-authenticate


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) => {
      return response

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

Published at : 07-02-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project