mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-24 16:22:16 +00:00
d8ea041c56
## Todos for release - [x] Configure Env in docs project on vercel - [x] Configure Root Path in the docs project on vercel - [ ] Remove old CSP https://github.com/zitadel/website/pull/1592 ## What we did This pull request migrates the project documentation from the old `docs/` directory to the new `apps/docs/` directory, introduces a new documentation system built with Next.js and Fumadocs, and updates all relevant references, configuration files, and documentation to reflect this change. It also adds new configuration and ignore files for the new documentation app, updates CI and linting to exclude the new docs from certain checks, and revises the contributing guidelines accordingly. **Documentation System Migration and New Docs App** * Migrated all documentation from `docs/` to `apps/docs/`, and updated all references in `README.md`, `CONTRIBUTING.md`, and other files to point to the new location. [[1]](diffhunk://#diff-eca12c0a30e25b4b46522ebf89465a03ba72a03f540796c979137931d8f92055L585-L640) [[2]](diffhunk://#diff-eca12c0a30e25b4b46522ebf89465a03ba72a03f540796c979137931d8f92055L660-R607) [[3]](diffhunk://#diff-eca12c0a30e25b4b46522ebf89465a03ba72a03f540796c979137931d8f92055L740-R687) [[4]](diffhunk://#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L2-R3) [[5]](diffhunk://#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L30-R30) * Added a new Next.js/Fumadocs-based documentation app under `apps/docs/`, including core app files, layouts, routing, search API, and a comprehensive `README.md` with development and contribution instructions. [[1]](diffhunk://#diff-5a1b07344a2c1b4d3f37b23ff1388b62cd9f57dea3c1cd23d8a0412b7602b132R1-R74) [[2]](diffhunk://#diff-462b9ad1eabbb7d1c29bb9c36e4931eb180fd7190900e6d2babf8f4d66ad1c28R1-R39) [[3]](diffhunk://#diff-e16ae25660ded787b10ac35dea96d5ecaacf895dae0afc8a9bd4382dc79a8c87R1-R7) [apps/docs/app/[[...slug]]/layout.tsxR1-R81](diffhunk://#diff-59e08acde4e805b7aeccef1dcf98f1d71dfc550777e6b9402085cee0e9fa4e0aR1-R81), [apps/docs/app/[[...slug]]/page.tsxR1-R79](diffhunk://#diff-e5df3f80d0fa01e12d63d81f29c57a9d14e846c78fd3beabb2ef768e38fd9580R1-R79), [[4]](diffhunk://#diff-389b34918e040cacaa87cd7201ffa462cc2b0b716736f537e3d3c660ac69353bR1-R7) [[5]](diffhunk://#diff-d3b03416d1c457b19f1c27b26f2db741412df841b875c26ccadc36e4522247f4R1-R29) [[6]](diffhunk://#diff-c8fb8339570a5305809be7c618e14705fd86390dc278e6ce8ba224a7bc8b0c3cR1-R25) **Configuration and Tooling Updates** * Updated `.github/workflows/codeql.yml`, `.golangci.yaml`, and `.github/dependabot.yml` to properly handle the new docs app: excluded `apps/docs` from certain checks, added npm dependency updates for the docs app, and excluded generated content. [[1]](diffhunk://#diff-12783128521e452af0cfac94b99b8d250413c516ec71fe6d97dbea666ff7ba27L8-R14) [[2]](diffhunk://#diff-9917ddc9f1c3304218f7269265b746d997c5c0615478177b5fceecd33ef47cb5R5-R6) [[3]](diffhunk://#diff-9917ddc9f1c3304218f7269265b746d997c5c0615478177b5fceecd33ef47cb5R126-R129) [[4]](diffhunk://#diff-dd4fbda47e51f1e35defb9275a9cd9c212ecde0b870cba89ddaaae65c5f3cd28R89-R106) * Updated `.devcontainer/devcontainer.json` to use the latest Go 1.25.3 version for consistency. **Licensing and Miscellaneous** * Added `apps/docs/` to the list of licensed directories in `LICENSING.md`. These changes ensure the documentation is now maintained in a modern, scalable system and all project tooling is updated to support the new structure. --------- Co-authored-by: Federico Coppede <[email protected]>
130 lines
5.6 KiB
Plaintext
130 lines
5.6 KiB
Plaintext
---
|
|
title: ZITADEL with Vue
|
|
sidebar_label: Vue
|
|
---
|
|
|
|
This integration guide demonstrates the recommended way to incorporate ZITADEL into your Vue application.
|
|
It explains how to enable user login in your application and how to fetch data from the user info endpoint.
|
|
|
|
By the end of this guide, your application will have login functionality and will be able to access the current user's profile.
|
|
|
|
<Callout title="">
|
|
This documentation references our [example](https://github.com/zitadel/zitadel-vue) on GitHub.
|
|
It also uses the @zitadel/vue package with its default configuration.
|
|
</Callout>
|
|
|
|
## Set up application and obtain keys
|
|
|
|
Before we begin developing our application, we need to perform a few configuration steps in the ZITADEL Management Console.
|
|
You'll need to provide some information about your app.
|
|
We recommend creating a new app to start from scratch.
|
|
Navigate to your project, then add a new application at the top of the page.
|
|
Select the **User Agent** application type and continue.
|
|
We recommend that you use [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all single page applications.
|
|
|
|
|
|
|
|
### Redirect URIs
|
|
|
|
The redirect URIs field tells ZITADEL where it's allowed to redirect users after authentication. For development, you can set dev mode to `true` to enable insecure HTTP and redirect to a `localhost` URI.
|
|
The post logout redirect sends your users back to a public route on your application after they have logged out.
|
|
|
|
<Callout>
|
|
If you are following along with the [example](https://github.com/zitadel/zitadel-vue), set the dev mode switch to `true`.
|
|
Configure a redirect URIs to *http:/<span></span>/localhost:5173/auth/signinwin/zitadel* and a post redirect URI to *http:/<span></span>/localhost:5173/*.
|
|
</Callout>
|
|
|
|
Continue and create the application.
|
|
|
|
### Refresh Token and Client ID
|
|
|
|
After successful creation of the app, make sure you tick the checkbox to enable refresh tokens.
|
|
Also copy the client ID, as you will need it to configure your Vue client.
|
|
|
|
|
|
|
|
## Create a project role "admin" and assign it to your user
|
|
|
|
Also note the projects resource ID, as you will need it to configure your Vue client.
|
|
|
|
|
|
|
|
|
|
|
|
## Vue setup
|
|
|
|
Now that you have configured your web application on the ZITADEL side, you can proceed with the integration of your Vue client.
|
|
|
|
### Install Vue dependencies
|
|
|
|
To conveniently connect with ZITADEL, you can install the [@zitadel/vue NPM package](https://www.npmjs.com/package/@zitadel/vue). Run the following command:
|
|
|
|
```bash
|
|
npm install --save @zitadel/vue
|
|
```
|
|
|
|
### Create and configure the auth service
|
|
|
|
The @zitadel/vue package provides a `createZITADELAuth()` function which sets some defaults and calls the underlying [vue-oidc-client packages](https://github.com/soukoku/vue-oidc-client) `createOidcAuth()` function.
|
|
You can overwrite all the defaults with the arguments you pass to `createZITADELAuth()`.
|
|
|
|
Export the object returned from `createZITADELAuth()`
|
|
|
|
```ts reference
|
|
https://github.com/zitadel/zitadel-vue/blob/main/src/services/zitadelAuth.ts
|
|
```
|
|
|
|
### Register the auth service in your global variables when bootstrapping Vue
|
|
|
|
```ts reference
|
|
https://github.com/zitadel/zitadel-vue/blob/main/src/main.ts
|
|
```
|
|
|
|
### Add three new views to your application
|
|
|
|
The restricted admin view will only be shown if the user is authenticated and has the role "admin" in the apps project in ZITADEL.
|
|
|
|
```ts reference
|
|
https://github.com/zitadel/zitadel-vue/blob/main/src/views/AdminView.vue
|
|
```
|
|
|
|
The restricted login view is shown to all authenticated users.
|
|
It prints all the information it gets from the token and from the user info endpoint.
|
|
|
|
```ts reference
|
|
https://github.com/zitadel/zitadel-vue/blob/main/src/views/LoginView.vue
|
|
```
|
|
|
|
The public no access view is shown to authenticated users who navigate to a page they don't have access to based on their roles.
|
|
|
|
```ts reference
|
|
https://github.com/zitadel/zitadel-vue/blob/main/src/views/NoAccessView.vue
|
|
```
|
|
|
|
### Add protected routes to your new pages as well as a Signout link
|
|
|
|
Note that we conditionally render the admin view or the no access view based on the user's roles.
|
|
|
|
```ts reference
|
|
https://github.com/zitadel/zitadel-vue/blob/main/src/router/index.ts
|
|
```
|
|
|
|
## Completion
|
|
|
|
Congratulations! You have successfully integrated your Vue application with ZITADEL!
|
|
|
|
If you get stuck, consider checking out the [ZITADEL Vue example application](https://github.com/zitadel/zitadel-vue).
|
|
This application includes all the functionalities mentioned in this quickstart.
|
|
You can start by cloning the repository and change the arguments to createZITADELAuth so they fit your requirements.
|
|
If you face issues, contact us or [raise an issue on GitHub](https://github.com/zitadel/zitadel-vue/issues).
|
|
|
|
|
|
|
|
### What's next?
|
|
|
|
Now that you have enabled authentication, you are ready to call add authorization to your application using ZITADEL APIs.
|
|
To do this, [refer to the API docs](/apis/introduction) or check out [the ZITADEL Management Console code on GitHub](https://github.com/zitadel/zitadel) which uses gRPC to access data.
|
|
|
|
For more information on how to create an Vue application, you can refer to [Vue](https://vuejs.org/guide/quick-start.html).
|
|
If you want to learn more about the libraries wrapped by [@zitadel/vue](https://www.npmjs.com/package/@zitadel/vue), [read the docs for vue-oidc-client](https://github.com/soukoku/vue-oidc-client/wiki/V1-Docs).
|