{"id":22009694,"url":"https://github.com/zitadel/zitadel-vue","last_synced_at":"2025-07-05T23:37:23.898Z","repository":{"id":217508024,"uuid":"652455109","full_name":"zitadel/zitadel-vue","owner":"zitadel","description":"Authenticate your ZITADEL users within your Vue applications","archived":false,"fork":false,"pushed_at":"2025-04-29T09:31:29.000Z","size":747,"stargazers_count":23,"open_issues_count":5,"forks_count":8,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-29T10:35:40.798Z","etag":null,"topics":["examples","oidc-client","vue","vue3","zitadel"],"latest_commit_sha":null,"homepage":"https://zitadel.com/docs/examples/login/vue","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zitadel.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null}},"created_at":"2023-06-12T05:42:49.000Z","updated_at":"2025-04-29T09:30:14.000Z","dependencies_parsed_at":"2024-01-16T23:15:33.388Z","dependency_job_id":"2d9d9827-97f6-4a6d-a63f-81c59985c91e","html_url":"https://github.com/zitadel/zitadel-vue","commit_stats":null,"previous_names":["zitadel/zitadel-vue"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zitadel","download_url":"https://codeload.github.com/zitadel/zitadel-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252741475,"owners_count":21797027,"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":["examples","oidc-client","vue","vue3","zitadel"],"created_at":"2024-11-30T02:10:25.257Z","updated_at":"2025-05-06T18:15:41.719Z","avatar_url":"https://github.com/zitadel.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @zitadel/vue Example\n\nAuthenticate your [ZITADEL](https://zitadel.com) users within your Vue applications.\n\n![NPM Version](https://img.shields.io/npm/v/@zitadel/vue)\n![NPM License](https://img.shields.io/npm/l/@zitadel/vue)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)\n\n\u003e [!IMPORTANT]\n\u003e If you want to try out [@zitadel/vue](https://www.npmjs.com/package/@zitadel/vue), read the [ZITADEL step-by-step guide for Vue](https://zitadel.com/docs/examples/login/vue).\n\u003e It shows how to get the *client_id* and the *project_resource_id* from ZITADEL and how to wire everything up in Vue.\n\n## Project Structure\n\nThe example project is generated in the repositories root directory using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).\n\nThe following pages are added to the scaffolded example application:\n- *src/views/Login.vue*: The protected login page shows the information retrieved from ZITADEL when a user is authenticated.\n- *src/views/Admin.vue*: The protected admin page renders different views depending on if the user has the role \"admin\" or not.\n\n![Example GUI](./example-gui.png)\n\nThe following files are added or modified to enable ZITADEL authentication:\n- *src/router/index.ts*: The routes are protected using the meta field *authName* and conditional lazy loading.\n- *src/App.vue*: The navigation bar is conditionally rendered depending on the authentication state.\n- *src/services/zitadelAuth.ts*: The [@zitadel/vue SDK](https://www.npmjs.com/package/@zitadel/vue) is configured.\n- The file *src/main.ts* shows how the Vue application is bootstrapped with ZITADEL auth support.\n- The folder *./lib* contains the [@zitadel/vue SDK](https://www.npmjs.com/package/@zitadel/vue).\n\n## Features\n\nThe NPM package [@zitadel/vue](https://www.npmjs.com/package/@zitadel/vue) wraps the NPM package [vue-oidc-client](https://github.com/soukoku/vue-oidc-client).\nAll [vue-oidc-client](https://github.com/soukoku/vue-oidc-client) features are available and the whole configuration can be overridden.\n\nThe following features are added to [vue-oidc-client](https://github.com/soukoku/vue-oidc-client)\n\n- [@zitadel/vue](https://www.npmjs.com/package/@zitadel/vue) defaults as much configuration as possible.\n- [@zitadel/vue](https://www.npmjs.com/package/@zitadel/vue) provides a simple way to check for user roles.\n- An example application is provided to show how to use [@zitadel/vue](https://www.npmjs.com/package/@zitadel/vue).\n\nThe following is an example for a minimal OIDC configuration:\n\n```typescript\nconst zitadelAuth = createZITADELAuth({\n   issuer: `${myZITADELInstancesOrigin}`,\n   client_id: `${myApplicationsClientID}`,\n   project_resource_id: `${myApplicationsProjectResourceID}`,\n   organization_id: `${myApplicationsOrganizationID}`, // optional\n})\n```\n\nThe following defaults apply:\n- The OIDC Code Flow with PKCE is used for authentication at ZITADEL.\n- ZITADELs user info endpoint is called to enrich the user profile.\n- The access token is refreshed automatically by default before it expires.\n- If you specify a *project_resource_id*, the scopes for retrieving the users roles from the user info endpoint are added automatically.\nYou can conveniently use `zitadelAuth.hasRole(\"someRoleKey\")`.\n\nOptional:\n- add an *organization_id* to register and login users directly in the organization scope.\n\n## Running the Example\n\n### Recommended IDE Setup\n\n[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).\n\n### Type Support for `.vue` Imports in TS\n\nTypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.\n\nIf the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:\n\n1. Disable the built-in TypeScript Extension\n    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette\n    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`\n2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.\n\n### Customize configuration\n\nSee [Vite Configuration Reference](https://vitejs.dev/config/).\n\n### Project Setup\n\n```sh\nyarn\n```\n\n#### Compile and Hot-Reload for Development\n\n```sh\nyarn dev\n```\n\n#### Type-Check, Compile and Minify for Production\n\n```sh\nyarn build\n```\n\n#### Lint with [ESLint](https://eslint.org/)\n\n```sh\nyarn lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzitadel%2Fzitadel-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-vue/lists"}