@zitadel/sdk-solid 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,54 @@
+# @zitadel/sdk-solid
+
+Solid 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 { ZitadelLogin, configureZitadel } from '@zitadel/sdk-solid';
+
+const project = configureZitadel({
+  projectId: import.meta.env.VITE_ZITADEL_PROJECT_ID,
+  proxyPath: '/__nextgen',
+});
+
+export default function LoginPage() {
+  return <ZitadelLogin project={project} purpose="login" postSignInUrl="/" />;
+}
+```
+
+`<ZitadelLogout project={project} postSignOutUrl="/login" />` works the same way.
+
+The widget's flow events are also surfaced as optional callbacks:
+`onFlowStep`, `onFlowInput`, `onFlowComplete`, and `onFlowError`.
+
+## 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,58 @@
+import { ZitadelLogin as ZitadelLoginElement, ZitadelLogout as ZitadelLogoutElement } from '@zitadel/components';
+import { JSX } from 'solid-js';
+import { configureZitadel, getApi, getZitadelConfig, ZitadelConfig, ZitadelProject } from '@zitadel/api/config';
+import { ZitadelFlowCompleteDetail, ZitadelFlowErrorDetail, ZitadelFlowInputDetail, ZitadelFlowStepDetail, ZitadelLoginProps, ZitadelLogoutProps, ZitadelSignoutDetail } from './types';
+declare module "solid-js" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "zitadel-login": Omit<HTMLAttributes<HTMLElement>, "ref"> & {
+                ref?: ZitadelLoginElement | ((el: ZitadelLoginElement) => void);
+                "prop:project"?: ZitadelProject;
+                "project-id"?: string;
+                "proxy-path"?: string;
+                purpose?: string;
+                "post-sign-in-url"?: string;
+                "on:zitadel-flow-step"?: (event: CustomEvent<ZitadelFlowStepDetail>) => void;
+                "on:zitadel-flow-input"?: (event: CustomEvent<ZitadelFlowInputDetail>) => void;
+                "on:zitadel-flow-complete"?: (event: CustomEvent<ZitadelFlowCompleteDetail>) => void;
+                "on:zitadel-flow-error"?: (event: CustomEvent<ZitadelFlowErrorDetail>) => void;
+            };
+            "zitadel-logout": Omit<HTMLAttributes<HTMLElement>, "ref"> & {
+                ref?: ZitadelLogoutElement | ((el: ZitadelLogoutElement) => void);
+                "prop:project"?: ZitadelProject;
+                "project-id"?: string;
+                "proxy-path"?: string;
+                "post-sign-out-url"?: string;
+                "on:zitadel-signout"?: (event: CustomEvent<ZitadelSignoutDetail>) => void;
+            };
+        }
+    }
+}
+export { configureZitadel, getApi, getZitadelConfig };
+export type { ZitadelConfig, ZitadelProject };
+export * from './types';
+/**
+ * Solid component wrapping the `<zitadel-login>` web component. Binds the
+ * {@link ZitadelProject} handle as a DOM property (or the discrete project id /
+ * proxy path as attributes) and forwards the widget's `zitadel-*` events as
+ * optional callbacks.
+ *
+ * A forwarded `ref` resolves to the underlying `<zitadel-login>` DOM element,
+ * so consumers can imperatively access the upgraded web component.
+ */
+export declare function ZitadelLogin(props: ZitadelLoginProps & {
+    ref?: ZitadelLoginElement | ((el: ZitadelLoginElement) => void);
+}): JSX.Element;
+/**
+ * Solid component wrapping the `<zitadel-logout>` web component. Binds the
+ * {@link ZitadelProject} handle as a DOM property (or the discrete project id /
+ * proxy path as attributes) and forwards the widget's `zitadel-signout` event
+ * as an optional callback.
+ *
+ * A forwarded `ref` resolves to the underlying `<zitadel-logout>` DOM element,
+ * so consumers can imperatively access the upgraded web component.
+ */
+export declare function ZitadelLogout(props: ZitadelLogoutProps & {
+    ref?: ZitadelLogoutElement | ((el: ZitadelLogoutElement) => void);
+}): JSX.Element;
+//# 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;AAE7B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,EACL,gBAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EACV,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,OAAO,QAAQ,UAAU,CAAC;IAExB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG;gBAC1D,GAAG,CAAC,EAAE,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC,CAAC;gBAChE,cAAc,CAAC,EAAE,cAAc,CAAC;gBAChC,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;gBAC5B,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;gBAC7E,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,sBAAsB,CAAC,KAAK,IAAI,CAAC;gBAC/E,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;gBACrF,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,sBAAsB,CAAC,KAAK,IAAI,CAAC;aAChF,CAAC;YACF,gBAAgB,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG;gBAC3D,GAAG,CAAC,EAAE,oBAAoB,GAAG,CAAC,CAAC,EAAE,EAAE,oBAAoB,KAAK,IAAI,CAAC,CAAC;gBAClE,cAAc,CAAC,EAAE,cAAc,CAAC;gBAChC,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;gBAC7B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;aAC3E,CAAC;SACH;KACF;CACF;AAED,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC;AAC9C,cAAc,SAAS,CAAC;AAExB;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,iBAAiB,GAAG;IACzB,GAAG,CAAC,EAAE,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC,CAAC;CACjE,GACA,GAAG,CAAC,OAAO,CAeb;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,kBAAkB,GAAG;IAC1B,GAAG,CAAC,EAAE,oBAAoB,GAAG,CAAC,CAAC,EAAE,EAAE,oBAAoB,KAAK,IAAI,CAAC,CAAC;CACnE,GACA,GAAG,CAAC,OAAO,CAWb"}

package/dist/index.js

@@ -0,0 +1,44 @@
+import { addEventListener as d, use as v, getOwner as u, effect as g, template as c } from "solid-js/web";
+import "@zitadel/components";
+import { configureZitadel as h, getApi as F, getZitadelConfig as P } from "@zitadel/api/config";
+var w = /* @__PURE__ */ c("<zitadel-login>", !0, !1, !1), m = /* @__PURE__ */ c("<zitadel-logout>", !0, !1, !1);
+function I(o) {
+  return (() => {
+    var t = w();
+    d(t, "zitadel-flow-error", (e) => o.onFlowError?.(e.detail)), d(t, "zitadel-flow-complete", (e) => o.onFlowComplete?.(e.detail)), d(t, "zitadel-flow-input", (e) => o.onFlowInput?.(e.detail)), d(t, "zitadel-flow-step", (e) => o.onFlowStep?.(e.detail));
+    var i = o.ref;
+    return typeof i == "function" ? v(i, t) : o.ref = t, t._$owner = u(), g((e) => {
+      var r = o.project, l = o.projectId, a = o.proxyPath, n = o.purpose ?? "login", f = o.postSignInUrl;
+      return r !== e.e && (t.project = e.e = r), l !== e.t && (t.projectId = e.t = l), a !== e.a && (t.proxyPath = e.a = a), n !== e.o && (t.purpose = e.o = n), f !== e.i && (t.postSignInUrl = e.i = f), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), t;
+  })();
+}
+function x(o) {
+  return (() => {
+    var t = m();
+    d(t, "zitadel-signout", (e) => o.onSignout?.(e.detail));
+    var i = o.ref;
+    return typeof i == "function" ? v(i, t) : o.ref = t, t._$owner = u(), g((e) => {
+      var r = o.project, l = o.projectId, a = o.proxyPath, n = o.postSignOutUrl;
+      return r !== e.e && (t.project = e.e = r), l !== e.t && (t.projectId = e.t = l), a !== e.a && (t.proxyPath = e.a = a), n !== e.o && (t.postSignOutUrl = e.o = n), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), t;
+  })();
+}
+export {
+  I as ZitadelLogin,
+  x as ZitadelLogout,
+  h as configureZitadel,
+  F as getApi,
+  P as 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-solid",
+  "version": "0.1.0-alpha.11",
+  "description": "Solid components for the Zitadel auth UI (client-side SPA).",
+  "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/sdk-solid#readme",
+  "bugs": {
+    "url": "https://github.com/zitadel/nextgen/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zitadel/nextgen.git",
+    "directory": "packages/sdk-solid"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "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": {
+    "solid-js": ">=1.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@eslint/json": "^0.11.0",
+    "@eslint/markdown": "^6.0.0",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^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-solid": "^0.14.5",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.0.0",
+    "solid-js": "^1.9.12",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^7.3.5",
+    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-solid": "^2.11.0",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
+}