Skip to content

weskubo-cgi/vuecloak

 
 

Repository files navigation

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.

Vue devtools support

Only available in Vue Devtools 6+

About

A Keycloak plugin for Vue 3

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%