National Poo Museum

    @baloise/vue-keycloak
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.0 • Public • Published

    +

    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.

    Functions

    Function Type Description
    hasRoles (roles: string[]) => boolean hasRoles returns true if the user has all the given roles.

    License

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

    Install

    npm i @baloise/vue-keycloak

    DownloadsWeekly Downloads

    456

    Version

    1.5.0

    License

    Apache-2.0

    Unpacked Size

    55.8 kB

    Total Files

    16

    Last publish

    Collaborators

    • assistentenitch
    • madalina.iacob
    • yannickholzenkamp
    • montakasparsone
    • team_mortal
    • mladenplaninicic
    • nobilo
    • thomasseyssenstpo
    • se-aperto-com
    • baopso
    • hirsch88