@yanteixeira/vue-keycloak

+

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

Use plugin

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

import { vueKeycloak } from '@yantxs/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 a helper functions for the token.

Composition API

import { computed, defineComponent } from 'vue'
import { useKeycloak } from '@yantxs/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 '@yantxs/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