@baloise/vue-keycloak NPM

vue-keycloak

A small wrapper library for the Keycloak JavaScript adapter.

The library is made for Vue 3.x.x and the Composiotion API.

Instalation

Install the keycloak-js package , jwt-decode to decode the jwt token and our wrapper library with npm.

npm install keycloak-js jwt-decode @baloise/vue-keycloak

Use plugin

Import the library into your src/main.ts file or any other entry point.

import { vueKeycloak } from '@baloise/vue-keycloak'

Apply the library to the vue app instance.

const app = createApp(App)

app.use(vueKeycloak, {
  initOptions: {
    flow: 'standard', // default
    checkLoginIframe: false, // default
    onLoad: 'login-required', // default
  }
  config: {
    url: 'http://keycloak-server/auth',
    realm: 'myrealm',
    clientId: 'myapp'
  }
})

Or use a JSON file with the configs.

app.use(vueKeycloak, '/keycloak.json')

Configuration

Config	Type	Description
initOptions	`Keycloak.KeycloakInitOptions`	`initOptions` is Keycloak init options.
config	`Keycloak.KeycloakConfig`	`config` are the Keycloak configuration.

Use the example below to generate dynamic Keycloak conifiguration.

app.use(vueKeycloak, async () => {
  return {
    config: {
      url: (await getAuthBaseUrl()) + '/auth',
      realm: 'myrealm',
      clientId: 'myapp',
    },
    initOptions: {
      onLoad: 'check-sso',
      silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html',
    },
  }
})

It is also possible to access the keycloak instance with getKeycloak()

Use Token

We export two helper functions for the token.

getToken

This function checks if the token is still valid and will update it if it is expired.

Have a look at our vueAxios plugin.

import { $axios } from '@baloise/vue-axios'
import { getToken } from '@baloise/vue-keycloak'

const axiosApiInstance = $axios.create()

// Request interceptor for API calls
axiosApiInstance.interceptors.request.use(
  async config => {
    const token = await getToken()
    config.headers = {
      Authorization: `Bearer ${token}`,
    }
    return config
  },
  error => {
    Promise.reject(error)
  },
)

Composition API

import { computed, defineComponent } from 'vue'
import { useKeycloak } from '@baloise/vue-keycloak'

export default defineComponent({
  setup() {
    const { hasRoles, isPending } = useKeycloak()

    const hasAccess = computed(() => hasRoles(['RoleName']))

    return {
      hasAccess,
    }
  },
})

useKeycloak

The useKeycloak function exposes the following reactive state.

import { useKeycloak } from '@baloise/vue-keycloak'

const {
  isAuthenticated,
  isPending,
  hasFailed,
  token,
  decodedToken,
  username,
  roles,
  keycloak,

  // Functions
  hasRoles,
} = useKeycloak()

State	Type	Description
isAuthenticated	`Ref<boolean>`	If `true` the user is authenticated.
isPending	`Ref<boolean>`	If `true` the authentication request is still pending.
hasFailed	`Ref<boolean>`	If `true` authentication request has failed.
token	`Ref<string>`	`token` is the raw value of the JWT token.
decodedToken	`Ref<T>`	`decodedToken` is the decoded value of the JWT token.
username	`Ref<string>`	`username` the name of our user.
roles	`Ref<string[]>`	`roles` is a list of the users roles.
keycloak	`Keycloak.KeycloakInstance`	`keycloak` is the instance of the keycloak-js adapter.