vuecloak

Vuecloak uses the official Keycloak JS Adapter.

Installation

Using npm

npm i -S vuecloak

Using Yarn

yarn add vuecloak

Get started

Config

It is mandatory to provide a config object containing your Keycloak url, realm and clientId.

import { Vuecloak } from 'vuecloak'

app
  .use(Vuecloak, {
    config: {
      url: 'KEYCLOAK_URL',
      realm: 'KEYCLOAK_REALM',
      clientId: 'KEYCLOAK_CLIENT_ID'
    }
  })

Init options

You can provide custom initialization options to Keycloak adapter through init property.

app
  .use(Vuecloak, {
    init: {
      onLoad: 'login-required',
      checkLoginIframe: false
    }
  })

Callback events

Vuecloak allows you to listen to Keycloak callback events.

Key	Type
onReady	Function(keycloak)
onAuthSuccess	Function(keycloak)
onAuthError	Function(keycloak)
onAuthRefreshSuccess	Function(keycloak)
onAuthRefreshError	Function(keycloak)
onAuthLogout	Function(keycloak)
onTokenExpired	Function(keycloak)
onInitSuccess	Function(authenticated)
onInitError	Function(error)

You can use this way:

app
  .use(Vuecloak, {
    onReady (keycloak) {
      ...
    },
    onInitSuccess (authenticated) {
      ...
    },
  })

Usage

Vuecloak adds a $keycloak property with its properties and methods to global Vue instance for you to use within your templates.

<template>
  <button @click="$keycloak.logout">
    Logout
  </button>
</template>

Inject

You can add $keycloak instance to your Vue setup too using inject option.

import { inject, onBeforeMount } from 'vue'

export default {
  setup () {
    const keycloak = inject('$keycloak')

    onBeforeMount(() => {
      keycloak.loadUserInfo()
        .then((user) => {
          ...
        })
    })
  }
})

Update token

Vuecloak has no strategy for keeping your tokens valid, so you need to do this on your own. A good way is to check it before API calls.

axios.interceptors.request.use(async config => {
  await app.config.globalProperties.$keycloak.updateToken()

  config.headers.common.Authorization = `Bearer ${app.config.globalProperties.$keycloak.token}`

  return config
})

Full example

app
  .use(Vuecloak, {
    config: {
      url: 'KEYCLOAK_URL',
      realm: 'KEYCLOAK_REALM',
      clientId: 'KEYCLOAK_CLIENT_ID'
    },
    init: {
      onLoad: 'login-required',
      checkLoginIframe: false
    },
    onReady (keycloak) {...},
    onAuthSuccess (keycloak) {...},
    onAuthError (keycloak) {...},
    onAuthRefreshSuccess (keycloak) {...},
    onAuthRefreshError (keycloak) {...},
    onAuthLogout (keycloak) {...},
    onTokenExpired (keycloak) {...},
    onInitSuccess (authenticated) {...},
    onInitError (error) {...},
  })

Debug

Vuecloak uses the power of Vue Devtools to provide a great developer experience.

Only available in Vue Devtools 6+