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 @virusxtech/vue-keycloak

Use plugin

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

import { vueKeycloak } from '@virusxtech/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/',
    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.

import axios from 'axios'
import { getToken } from '@virusxtech/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 '@virusxtech/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 '@virusxtech/vue-keycloak'

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

  // Functions
  hasRoles,
  hasResourceRoles,
} = 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. | | resourceRoles | Ref<Record<string, string[]> | resourceRoles is a list of the users roles in specific resources. | | keycloak | Keycloak | keycloak is the instance of the keycloak-js adapter. |

Functions

| Function | Type | Description | | ---------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------- | | hasRoles | (roles: string[]) => boolean | hasRoles returns true if the user has all the given roles. | | hasResourceRoles | (roles: string[], resource: string) => boolean | hasResourceRoles returns true if the user has all the given roles in a resource. |

License

Apache-2.0 Licensed | Copyright © 2021-present Gery Hirschfeld & Contributors