@zitadel/sdk-qwik 0.1.0-alpha.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ZITADEL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# @zitadel/sdk-qwik
+
+Qwik components for the Zitadel auth UI, for client-side SPAs (Vite, etc.).
+
+## Requirements
+
+TypeScript ≥ 5.0 — the published type definitions re-export with `export type *`, which TypeScript introduced in 5.0.
+
+## Usage
+
+```tsx
+import { component$ } from '@builder.io/qwik';
+import { ZitadelLogin, configureZitadel } from '@zitadel/sdk-qwik';
+
+export default component$(() => {
+  const project = configureZitadel({
+    projectId: import.meta.env.VITE_ZITADEL_PROJECT_ID,
+    proxyPath: '/__nextgen',
+  });
+
+  return <ZitadelLogin project={project} purpose="login" postSignInUrl="/" />;
+});
+```
+
+`<ZitadelLogout project={project} postSignOutUrl="/login" />` works the same way.
+
+The widget's flow events are surfaced as optional QRL callbacks:
+`onFlowStep$`, `onFlowInput$`, `onFlowComplete$`, and `onFlowError$`.
+
+> The SDK binds `project` (and the discrete `projectId` / `proxyPath`) to the
+> element as DOM properties, the same as the other framework SDKs.
+
+## Proxying to the backend (deployment)
+
+The widgets call `${proxyPath}/…` same-origin (default `/__nextgen`). A SPA has no
+server, so on Vercel use `@zitadel/edge-proxy` to forward those calls:
+
+```ts
+// api/__nextgen/[...path].ts  (Vercel Edge Function)
+import { handleProxy, resolveConfig } from '@zitadel/edge-proxy';
+export const config = { runtime: 'edge' };
+const proxyConfig = resolveConfig({
+  apiUrl: process.env.NEXTGEN_API_URL ?? '',
+});
+export default (req: Request) => handleProxy(req, proxyConfig);
+```
+
+```json
+// vercel.json
+{
+  "rewrites": [
+    { "source": "/__nextgen/(.*)", "destination": "/api/__nextgen/$1" }
+  ]
+}
+```
+
+For local development you can skip the proxy and point `proxyPath` straight at the
+backend (cross-origin), e.g. `proxyPath: "http://localhost:4000"`.

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import { ZitadelLogin as ZitadelLoginElement, ZitadelLogout as ZitadelLogoutElement } from '@zitadel/components';
+import { ZitadelLoginConfig, ZitadelLoginHandlers, ZitadelLogoutConfig, ZitadelLogoutHandlers } from '@zitadel/sdk-core/types';
+import { QRL, Signal } from '@builder.io/qwik';
+import { configureZitadel, getApi, getZitadelConfig, ZitadelConfig, ZitadelProject } from '@zitadel/api/config';
+export { configureZitadel, getApi, getZitadelConfig };
+export type { ZitadelConfig, ZitadelProject };
+export * from './types';
+/**
+ * Wraps each plain-callback handler from the shared SPA contract in a Qwik
+ * {@link QRL} and suffixes the prop name with `$`, so the Qwik prop set is
+ * derived from `@zitadel/sdk-core` and can never drift from the events the
+ * widget emits. Adding a contract event surfaces a new `on…$` QRL prop here.
+ */
+type Qrlify<H> = {
+    readonly [K in keyof H as `${K & string}$`]?: H[K] extends ((detail: infer D) => void) | undefined ? QRL<(detail: D) => void> : never;
+};
+/**
+ * Props for {@link ZitadelLogin}. Supply the SDK handle via {@link project}, or
+ * the discrete `projectId` / `proxyPath` the widget reads as properties — the
+ * widget uses whichever is present. The `on…$` QRL callbacks are derived from
+ * the shared {@link ZitadelLoginHandlers} contract. Pass an optional {@link ref}
+ * signal to obtain the underlying `<zitadel-login>` element imperatively.
+ */
+export type ZitadelLoginProps = ZitadelLoginConfig & Qrlify<ZitadelLoginHandlers> & {
+    /**
+     * Optional signal populated with the underlying `<zitadel-login>` element
+     * once it mounts, mirroring React's `forwardRef`. Wired alongside the
+     * component's internal host signal, so event forwarding stays intact.
+     */
+    readonly ref?: Signal<ZitadelLoginElement | undefined>;
+};
+/**
+ * Qwik component wrapping the `<zitadel-login>` web component. Binds the
+ * {@link ZitadelProject} handle as a DOM property (or the discrete project id /
+ * proxy path) and forwards the widget's `zitadel-*` events as optional
+ * callbacks. `useVisibleTask$` (eager `document-ready`, so listeners attach on
+ * load rather than on first visibility) wires the native listeners; Qwik's
+ * declarative `useOn` does not catch these programmatic custom events.
+ */
+export declare const ZitadelLogin: import('@builder.io/qwik').Component<ZitadelLoginProps>;
+/**
+ * Props for {@link ZitadelLogout}. Supply the SDK handle via {@link project}, or
+ * the discrete `projectId` / `proxyPath` the widget reads as properties — the
+ * widget uses whichever is present. The `on…$` QRL callbacks are derived from
+ * the shared {@link ZitadelLogoutHandlers} contract. Pass an optional {@link ref}
+ * signal to obtain the underlying `<zitadel-logout>` element imperatively.
+ */
+export type ZitadelLogoutProps = ZitadelLogoutConfig & Qrlify<ZitadelLogoutHandlers> & {
+    /**
+     * Optional signal populated with the underlying `<zitadel-logout>` element
+     * once it mounts, mirroring React's `forwardRef`. Wired alongside the
+     * component's internal host signal, so event forwarding stays intact.
+     */
+    readonly ref?: Signal<ZitadelLogoutElement | undefined>;
+};
+/**
+ * Qwik component wrapping the `<zitadel-logout>` web component. Binds the
+ * {@link ZitadelProject} handle as a DOM property (or the discrete project id /
+ * proxy path) and forwards the widget's `zitadel-signout` event as an optional
+ * callback.
+ */
+export declare const ZitadelLogout: import('@builder.io/qwik').Component<ZitadelLogoutProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,IAAI,mBAAmB,EACnC,aAAa,IAAI,oBAAoB,EACtC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAA0C,KAAK,GAAG,EAAE,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACjG,OAAO,EACL,gBAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC;AAC9C,cAAc,SAAS,CAAC;AAoBxB;;;;;GAKG;AACH,KAAK,MAAM,CAAC,CAAC,IAAI;IACf,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,IAAI,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,GAC9F,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC,GACxB,KAAK;CACV,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAChD,MAAM,CAAC,oBAAoB,CAAC,GAAG;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACxD,CAAC;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,yDAuCvB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAClD,MAAM,CAAC,qBAAqB,CAAC,GAAG;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,oBAAoB,GAAG,SAAS,CAAC,CAAC;CACzD,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,aAAa,0DA6BxB,CAAC"}

package/dist/index.qwik.mjs

@@ -0,0 +1,83 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import "@zitadel/components";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import { configureZitadel, getApi, getZitadelConfig } from "@zitadel/api/config";
+function projectProp(project, projectId, proxyPath) {
+  return {
+    project,
+    projectId,
+    proxyPath
+  };
+}
+function eventDetail(event) {
+  return event.detail;
+}
+const ZitadelLogin = component$((props) => {
+  const host = useSignal();
+  useVisibleTask$(({ track, cleanup }) => {
+    const el = track(() => host.value);
+    if (!el) {
+      return;
+    }
+    const onStep = (event) => void props.onFlowStep$?.(eventDetail(event));
+    const onInput = (event) => void props.onFlowInput$?.(eventDetail(event));
+    const onComplete = (event) => void props.onFlowComplete$?.(eventDetail(event));
+    const onError = (event) => void props.onFlowError$?.(eventDetail(event));
+    el.addEventListener("zitadel-flow-step", onStep);
+    el.addEventListener("zitadel-flow-input", onInput);
+    el.addEventListener("zitadel-flow-complete", onComplete);
+    el.addEventListener("zitadel-flow-error", onError);
+    cleanup(() => {
+      el.removeEventListener("zitadel-flow-step", onStep);
+      el.removeEventListener("zitadel-flow-input", onInput);
+      el.removeEventListener("zitadel-flow-complete", onComplete);
+      el.removeEventListener("zitadel-flow-error", onError);
+    });
+  }, {
+    strategy: "document-ready"
+  });
+  return /* @__PURE__ */ jsx("zitadel-login", {
+    ref: (el) => {
+      host.value = el;
+      if (props.ref) {
+        props.ref.value = el;
+      }
+    },
+    ...projectProp(props.project, props.projectId, props.proxyPath),
+    purpose: props.purpose ?? "login",
+    "post-sign-in-url": props.postSignInUrl
+  });
+});
+const ZitadelLogout = component$((props) => {
+  const host = useSignal();
+  useVisibleTask$(({ track, cleanup }) => {
+    const el = track(() => host.value);
+    if (!el) {
+      return;
+    }
+    const onSignout = (event) => void props.onSignout$?.(eventDetail(event));
+    el.addEventListener("zitadel-signout", onSignout);
+    cleanup(() => {
+      el.removeEventListener("zitadel-signout", onSignout);
+    });
+  }, {
+    strategy: "document-ready"
+  });
+  return /* @__PURE__ */ jsx("zitadel-logout", {
+    ref: (el) => {
+      host.value = el;
+      if (props.ref) {
+        props.ref.value = el;
+      }
+    },
+    ...projectProp(props.project, props.projectId, props.proxyPath),
+    "post-sign-out-url": props.postSignOutUrl
+  });
+});
+export {
+  ZitadelLogin,
+  ZitadelLogout,
+  configureZitadel,
+  getApi,
+  getZitadelConfig
+};

package/dist/test-setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":""}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Re-exports the shared SPA widget types from `@zitadel/sdk-core`.
+ *
+ * `export type *` keeps this surface in lockstep with the core SPA contract: a
+ * type added there is re-exported here automatically, and none can be dropped by
+ * hand. The server-middleware types live in a separate core module and stay out
+ * of the browser SDK surface.
+ */
+export type * from '@zitadel/sdk-core/types';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,mBAAmB,yBAAyB,CAAC"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@zitadel/sdk-qwik",
+  "version": "0.1.0-alpha.11",
+  "description": "Qwik components for the Zitadel auth UI (client-side SPA).",
+  "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/sdk-qwik#readme",
+  "bugs": {
+    "url": "https://github.com/zitadel/nextgen/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zitadel/nextgen.git",
+    "directory": "packages/sdk-qwik"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.qwik.mjs",
+  "qwik": "./dist/index.qwik.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.qwik.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@zitadel/api": "0.1.0-alpha.11",
+    "@zitadel/components": "0.1.0-alpha.11",
+    "@zitadel/sdk-core": "0.1.0-alpha.11"
+  },
+  "peerDependencies": {
+    "@builder.io/qwik": "^1.5.0"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "^1.19.0",
+    "@eslint/js": "^9.0.0",
+    "@eslint/json": "^0.11.0",
+    "@eslint/markdown": "^6.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-perfectionist": "^4.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-qwik": "^1.19.0",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.0.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^7.3.5",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build --mode lib",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
+}