/vue-keycloak

Keycloak plugin for Vue3 and Composition API

Primary LanguageTypeScriptApache License 2.0Apache-2.0

+

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,
  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.KeycloakInstance 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