rockt-vuejs-keycloak

Vue.js with Keycloak authentication

This plugin integrates VueJS with Keycloak to perform authentication and configuration of the authorization to send requests to the backend.

Requirements

• Vue ^2.0.0
• Vuex ^2.0.0
• axios ^0.17.0

Installation

$ npm install --save rockt-vuejs-keycloak

Setup

Put the frontend settings in /src/statics/keycloak.json file that will be used to authenticate to Keycloak.

{
  "realm": "SERVER-DEV",
  "auth-server-url": "https://keycloak.mydomain.com/auth",
  "ssl-required": "external",
  "resource": "app-name",
  "public-client": true,
  "use-resource-role-mappings": true,
  "confidential-port": 0
}

Create a security module in the application store, using the following example.

// types.js
export const SECURITY_AUTH = 'SECURITY_AUTH'

// mutations.js
import axios from 'axios'

import * as types from './types'

export default {
  [types.SECURITY_AUTH] (state, keycloakAuth) {
    state.auth = keycloakAuth
    axios.defaults.headers.common = { 'Authorization': 'Bearer ' + keycloakAuth.token }
  }
}

// getters.js
import * as types from './types'

export default {
  [types.SECURITY_AUTH]: state => {
    return state.auth
  }
}

// actions.js
import * as types from './types'

import store from 'src/store'

export default {
  authLogin ({ commit }, keycloakAuth) {
    store.commit('SECURITY_AUTH', keycloakAuth)
  },
  authLogout ({ commit }) {
    commit(types.SECURITY_AUTH)
  }
}

// index.js
import actions from './actions'
import getters from './getters'
import mutations from './mutations'

const state = {
  auth: {
    authenticated: false
  }
}

export default {
  state,
  actions,
  getters,
  mutations
}

Don't forget to load it on the Vuex modules!

import security from 'src/store/modules/security'

export default new Vuex.Store({
  modules: {
    security
  }
})

Put the plugin at VueJS startup

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './store'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',  
  router,
  store,
  template: '<App/>',
  components: { App }
})

Configure the vue-router for to use rockt-vuejs-keycloak on verification of the routes.

import Vue from 'vue'
import VueRouter from 'vue-router'

import store from './store'

import security from 'rockt-vuejs-keycloak'

Vue.use(VueRouter)

function load (component) {
  // '@' is aliased to src/components
  return () => import(`@/${component}.vue`)
}

const routes = [
  {
    path: '/',
    component: load('Layout'),
    meta: { requiresAuth: true, roles: ['user'] },
    children: [
      { path: '', name: 'home', component: load('Home'), meta: { requiresAuth: true, roles: ['user'] } }      
    ]
  },  
  { path: '*', component: load('Error404') }, // Not found
  { path: '/unauthorized', name: 'Unauthorized', component: load('Unauthorized') } // Unauthorized
]

const router = new VueRouter({
  /*
   * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
   * it is only to be used only for websites.
   *
   * If you decide to go with "history" mode, please also open /config/index.js
   * and set "build.publicPath" to something other than an empty string.
   * Example: '/' instead of current ''
   *
   * If switching back to default "hash" mode, don't forget to set the
   * build publicPath back to '' so Cordova builds work again.
   */
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const auth = store.state.security.auth
    if (!auth.authenticated) {
      security.init(next, to.meta.roles)
    }
    else {
      if (to.meta.roles) {
        if (security.roles(to.meta.roles[0])) {
          next()
        }
        else {
          next({ name: 'unauthorized' })
        }
      }
      else {
        next()
      }
    }
  }
  else {
    next()
  }
})

export default router

Contributions

Any comments or suggestions are very welcome.