@zitadel/sdk-svelte 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-svelte
+
+Svelte 5 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
+
+```svelte
+<script lang="ts">
+  import { ZitadelLogin, configureZitadel } from '@zitadel/sdk-svelte';
+
+  const project = configureZitadel({
+    projectId: import.meta.env.VITE_ZITADEL_PROJECT_ID,
+    proxyPath: '/__nextgen',
+  });
+</script>
+
+<ZitadelLogin {project} purpose="login" postSignInUrl="/" />
+```
+
+`<ZitadelLogout {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/ZitadelLogin.svelte.d.ts

@@ -0,0 +1,8 @@
+import '@zitadel/components';
+import type { ZitadelLogin as ZitadelLoginElement } from '@zitadel/components';
+import type { ZitadelLoginProps } from './types';
+declare const ZitadelLogin: import("svelte").Component<ZitadelLoginProps, {
+    getElement: () => ZitadelLoginElement | undefined;
+}, "">;
+type ZitadelLogin = ReturnType<typeof ZitadelLogin>;
+export default ZitadelLogin;

package/dist/ZitadelLogout.svelte.d.ts

@@ -0,0 +1,8 @@
+import '@zitadel/components';
+import type { ZitadelLogout as ZitadelLogoutElement } from '@zitadel/components';
+import type { ZitadelLogoutProps } from './types';
+declare const ZitadelLogout: import("svelte").Component<ZitadelLogoutProps, {
+    getElement: () => ZitadelLogoutElement | undefined;
+}, "">;
+type ZitadelLogout = ReturnType<typeof ZitadelLogout>;
+export default ZitadelLogout;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ZitadelLogin } from "./ZitadelLogin.svelte";
+export { default as ZitadelLogout } from "./ZitadelLogout.svelte";
+export { configureZitadel, getApi, getZitadelConfig } from "@zitadel/api/config";
+export type { ZitadelConfig, ZitadelProject } from "@zitadel/api/config";
+export * from "./types";

package/dist/index.js

@@ -0,0 +1,49 @@
+import "svelte/internal/disclose-version";
+import * as e from "svelte/internal/client";
+import "@zitadel/components";
+import { configureZitadel as h, getApi as j, getZitadelConfig as x } from "@zitadel/api/config";
+var f = e.from_html("<zitadel-login></zitadel-login>", 2);
+function z(s, t) {
+  e.push(t, !0);
+  let a = e.prop(t, "purpose", 3, "login"), i = e.state(void 0);
+  function m() {
+    return e.get(i);
+  }
+  e.user_effect(() => {
+    const o = e.get(i);
+    if (!o)
+      return;
+    const d = (r) => t.onFlowStep?.(r.detail), u = (r) => t.onFlowInput?.(r.detail), _ = (r) => t.onFlowComplete?.(r.detail), c = (r) => t.onFlowError?.(r.detail);
+    return o.addEventListener("zitadel-flow-step", d), o.addEventListener("zitadel-flow-input", u), o.addEventListener("zitadel-flow-complete", _), o.addEventListener("zitadel-flow-error", c), () => {
+      o.removeEventListener("zitadel-flow-step", d), o.removeEventListener("zitadel-flow-input", u), o.removeEventListener("zitadel-flow-complete", _), o.removeEventListener("zitadel-flow-error", c);
+    };
+  });
+  var l = { getElement: m }, n = f();
+  return e.template_effect(() => e.set_custom_element_data(n, "project", t.project)), e.template_effect(() => e.set_custom_element_data(n, "purpose", a())), e.template_effect(() => e.set_custom_element_data(n, "project-id", t.projectId)), e.template_effect(() => e.set_custom_element_data(n, "proxy-path", t.proxyPath)), e.template_effect(() => e.set_custom_element_data(n, "post-sign-in-url", t.postSignInUrl)), e.bind_this(n, (o) => e.set(i, o), () => e.get(i)), e.append(s, n), e.pop(l);
+}
+var p = e.from_html("<zitadel-logout></zitadel-logout>", 2);
+function E(s, t) {
+  e.push(t, !0);
+  let a = e.state(void 0);
+  function i() {
+    return e.get(a);
+  }
+  e.user_effect(() => {
+    const n = e.get(a);
+    if (!n)
+      return;
+    const o = (d) => t.onSignout?.(d.detail);
+    return n.addEventListener("zitadel-signout", o), () => {
+      n.removeEventListener("zitadel-signout", o);
+    };
+  });
+  var m = { getElement: i }, l = p();
+  return e.template_effect(() => e.set_custom_element_data(l, "project", t.project)), e.template_effect(() => e.set_custom_element_data(l, "project-id", t.projectId)), e.template_effect(() => e.set_custom_element_data(l, "proxy-path", t.proxyPath)), e.template_effect(() => e.set_custom_element_data(l, "post-sign-out-url", t.postSignOutUrl)), e.bind_this(l, (n) => e.set(a, n), () => e.get(a)), e.append(s, l), e.pop(m);
+}
+export {
+  z as ZitadelLogin,
+  E as ZitadelLogout,
+  h as configureZitadel,
+  j as getApi,
+  x as getZitadelConfig
+};

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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";

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@zitadel/sdk-svelte",
+  "version": "0.1.0-alpha.11",
+  "description": "Svelte components for the Zitadel auth UI (client-side SPA).",
+  "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/sdk-svelte#readme",
+  "bugs": {
+    "url": "https://github.com/zitadel/nextgen/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zitadel/nextgen.git",
+    "directory": "packages/sdk-svelte"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./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": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@eslint/json": "^0.11.0",
+    "@eslint/markdown": "^6.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@testing-library/svelte": "^5.3.1",
+    "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-svelte": "^3.0.0",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte2tsx": "^0.7.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^7.3.5",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
+}