{"id":19154310,"url":"https://github.com/baloise/vue-keycloak","last_synced_at":"2025-04-30T08:24:16.949Z","repository":{"id":42465167,"uuid":"352978353","full_name":"baloise/vue-keycloak","owner":"baloise","description":"Keycloak plugin for Vue3 and Composition API","archived":false,"fork":false,"pushed_at":"2023-03-09T14:59:50.000Z","size":572,"stargazers_count":72,"open_issues_count":13,"forks_count":37,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-30T14:22:25.530Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baloise.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-30T11:34:47.000Z","updated_at":"2025-01-25T20:10:44.000Z","dependencies_parsed_at":"2024-06-19T22:53:56.989Z","dependency_job_id":"cc9e077c-bde3-4964-81ba-2566ac35e7c5","html_url":"https://github.com/baloise/vue-keycloak","commit_stats":{"total_commits":18,"total_committers":4,"mean_commits":4.5,"dds":"0.38888888888888884","last_synced_commit":"d7a47a3f1284e778b94981dcb4259500bc909322"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-keycloak","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-keycloak/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-keycloak/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-keycloak/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baloise","download_url":"https://codeload.github.com/baloise/vue-keycloak/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251667357,"owners_count":21624476,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T08:26:23.958Z","updated_at":"2025-04-30T08:24:16.902Z","avatar_url":"https://github.com/baloise.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ctable align=\"center\" cellspacing=\"0\" cellpadding=\"0\" style=\"border: none;\"\u003e\n\u003ctr style=\"border: none;\"\u003e\n  \u003ctd style=\"border: none;\"\u003e\n    \u003cimg width=\"200px\" src=\"https://vuejs.org/images/logo.png\" /\u003e\n  \u003c/td\u003e\n  \u003ctd style=\"border: none;\"\u003e\n    \u003ch1 style=\"font-size: 10em\"\u003e+\u003c/h1\u003e\n  \u003c/td\u003e\n  \u003ctd style=\"border: none;\"\u003e\n    \u003cimg width=\"200px\" src=\"https://www.keycloak.org/resources/images/keycloak_logo_480x108.png\" /\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n# vue-keycloak\n\nA small wrapper library for the [Keycloak JavaScript adapter](https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter).\n\n\u003e The library is made for [Vue 3.x.x](https://v3.vuejs.org/) and the [Composiotion API](https://v3.vuejs.org/api/composition-api.html).\n\n## Instalation\n\nInstall the [keycloak-js](https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter) package , [jwt-decode](https://www.npmjs.com/package/jwt-decode) to decode the jwt token and our wrapper library with npm.\n\n```bash\nnpm install keycloak-js jwt-decode @baloise/vue-keycloak\n```\n\n## Use plugin\n\nImport the library into your `src/main.ts` file or any other entry point.\n\n```typescript\nimport { vueKeycloak } from '@baloise/vue-keycloak'\n```\n\nApply the library to the vue app instance.\n\n```typescript\nconst app = createApp(App)\n\napp.use(vueKeycloak, {\n  initOptions: {\n    flow: 'standard', // default\n    checkLoginIframe: false, // default\n    onLoad: 'login-required', // default\n  }\n  config: {\n    url: 'http://keycloak-server/auth',\n    realm: 'myrealm',\n    clientId: 'myapp'\n  }\n})\n```\n\nOr use a JSON file with the configs.\n\n```typescript\napp.use(vueKeycloak, '/keycloak.json')\n```\n\n### Configuration\n\n| Config      | Type                           | Description                              |\n| ----------- | ------------------------------ | ---------------------------------------- |\n| initOptions | `Keycloak.KeycloakInitOptions` | `initOptions` is Keycloak init options.  |\n| config      | `Keycloak.KeycloakConfig`      | `config` are the Keycloak configuration. |\n\nUse the example below to generate dynamic Keycloak conifiguration.\n\n```typescript\napp.use(vueKeycloak, async () =\u003e {\n  return {\n    config: {\n      url: (await getAuthBaseUrl()) + '/auth',\n      realm: 'myrealm',\n      clientId: 'myapp',\n    },\n    initOptions: {\n      onLoad: 'check-sso',\n      silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html',\n    },\n  }\n})\n```\n\n\u003e It is also possible to access the keycloak instance with `getKeycloak()`\n\n## Use Token\n\nWe export two helper functions for the token.\n\n### getToken\n\nThis function checks if the token is still valid and will update it if it is expired.\n\n\u003e Have a look at our [vueAxios](https://github.com/baloise/vue-axios) plugin.\n\n```typescript\nimport { $axios } from '@baloise/vue-axios'\nimport { getToken } from '@baloise/vue-keycloak'\n\nconst axiosApiInstance = $axios.create()\n\n// Request interceptor for API calls\naxiosApiInstance.interceptors.request.use(\n  async config =\u003e {\n    const token = await getToken()\n    config.headers = {\n      Authorization: `Bearer ${token}`,\n    }\n    return config\n  },\n  error =\u003e {\n    Promise.reject(error)\n  },\n)\n```\n\n## Composition API\n\n```typescript\nimport { computed, defineComponent } from 'vue'\nimport { useKeycloak } from '@baloise/vue-keycloak'\n\nexport default defineComponent({\n  setup() {\n    const { hasRoles, isPending } = useKeycloak()\n\n    const hasAccess = computed(() =\u003e hasRoles(['RoleName']))\n\n    return {\n      hasAccess,\n    }\n  },\n})\n```\n\n### useKeycloak\n\nThe `useKeycloak` function exposes the following reactive state.\n\n```typescript\nimport { useKeycloak } from '@baloise/vue-keycloak'\n\nconst {\n  isAuthenticated,\n  isPending,\n  hasFailed,\n  token,\n  decodedToken,\n  username,\n  roles,\n  resourceRoles,\n  keycloak,\n\n  // Functions\n  hasRoles,\n  hasResourceRoles,\n} = useKeycloak()\n```\n\n| State           | Type                           | Description                                                         |\n| --------------- | ------------------------------ | ------------------------------------------------------------------- |\n| isAuthenticated | `Ref\u003cboolean\u003e`                 | If `true` the user is authenticated.                                |\n| isPending       | `Ref\u003cboolean\u003e`                 | If `true` the authentication request is still pending.              |\n| hasFailed       | `Ref\u003cboolean\u003e`                 | If `true` authentication request has failed.                        |\n| token           | `Ref\u003cstring\u003e`                  | `token` is the raw value of the JWT token.                          |\n| decodedToken    | `Ref\u003cT\u003e`                       | `decodedToken` is the decoded value of the JWT token.               |\n| username        | `Ref\u003cstring\u003e`                  | `username` the name of our user.                                    |\n| roles           | `Ref\u003cstring[]\u003e`                | `roles` is a list of the users roles.                               |\n| resourceRoles   | `Ref\u003cRecord\u003cstring, string[]\u003e` | `resourceRoles` is a list of the users roles in specific resources. |\n| keycloak        | `Keycloak.KeycloakInstance`    | `keycloak` is the instance of the keycloak-js adapter.              |\n\n#### Functions\n\n| Function         | Type                                             | Description                                                                        |\n| ---------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------- |\n| hasRoles         | `(roles: string[]) =\u003e boolean`                   | `hasRoles` returns true if the user has all the given roles.                       |\n| hasResourceRoles | `(roles: string[], resource: string) =\u003e boolean` | `hasResourceRoles` returns true if the user has all the given roles in a resource. |\n\n# License\n\nApache-2.0 Licensed | Copyright © 2021-present Gery Hirschfeld \u0026 Contributors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaloise%2Fvue-keycloak","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaloise%2Fvue-keycloak","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaloise%2Fvue-keycloak/lists"}