feat: initial commit

.gitignore

@@ -0,0 +1,13 @@
+/target
+/config.toml
+
+# Devenv
+.devenv*
+devenv.local.nix
+devenv.local.yaml
+
+# direnv
+.direnv
+
+# pre-commit
+.pre-commit-config.yaml

AGENTS.md

@@ -0,0 +1,7 @@
+# Repository Guidance
+
+- This is a single Rust 2024 binary crate named `rust-graphql-zitadel`; the executable entrypoint is `src/main.rs`.
+- There is no Rust workspace, CI configuration, or toolchain pin. Use Cargo directly from the repository root; `devenv up` starts both local application processes.
+- Run `cargo fmt --check` for formatting, `cargo check` for compilation, `cargo test` for tests, and `cargo clippy -- -D warnings` for lint verification.
+- The Vue app is under `web/`; run its checks from there with `pnpm build`. `devenv up` starts the backend with `cargo run` and the frontend with `pnpm --dir web dev --host 127.0.0.1`.
+- `Cargo.lock` is generated by Cargo and should not be edited manually; update it through dependency or Cargo commands.

Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "rust-graphql-zitadel"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+actix-web = "4.15.0"
+async-graphql = "7.2.1"
+async-graphql-actix-web = "7.2.1"
+config = "0.15.25"
+jsonwebtoken = "9.3.1"
+reqwest = { version = "0.12.23", default-features = false, features = ["json", "rustls-tls"] }
+serde = { version = "1.0.228", features = ["derive"] }
+thiserror = "2.0.20"
+tokio = { version = "1.48.0", features = ["sync"] }

README.md

@@ -0,0 +1,151 @@
+# Rust GraphQL Zitadel
+
+Kleines Lernprojekt für eine geschützte GraphQL-API mit Rust, Actix-Web,
+async-graphql und Zitadel sowie einer Vue/Vite-SPA als Frontend.
+
+## Architektur
+
+```text
+Vue SPA (Vite, :5173)
+        |
+        | OIDC Authorization Code + PKCE
+        v
+     Zitadel
+        |
+        | Access Token (JWT)
+        v
+Rust API (Actix-Web, :8080)
+        |
+        | JWT-Signatur, Issuer, Audience und Ablaufzeit prüfen
+        v
+async-graphql
+```
+
+Das Frontend führt den Login bei Zitadel durch. Die Rust-Anwendung führt
+keinen Login durch, sondern arbeitet als OAuth-Resource-Server: Jede
+GraphQL-Anfrage muss ein gültiges Access Token im `Authorization`-Header
+enthalten.
+
+## Verzeichnisstruktur
+
+```text
+src/
+├── main.rs       # Konfiguration laden und Actix-Server starten
+├── config.rs     # config.toml in typisierte Settings laden
+├── auth.rs       # OIDC Discovery, JWKS und JWT-Validierung
+└── graphql.rs    # GraphQL-Schema und geschützter Handler
+
+web/src/
+├── App.vue                # Seitenfluss und Zusammenspiel der Module
+├── auth/oidc.ts           # OIDC-Client und Zitadel-Redirects
+├── auth/useAuth.ts        # Authentifizierungszustand im Vue-Lifecycle
+├── graphql/client.ts      # GraphQL-Request mit Bearer Token
+└── components/            # Login- und Ergebnisdarstellung
+```
+
+## Konfiguration
+
+Backend-Konfiguration:
+
+```bash
+cp config.example.toml config.toml
+```
+
+`config.toml` wird absichtlich nicht versioniert. Die wichtigsten Werte sind:
+
+```toml
+[server]
+host = "127.0.0.1"
+port = 8080
+
+[zitadel]
+issuer_url = "https://deine-instanz.zitadel.cloud"
+audience = "deine-api-audience"
+```
+
+`issuer_url` ist die Zitadel-Instanz. `audience` muss einem Wert im `aud`-
+Claim des Access Tokens entsprechen, für dieses Projekt normalerweise der
+Zitadel-Project-ID.
+
+Frontend-Konfiguration:
+
+```bash
+cp web/.env.example web/.env.local
+```
+
+```env
+VITE_ZITADEL_AUTHORITY=https://deine-instanz.zitadel.cloud
+VITE_ZITADEL_CLIENT_ID=deine-spa-client-id
+VITE_ZITADEL_PROJECT_ID=deine-projekt-id
+```
+
+Die SPA muss in Zitadel als Single-Page Application angelegt sein. Für die
+lokale Entwicklung werden diese Redirect-URIs benötigt:
+
+```text
+http://localhost:5173/callback
+http://localhost:5173/
+```
+
+Die erste URI ist die Login-Callback-URI, die zweite die Post-Logout-URI.
+Wenn die Anwendung über `127.0.0.1` geöffnet wird, müssen die entsprechenden
+URIs mit `127.0.0.1` ebenfalls in Zitadel eingetragen werden.
+
+Der Access-Token-Typ der Zitadel-Anwendung muss auf **JWT** stehen. Ein
+opaker beziehungsweise verschlüsselter Token kann nicht mit den öffentlichen
+JWKS-Schlüsseln lokal validiert werden; dafür wäre stattdessen Token
+Introspection erforderlich.
+
+## Lokale Entwicklung
+
+Mit Devenv werden Backend und Frontend gemeinsam gestartet:
+
+```bash
+devenv up
+```
+
+Alternativ einzeln:
+
+```bash
+# Repository-Root
+cargo run
+
+# web/
+```
+
+Der Vite-Entwicklungsserver proxied `/graphql` an das Rust-Backend. Dadurch
+ruft der Browser `/graphql` auf Port `5173` auf, während die Anfrage intern an
+`http://127.0.0.1:8080/graphql` weitergeleitet wird.
+
+## Request-Fluss
+
+1. Die SPA startet den Authorization-Code-Flow mit PKCE.
+2. Zitadel authentifiziert den Benutzer und leitet zu `/callback` zurück.
+3. `oidc-client-ts` tauscht den Code gegen Tokens und speichert die Session
+   in `sessionStorage`.
+4. Das Frontend sendet das Access Token als `Bearer`-Token an `/graphql`.
+5. Actix-Web validiert Signatur, Issuer, Audience und Ablaufzeit.
+6. Erst danach wird die GraphQL-Abfrage ausgeführt.
+
+## Prüfungen
+
+Backend aus dem Repository-Root:
+
+```bash
+cargo fmt --check
+cargo check
+cargo test
+cargo clippy -- -D warnings
+```
+
+Frontend aus `web/`:
+
+```bash
+pnpm build
+```
+
+## Häufige Fehler
+
+- `redirect_uri is missing`: Die exakte Callback-URI fehlt in der Zitadel-SPA-Anwendung.
+- `401 Unauthorized`: Das Access Token fehlt, ist abgelaufen oder Issuer/Audience stimmen nicht.
+- `Base64 error` mit fünf Token-Teilen: Zitadel liefert keinen normalen signierten JWT; den Access-Token-Typ auf JWT stellen oder Introspection implementieren.

config.example.toml

@@ -0,0 +1,7 @@
+[server]
+host = "127.0.0.1"
+port = 8080
+
+[zitadel]
+issuer_url = "https://your-instance.zitadel.cloud"
+audience = "your-api-audience"

devenv.lock

@@ -0,0 +1,65 @@
+{
+  "nodes": {
+    "devenv": {
+      "locked": {
+        "dir": "src/modules",
+        "lastModified": 1789928656,
+        "narHash": "sha256-D7RNclo2qbp+r3wR1ac5zR+rD6eTe5LUbdVtO/jJvuA=",
+        "owner": "cachix",
+        "repo": "devenv",
+        "rev": "c5ee672098ceb23c694fd89fdb1ff7478ee386fa",
+        "type": "github"
+      },
+      "original": {
+        "dir": "src/modules",
+        "owner": "cachix",
+        "repo": "devenv",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "inputs": {
+        "nixpkgs-src": "nixpkgs-src"
+      },
+      "locked": {
+        "lastModified": 1789506231,
+        "narHash": "sha256-vNkJbtmqyBfFhn/HnzQo4ROuoyYWuy/allqTfJb4kMY=",
+        "owner": "cachix",
+        "repo": "devenv-nixpkgs",
+        "rev": "c2f38fe7f9e04d9aadd354d380f2bd40531d9737",
+        "type": "github"
+      },
+      "original": {
+        "owner": "cachix",
+        "ref": "rolling",
+        "repo": "devenv-nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs-src": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1789370336,
+        "narHash": "sha256-6RSEDHIWQtesQKWSu5qRai8L2h4KgCgMEfJHstW99G4=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "c7def046b9a883d46974757852106483d741586f",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "devenv": "devenv",
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

devenv.nix

@@ -0,0 +1,15 @@
+{ pkgs, lib, config, inputs, ... }:
+
+{
+  languages.rust.enable = true;
+
+  languages.javascript = {
+    enable = true;
+    pnpm.enable = true;
+  };
+
+  processes = {
+    backend.exec = "cargo run";
+    frontend.exec = "pnpm --dir web dev --host 127.0.0.1";
+  };
+}

devenv.yaml

@@ -0,0 +1,18 @@
+# yaml-language-server: $schema=https://devenv.sh/devenv.schema.json
+inputs:
+  nixpkgs:
+    url: github:cachix/devenv-nixpkgs/rolling
+
+# If you're using non-OSS software, you can set allow_unfree to true.
+# allow_unfree: true
+
+# If you're not willing to allow unsupported packages:
+# allow_unsupported_system: false
+
+# If you're willing to use a package that's vulnerable
+# permitted_insecure_packages:
+#  - "openssl-1.1.1w"
+
+# If you have more than one devenv you can merge them
+#imports:
+# - ./backend

src/auth.rs

@@ -0,0 +1,171 @@
+//! Zitadel access-token authentication.
+//!
+//! The API acts as an OAuth resource server: the frontend obtains an access
+//! token from Zitadel, while this module verifies that token before GraphQL is
+//! executed. The token is verified locally with Zitadel's public JWKS keys so
+//! requests do not require a round trip to Zitadel.
+
+use std::{collections::HashMap, sync::Arc};
+
+use actix_web::HttpRequest;
+use jsonwebtoken::{Algorithm, DecodingKey, Validation, decode, decode_header};
+use reqwest::Client;
+use serde::Deserialize;
+use thiserror::Error;
+use tokio::sync::RwLock;
+
+use crate::config::ZitadelSettings;
+
+#[derive(Debug, Deserialize)]
+struct Claims {
+    sub: String,
+    // jsonwebtoken validates the expiry claim, even though the API only uses the subject.
+    #[serde(rename = "exp")]
+    _exp: usize,
+}
+
+#[derive(Debug, Deserialize)]
+struct OpenIdConfiguration {
+    jwks_uri: String,
+}
+
+#[derive(Debug, Deserialize)]
+struct Jwks {
+    keys: Vec<JsonWebKey>,
+}
+
+#[derive(Debug, Deserialize)]
+struct JsonWebKey {
+    kid: String,
+    n: String,
+    e: String,
+}
+
+#[derive(Debug, Error)]
+pub(crate) enum AuthenticatorError {
+    #[error("could not load Zitadel OpenID configuration: {0}")]
+    OpenIdConfiguration(#[source] reqwest::Error),
+    #[error("could not load Zitadel signing keys: {0}")]
+    Jwks(#[source] reqwest::Error),
+    #[error("invalid Zitadel signing key: {0}")]
+    SigningKey(#[source] jsonwebtoken::errors::Error),
+    #[error("missing or invalid authorization header")]
+    Authorization,
+    #[error("unknown signing key")]
+    UnknownKey,
+    #[error("invalid access token: {0}")]
+    Token(#[source] jsonwebtoken::errors::Error),
+}
+
+#[derive(Clone)]
+pub(crate) struct Authenticator {
+    client: Client,
+    issuer: String,
+    audience: String,
+    jwks_uri: String,
+    keys: Arc<RwLock<HashMap<String, DecodingKey>>>,
+}
+
+impl Authenticator {
+    /// Discover Zitadel's JWKS endpoint and load its current signing keys.
+    ///
+    /// OIDC discovery is used instead of hardcoding Zitadel endpoints, which
+    /// keeps the code valid for both cloud and self-hosted instances.
+    pub(crate) async fn from_config(
+        client: Client,
+        zitadel: &ZitadelSettings,
+    ) -> Result<Self, AuthenticatorError> {
+        let issuer = zitadel.issuer_url.trim_end_matches('/').to_owned();
+        let openid_configuration = client
+            .get(format!("{issuer}/.well-known/openid-configuration"))
+            .send()
+            .await
+            .map_err(AuthenticatorError::OpenIdConfiguration)?
+            .error_for_status()
+            .map_err(AuthenticatorError::OpenIdConfiguration)?
+            .json::<OpenIdConfiguration>()
+            .await
+            .map_err(AuthenticatorError::OpenIdConfiguration)?;
+
+        let keys = load_keys(&client, &openid_configuration.jwks_uri).await?;
+
+        Ok(Self {
+            client,
+            issuer,
+            audience: zitadel.audience.clone(),
+            jwks_uri: openid_configuration.jwks_uri,
+            keys: Arc::new(RwLock::new(keys)),
+        })
+    }
+
+    pub(crate) async fn authenticate(
+        &self,
+        request: &HttpRequest,
+    ) -> Result<String, AuthenticatorError> {
+        let authorization = request
+            .headers()
+            .get("Authorization")
+            .and_then(|value| value.to_str().ok())
+            .and_then(|value| value.strip_prefix("Bearer "))
+            .ok_or(AuthenticatorError::Authorization)?;
+
+        let header = decode_header(authorization).map_err(AuthenticatorError::Token)?;
+        if header.alg != Algorithm::RS256 {
+            return Err(AuthenticatorError::Authorization);
+        }
+
+        let key_id = header.kid.ok_or(AuthenticatorError::UnknownKey)?;
+        let key = self.key_for(&key_id).await?;
+
+        let mut validation = Validation::new(Algorithm::RS256);
+        validation.set_issuer(&[self.issuer.as_str()]);
+        validation.set_audience(&[self.audience.as_str()]);
+
+        let token = decode::<Claims>(authorization, &key, &validation)
+            .map_err(AuthenticatorError::Token)?;
+
+        Ok(token.claims.sub)
+    }
+
+    async fn key_for(&self, key_id: &str) -> Result<DecodingKey, AuthenticatorError> {
+        if let Some(key) = self.keys.read().await.get(key_id).cloned() {
+            return Ok(key);
+        }
+
+        // Zitadel can rotate signing keys. Refresh only when a token references
+        // a key that is not in the current cache.
+        let keys = load_keys(&self.client, &self.jwks_uri).await?;
+        let key = keys
+            .get(key_id)
+            .cloned()
+            .ok_or(AuthenticatorError::UnknownKey)?;
+        *self.keys.write().await = keys;
+
+        Ok(key)
+    }
+}
+
+async fn load_keys(
+    client: &Client,
+    jwks_uri: &str,
+) -> Result<HashMap<String, DecodingKey>, AuthenticatorError> {
+    let jwks = client
+        .get(jwks_uri)
+        .send()
+        .await
+        .map_err(AuthenticatorError::Jwks)?
+        .error_for_status()
+        .map_err(AuthenticatorError::Jwks)?
+        .json::<Jwks>()
+        .await
+        .map_err(AuthenticatorError::Jwks)?;
+
+    jwks.keys
+        .into_iter()
+        .map(|key| {
+            DecodingKey::from_rsa_components(&key.n, &key.e)
+                .map(|decoding_key| (key.kid, decoding_key))
+                .map_err(AuthenticatorError::SigningKey)
+        })
+        .collect()
+}

src/config.rs

@@ -0,0 +1,36 @@
+//! Application configuration loaded from the local `config.toml` file.
+//!
+//! Keeping configuration in one typed structure makes the values used by the
+//! HTTP server and Zitadel authentication explicit, instead of reading
+//! environment variables throughout the application.
+
+use config::{Config, ConfigError, File};
+use serde::Deserialize;
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct Settings {
+    pub server: ServerSettings,
+    pub zitadel: ZitadelSettings,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct ServerSettings {
+    pub host: String,
+    pub port: u16,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct ZitadelSettings {
+    pub issuer_url: String,
+    pub audience: String,
+}
+
+impl Settings {
+    /// Load and deserialize the required repository-local configuration file.
+    pub fn load() -> Result<Self, ConfigError> {
+        Config::builder()
+            .add_source(File::with_name("config.toml"))
+            .build()?
+            .try_deserialize()
+    }
+}

src/graphql.rs

@@ -0,0 +1,64 @@
+//! GraphQL schema and the protected HTTP handler.
+//!
+//! Authentication is deliberately performed at the HTTP boundary before the
+//! request reaches a resolver. The authenticated subject is then attached to
+//! the async-graphql request context for future authorization checks.
+
+use actix_web::{HttpRequest, error::ErrorUnauthorized, web};
+use async_graphql::{EmptyMutation, EmptySubscription, Object, Schema};
+use async_graphql_actix_web::{GraphQLRequest, GraphQLResponse};
+
+use crate::auth::{Authenticator, AuthenticatorError};
+
+pub(crate) struct QueryRoot;
+
+#[Object]
+impl QueryRoot {
+    async fn hello(&self) -> &str {
+        "Hello, World!"
+    }
+}
+
+pub(crate) type AppSchema = Schema<QueryRoot, EmptyMutation, EmptySubscription>;
+
+pub(crate) fn build_schema() -> AppSchema {
+    Schema::build(QueryRoot, EmptyMutation, EmptySubscription).finish()
+}
+
+pub(crate) async fn graphql_handler(
+    schema: web::Data<AppSchema>,
+    authenticator: web::Data<Authenticator>,
+    request: HttpRequest,
+    graphql_request: GraphQLRequest,
+) -> Result<GraphQLResponse, actix_web::Error> {
+    let subject = authenticator
+        .authenticate(&request)
+        .await
+        .map_err(|error| {
+            log_authentication_failure(&error);
+            ErrorUnauthorized("invalid access token")
+        })?;
+
+    Ok(schema
+        .execute(graphql_request.into_inner().data(subject))
+        .await
+        .into())
+}
+
+fn log_authentication_failure(error: &AuthenticatorError) {
+    eprintln!("GraphQL authentication failed: {error}");
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use async_graphql::Request;
+
+    #[actix_web::test]
+    async fn hello_query_returns_expected_message() {
+        let schema = build_schema();
+        let response = schema.execute(Request::new("{ hello }")).await;
+
+        assert_eq!(response.data.into_json().unwrap()["hello"], "Hello, World!");
+    }
+}

src/main.rs

@@ -0,0 +1,36 @@
+mod auth;
+mod config;
+mod graphql;
+
+use std::io;
+
+use actix_web::{App, HttpServer, web};
+use auth::Authenticator;
+use config::Settings;
+use graphql::{build_schema, graphql_handler};
+use reqwest::Client;
+
+#[actix_web::main]
+async fn main() -> io::Result<()> {
+    let settings = Settings::load().map_err(|error| io::Error::other(error.to_string()))?;
+    let authenticator = Authenticator::from_config(Client::new(), &settings.zitadel)
+        .await
+        .map_err(|error| io::Error::other(error.to_string()))?;
+    let schema = build_schema();
+    let address = (settings.server.host, settings.server.port);
+
+    println!(
+        "GraphQL server listening on http://{}:{}/graphql",
+        address.0, address.1
+    );
+
+    HttpServer::new(move || {
+        App::new()
+            .app_data(web::Data::new(schema.clone()))
+            .app_data(web::Data::new(authenticator.clone()))
+            .route("/graphql", web::post().to(graphql_handler))
+    })
+    .bind(address)?
+    .run()
+    .await
+}

web/.env.example

@@ -0,0 +1,3 @@
+VITE_ZITADEL_AUTHORITY=https://your-instance.zitadel.cloud
+VITE_ZITADEL_CLIENT_ID=your-spa-client-id
+VITE_ZITADEL_PROJECT_ID=your-zitadel-project-id

web/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+.env.*
+!.env.example
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

web/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

web/README.md

@@ -0,0 +1,12 @@
+# Web
+
+Minimal Vue SPA for the Zitadel-protected GraphQL API.
+
+## Local setup
+
+1. Copy `.env.example` to `.env.local` and set the Zitadel authority, SPA client ID, and project ID.
+2. Configure `http://localhost:5173/callback` as the Zitadel redirect URI.
+3. Start the Rust API from the repository root with `cargo run`.
+4. Start the frontend with `pnpm dev`.
+
+The Vite development server proxies `/graphql` to `http://127.0.0.1:8080/graphql`.

web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "oidc-client-ts": "^3.4.1",
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vue-tsc": "^3.3.11"
+  }
+}

web/pnpm-lock.yaml

@@ -0,0 +1,755 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      oidc-client-ts:
+        specifier: ^3.4.1
+        version: 3.5.0
+      vue:
+        specifier: ^3.5.42
+        version: 3.5.43([email protected])
+    devDependencies:
+      '@types/node':
+        specifier: ^24.13.3
+        version: 24.13.6
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.8
+        version: 6.0.9([email protected](@types/[email protected]))([email protected]([email protected]))
+      '@vue/tsconfig':
+        specifier: ^0.9.1
+        version: 0.9.1([email protected])([email protected]([email protected]))
+      typescript:
+        specifier: ~6.0.2
+        version: 6.0.3
+      vite:
+        specifier: ^8.3.0
+        version: 8.3.0(@types/[email protected])
+      vue-tsc:
+        specifier: ^3.3.11
+        version: 3.3.11([email protected])
+
+packages:
+
+  '@babel/[email protected]':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/[email protected]':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/[email protected]':
+    resolution: {integrity: sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/[email protected]':
+    resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@jridgewell/[email protected]':
+    resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==}
+
+  '@oxc-project/[email protected]':
+    resolution: {integrity: sha512-rDS5/31E9HfPl/CIzGrn0DOlvBbXFseQ5URJ9sYMfstbKLD/c6Gm9vmRzRGDdAXyOIL4zmO37lc9RIwYqVruZw==}
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-tNISae1QEf/vkb3xkRcjV5SEdzPE97We5IVaa2Z8jSszQPZ8U60B/YCYpw4QI7VidYsBtKavczXf+DyDs9WGxw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-YC8YsI30o606GTZi0VyzYlsDKFP8W61i/QzayHDkLbNEz/IShqAmTa+hsJRj13xTHA0H+6fk4b2UmGn+Q/cMlg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-IwhlH3qK5urrY8hZiEgGkHKEFN901p/p2bjxCxJlr4GyNnF7wYpUvK+Y43uaRYuC4hpfjzbR3SJC3arX1jGvmw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-XxpJfVzFh+jilRxIXUqcfYAYcunIc/XEzIizsOL1fcJee5Sf7H3mH8WlLmfHfluz5amqR88QQo9izKtmMlavAw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-kSfvhmgeWyfkbT3p/1s5vSgboogoah2zkm9fX2zjg2hHxSV7T4KhMWRUUaRk4OXNqoD3QAUeRqLcs1aZOK4U1g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-1RVzG17pxqbTfYLC352JlLt6kKLG+6Hr30n8DlIJqsnV5luUDd2Qdx9Ayw1Cabfyb1K9k0jXEZ7evxkRoT+uiw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-BXqPvZ2drqVD+/Z8UpKwcs4Mp7grM+eGFku4CAEKrEtcbAsUpzREphK1sogCRZGreVPiMkiiBtw0n3TPteuqvw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-11vWvo8YDwLzukt27J3aYDWU+gg2P7J+ZOmiJ0hkF5BXZDW7pVya7r40MXDy6ya0i9KamoENSVKIugvJNgFXIA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-a1tijMkdwsIARtc0F39ApURROkf3NwqinI6TOiSSWCTR7dT96dffNvMUtDHnq64wKNTIZOIlzKrFvvFUznJiyw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-x6SQNdAvv4c3hWqTMaWuawzMX9myaCs/yEmlGsxJzkdClnHW7FbrjQuSiRDhuSYzEYoEMhsaJy9qHG/XNemJPQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-9s0AZ8BFK5/n7B/TBoa2yJE3gI3KURrbXcPBlsAsvjU4VeJKgE90y1YtNxyEUIcHPQkg6/yfF3qihUrcM/Kf0Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-P7VWAmV+WdJluH7ovnRGoiv2i8To7GAZ+kGzfGup635cyL7SyYl3lSUaA3Gp5THf0n/Co5EyEqb2zbqq+nMOHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-1qixtsE4BK8h+yS3BfmZ09UhA7O/N4IACva6YBr7EBvCJraByTuRcgOTaiA62Tm0vey3UcKXLOaoGHtYmNGEVg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-ok8IQjcEPs1AKZfuEUznVBrJw+gK4soq+bx8b1X2XoMqVClarc1q5JDmVtWXY1xfr6ZuHTAsPXHTgTrqKTZeww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-Ip2mXoU0hM0boq3Rf+ekuT653OROSo6aSYcPT1VHE4q52KvyxgFkQgrgb/IEsxOuvQ2fZZbs8khJAyCEPM24/g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/[email protected]':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-SGrw/h3KPFshy3OE6ZL53LMBG5vGQQ8/gIpiqz/kRZhPJ7HgwCEs8LBuNtWLa8dvGZVpSF7+Bf+c11HUrCb/yg==}
+
+  '@vitejs/[email protected]':
+    resolution: {integrity: sha512-rD/MORlhaZMlXWW0rEn4FB4wMinWC0z/D7Ye160S5+Rs1mC8ZDAdcDp4SjKfUhG5t8q1ktcPVw4xuTkPRlzrSA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.2.25
+
+  '@volar/[email protected]':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/[email protected]':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/[email protected]':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-zdiLhnbe1QQqgDT8xZMpNmyqZ3qlI+/Q/FHQco57Kwl/b05HhCzN6eVGN9QU9rbga4CrS0H5SYY8VGHZCt/1Hg==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-PEZoAk3NQmsn/ejMzSOCyTYqwGqczrWm70PuhBKjjv1+TCoQAaO/zOqNwjV+honlNstT5ILxtc+8r8UUfj+iEQ==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-FCbrG3XNCRl+js3huuKx4IVHBLTvMkJhVepjbxSPu1gn4yWLaYtGNQdjJGZaMytXB6qb76qQDDmDSLy/vkmleQ==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-GF62orf7KiJX9RqrHNGrYBudsQGD0OhJ5nDs90O8UiDuS40+YMYomiXu6w6EuvtXuRDc3MSNis3EaaSKAVSWpg==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-QJmpliwAVpC/OxubIByPAhNzsQPRc8/gxlN2qnVzVfIMjMDz/9RnXRFoetjz5yEgXVXyp4LqhXq3V53PjmNzFw==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-G/c9GyOZNI2jVaaS6OX1EF1SSFSv7H0ERqNTl4+DTFMlZmB5eVAB53aLQNam/7NL2NPtaDD7RdVrzf8uJzMuOA==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-hU6U6VnVhBGQDpvlnnDlIB8ZGJBiOcgk2lh/0InltHiz3D8oSkluvuvY+do1G2H3+udeKFsmaBlgVYP7gXQzEw==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-Bb2Jc0YjjJdMt1SJmb9b2L/IWd3I8lIT9x9eS/xvvP9CiVgna0ffua74xKRmt4/uSJ+0r4iN8ex1jrqkhQGWQw==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-l2Ygjv9NehV94PSBxNWsAHC0j/eIIKbn92mBuWXAPGLnn6HfJ6MH5ubsd+Nk0YoZ5FRuxWI1P2VSoh+dbPQhCQ==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-uksS7YGMR5NZyr4JNq0Rp+QyLns0ueaz20KwzIPW9R0LH1Vnt4E+XUM29PNseEbf1www2gOuhuDi5AKOIXag9Q==}
+
+  '@vue/[email protected]':
+    resolution: {integrity: sha512-buvjm+9NzLCJL29KY1j1991YYJ5e6275OiK+G4jtmfIb+z4POywbdm0wXusT9adVWqe0xqg70TbI7+mRx4uU9w==}
+    peerDependencies:
+      typescript: '>= 5.8'
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue:
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
+
+  [email protected]:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  [email protected]:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  [email protected]:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  [email protected]:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  [email protected]:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
+    engines: {node: '>=18'}
+
+  [email protected]:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  [email protected]:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  [email protected]:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  [email protected]:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  [email protected]:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  [email protected]:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  [email protected]:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  [email protected]:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  [email protected]:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  [email protected]:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  [email protected]:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  [email protected]:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  [email protected]:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  [email protected]:
+    resolution: {integrity: sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  [email protected]:
+    resolution: {integrity: sha512-l2q8l9CTCTOlbX+AnK4p3M+4CEpKpyQhle6blQkdFhm0IsBqsxm15bYaSa11G7pWdsYr6epdsRZxJpCyCRbT8A==}
+    engines: {node: '>=18'}
+
+  [email protected]:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  [email protected]:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  [email protected]:
+    resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  [email protected]:
+    resolution: {integrity: sha512-hx/Pv0N1haXRb11qkfnK5MXB/iqr7i0yjWQqmO9uHqZpBgQSqzc8UsSnEpalsh+j1I8qQ2CkXAkJC8Br3dKSlg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  [email protected]:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  [email protected]:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+
+  [email protected]:
+    resolution: {integrity: sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.7.1
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg==}
+
+  [email protected]:
+    resolution: {integrity: sha512-gOb0B9rtU2+f1dszwPqSH5kAieIF9ReeLhD3kSRNHv5WZZUQz/JdVXW0RTdqhNTMlQkqKzrTTviqKr/4FYZraQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  [email protected]:
+    resolution: {integrity: sha512-o5qZoksdnjIKvW1srZ3ab7pcDNYAerBjRe54D0LBLfRdCYFrSgBHVXokMas35czQc0//lmx4/tuY4ZNQ+Rf2Ng==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+snapshots:
+
+  '@babel/[email protected]': {}
+
+  '@babel/[email protected]': {}
+
+  '@babel/[email protected]':
+    dependencies:
+      '@babel/types': 7.29.8
+
+  '@babel/[email protected]':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@jridgewell/[email protected]': {}
+
+  '@oxc-project/[email protected]': {}
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]':
+    optional: true
+
+  '@rolldown/[email protected]': {}
+
+  '@types/[email protected]':
+    dependencies:
+      undici-types: 7.18.2
+
+  '@vitejs/[email protected]([email protected](@types/[email protected]))([email protected]([email protected]))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.3.0(@types/[email protected])
+      vue: 3.5.43([email protected])
+
+  '@volar/[email protected]':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/[email protected]': {}
+
+  '@volar/[email protected]([email protected])':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.2.0
+    optionalDependencies:
+      typescript: 6.0.3
+
+  '@vue/[email protected]':
+    dependencies:
+      '@babel/parser': 7.29.9
+      '@vue/shared': 3.5.43
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/[email protected]':
+    dependencies:
+      '@vue/compiler-core': 3.5.43
+      '@vue/shared': 3.5.43
+
+  '@vue/[email protected]':
+    dependencies:
+      '@babel/parser': 7.29.9
+      '@vue/compiler-core': 3.5.43
+      '@vue/compiler-dom': 3.5.43
+      '@vue/compiler-ssr': 3.5.43
+      '@vue/shared': 3.5.43
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.28
+      source-map-js: 1.2.1
+
+  '@vue/[email protected]':
+    dependencies:
+      '@vue/compiler-dom': 3.5.43
+      '@vue/shared': 3.5.43
+
+  '@vue/[email protected]':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.43
+      '@vue/shared': 3.5.43
+      alien-signals: 3.2.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.7
+
+  '@vue/[email protected]':
+    dependencies:
+      '@vue/shared': 3.5.43
+
+  '@vue/[email protected]':
+    dependencies:
+      '@vue/reactivity': 3.5.43
+      '@vue/shared': 3.5.43
+
+  '@vue/[email protected]':
+    dependencies:
+      '@vue/reactivity': 3.5.43
+      '@vue/runtime-core': 3.5.43
+      '@vue/shared': 3.5.43
+      csstype: 3.2.3
+
+  '@vue/[email protected]':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.43
+      '@vue/runtime-dom': 3.5.43
+      '@vue/shared': 3.5.43
+
+  '@vue/[email protected]': {}
+
+  '@vue/[email protected]([email protected])([email protected]([email protected]))':
+    optionalDependencies:
+      typescript: 6.0.3
+      vue: 3.5.43([email protected])
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]([email protected]):
+    optionalDependencies:
+      picomatch: 4.0.7
+
+  [email protected]:
+    optional: true
+
+  [email protected]: {}
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    optional: true
+
+  [email protected]:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
+  [email protected]:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      jwt-decode: 4.0.0
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      nanoid: 3.3.19
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  [email protected]:
+    dependencies:
+      '@oxc-project/types': 0.150.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.9
+      '@rolldown/binding-android-arm64': 1.2.9
+      '@rolldown/binding-darwin-arm64': 1.2.9
+      '@rolldown/binding-darwin-x64': 1.2.9
+      '@rolldown/binding-freebsd-x64': 1.2.9
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.9
+      '@rolldown/binding-linux-arm64-gnu': 1.2.9
+      '@rolldown/binding-linux-arm64-musl': 1.2.9
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.9
+      '@rolldown/binding-linux-s390x-gnu': 1.2.9
+      '@rolldown/binding-linux-x64-gnu': 1.2.9
+      '@rolldown/binding-linux-x64-musl': 1.2.9
+      '@rolldown/binding-openharmony-arm64': 1.2.9
+      '@rolldown/binding-win32-arm64-msvc': 1.2.9
+      '@rolldown/binding-win32-x64-msvc': 1.2.9
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      fdir: 6.5.0([email protected])
+      picomatch: 4.0.7
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected](@types/[email protected]):
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.7
+      postcss: 8.5.28
+      rolldown: 1.2.9
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 24.13.6
+      fsevents: 2.3.3
+
+  [email protected]: {}
+
+  [email protected]([email protected]):
+    dependencies:
+      '@volar/typescript': 2.4.28([email protected])
+      '@vue/language-core': 3.3.11
+      typescript: 6.0.3
+
+  [email protected]([email protected]):
+    dependencies:
+      '@vue/compiler-dom': 3.5.43
+      '@vue/compiler-sfc': 3.5.43
+      '@vue/runtime-dom': 3.5.43
+      '@vue/server-renderer': 3.5.43
+      '@vue/shared': 3.5.43
+    optionalDependencies:
+      typescript: 6.0.3

web/public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

web/src/App.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import HelloResult from './components/HelloResult.vue'
+import LoginPanel from './components/LoginPanel.vue'
+import { useAuth } from './auth/useAuth'
+import { loadHello } from './graphql/client'
+
+const { user, loading: authLoading, error: authError, isAuthenticated, initialize, login, logout } = useAuth()
+const hello = ref<string | null>(null)
+const graphqlLoading = ref(false)
+const graphqlError = ref<string | null>(null)
+
+async function loadAuthenticatedData() {
+  if (!user.value || !isAuthenticated.value) {
+    hello.value = null
+    return
+  }
+
+  graphqlLoading.value = true
+  graphqlError.value = null
+
+  try {
+    hello.value = await loadHello(user.value.access_token)
+  } catch (cause) {
+    graphqlError.value = cause instanceof Error ? cause.message : 'GraphQL-Anfrage fehlgeschlagen.'
+  } finally {
+    graphqlLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  await initialize()
+  await loadAuthenticatedData()
+})
+</script>
+
+<template>
+  <main>
+    <section class="card">
+      <p class="eyebrow">Vue + Zitadel + GraphQL</p>
+      <h1>Geschützte GraphQL-Daten</h1>
+
+      <LoginPanel
+        :user="user"
+        :loading="authLoading"
+        :authenticated="isAuthenticated"
+        @login="login"
+        @logout="logout"
+      />
+
+      <HelloResult
+        v-if="isAuthenticated"
+        :message="hello"
+        :loading="graphqlLoading"
+        :error="graphqlError"
+      />
+
+      <p v-if="authError" class="error">{{ authError }}</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+:global(*) {
+  box-sizing: border-box;
+}
+
+:global(body) {
+  margin: 0;
+  min-width: 320px;
+  background: #f3f0ea;
+  color: #24221f;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+main {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 2rem;
+}
+
+.card {
+  width: min(100%, 34rem);
+  padding: 3rem;
+  border: 1px solid #d9d1c4;
+  border-radius: 1.5rem;
+  background: #fffdf9;
+  box-shadow: 0 1.5rem 4rem rgb(52 43 30 / 10%);
+}
+
+.eyebrow {
+  margin: 0 0 1rem;
+  color: #9b4d27;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0 0 1rem;
+  max-width: 12ch;
+  font-family: Georgia, serif;
+  font-size: clamp(2.2rem, 8vw, 4rem);
+  font-weight: 500;
+  line-height: 0.95;
+}
+
+p {
+  line-height: 1.6;
+}
+
+:global(button) {
+  margin-top: 1.5rem;
+  padding: 0.8rem 1.1rem;
+  border: 0;
+  border-radius: 999px;
+  background: #24221f;
+  color: #fffdf9;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+}
+
+:global(button:hover) {
+  background: #9b4d27;
+}
+
+:global(button.secondary) {
+  background: transparent;
+  color: #24221f;
+  outline: 1px solid #b9afa1;
+}
+
+.error {
+  margin-top: 1.5rem;
+  color: #a32626;
+}
+
+@media (max-width: 480px) {
+  main {
+    padding: 1rem;
+  }
+
+  .card {
+    padding: 2rem 1.5rem;
+  }
+}
+</style>

web/src/auth/oidc.ts

@@ -0,0 +1,45 @@
+import {
+  UserManager,
+  WebStorageStateStore,
+  type User,
+  type UserManagerSettings,
+} from 'oidc-client-ts'
+
+const authority = import.meta.env.VITE_ZITADEL_AUTHORITY
+const clientId = import.meta.env.VITE_ZITADEL_CLIENT_ID
+const projectId = import.meta.env.VITE_ZITADEL_PROJECT_ID
+
+if (!authority || !clientId || !projectId) {
+  throw new Error(
+    'Missing OIDC configuration. Set VITE_ZITADEL_AUTHORITY, VITE_ZITADEL_CLIENT_ID, and VITE_ZITADEL_PROJECT_ID.',
+  )
+}
+
+const settings: UserManagerSettings = {
+  authority: authority.replace(/\/$/, ''),
+  client_id: clientId,
+  redirect_uri: `${window.location.origin}/callback`,
+  post_logout_redirect_uri: window.location.origin,
+  response_type: 'code',
+  scope: `openid profile email urn:zitadel:iam:org:project:id:${projectId}:aud`,
+  // sessionStorage is sufficient for this SPA and avoids persisting tokens across browser sessions.
+  userStore: new WebStorageStateStore({ store: window.sessionStorage }),
+}
+
+const userManager = new UserManager(settings)
+
+export function startLogin(): Promise<void> {
+  return userManager.signinRedirect()
+}
+
+export function finishLogin(): Promise<User> {
+  return userManager.signinRedirectCallback()
+}
+
+export function startLogout(): Promise<void> {
+  return userManager.signoutRedirect()
+}
+
+export function loadUser(): Promise<User | null> {
+  return userManager.getUser()
+}

web/src/auth/useAuth.ts

@@ -0,0 +1,56 @@
+import { computed, ref } from 'vue'
+import type { User } from 'oidc-client-ts'
+
+import { finishLogin, loadUser, startLogin, startLogout } from './oidc'
+
+export function useAuth() {
+  const user = ref<User | null>(null)
+  const loading = ref(true)
+  const error = ref<string | null>(null)
+
+  const isAuthenticated = computed(() => Boolean(user.value && !user.value.expired))
+
+  async function initialize() {
+    loading.value = true
+    error.value = null
+
+    try {
+      if (window.location.pathname === '/callback') {
+        user.value = await finishLogin()
+        window.history.replaceState({}, document.title, '/')
+      } else {
+        user.value = await loadUser()
+      }
+
+      if (user.value?.expired) {
+        user.value = null
+      }
+    } catch (cause) {
+      error.value = cause instanceof Error ? cause.message : 'Anmeldung fehlgeschlagen.'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function login() {
+    error.value = null
+
+    try {
+      await startLogin()
+    } catch (cause) {
+      error.value = cause instanceof Error ? cause.message : 'Anmeldung fehlgeschlagen.'
+    }
+  }
+
+  async function logout() {
+    error.value = null
+
+    try {
+      await startLogout()
+    } catch (cause) {
+      error.value = cause instanceof Error ? cause.message : 'Abmeldung fehlgeschlagen.'
+    }
+  }
+
+  return { user, loading, error, isAuthenticated, initialize, login, logout }
+}

web/src/components/HelloResult.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  message: string | null
+  loading: boolean
+  error: string | null
+}>()
+</script>
+
+<template>
+  <p v-if="loading">Lade GraphQL-Daten...</p>
+  <p v-else-if="error" class="error">{{ error }}</p>
+  <p v-else-if="message" class="result">{{ message }}</p>
+  <p v-else>Keine Antwort von GraphQL erhalten.</p>
+</template>
+
+<style scoped>
+.result {
+  margin: 2rem 0;
+  color: #9b4d27;
+  font-family: Georgia, serif;
+  font-size: 2.5rem;
+}
+
+.error {
+  margin-top: 1.5rem;
+  color: #a32626;
+}
+</style>

web/src/components/LoginPanel.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { User } from 'oidc-client-ts'
+
+defineProps<{
+  user: User | null
+  loading: boolean
+  authenticated: boolean
+}>()
+
+defineEmits<{
+  login: []
+  logout: []
+}>()
+</script>
+
+<template>
+  <p v-if="loading">Lade Anmeldung...</p>
+
+  <template v-else-if="authenticated && user">
+    <p class="status">Angemeldet als {{ user.profile.email ?? user.profile.sub }}</p>
+    <button class="secondary" type="button" @click="$emit('logout')">Abmelden</button>
+  </template>
+
+  <template v-else>
+    <p>Zum Laden der GraphQL-Daten ist eine Anmeldung erforderlich.</p>
+    <button type="button" @click="$emit('login')">Mit Zitadel anmelden</button>
+  </template>
+</template>
+
+<style scoped>
+.status {
+  color: #635b51;
+}
+</style>

web/src/graphql/client.ts

@@ -0,0 +1,34 @@
+interface HelloResponse {
+  data?: {
+    hello: string
+  }
+  errors?: Array<{
+    message: string
+  }>
+}
+
+export async function loadHello(accessToken: string): Promise<string> {
+  const response = await fetch('/graphql', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${accessToken}`,
+    },
+    body: JSON.stringify({ query: '{ hello }' }),
+  })
+
+  if (!response.ok) {
+    throw new Error(`GraphQL request failed with status ${response.status}.`)
+  }
+
+  const result = (await response.json()) as HelloResponse
+  if (result.errors?.length) {
+    throw new Error(result.errors[0].message || 'GraphQL request failed.')
+  }
+
+  if (!result.data) {
+    throw new Error('GraphQL response did not contain data.')
+  }
+
+  return result.data.hello
+}

web/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

web/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

web/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

web/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,15 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    proxy: {
+      '/graphql': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+})