@zitadel/sdk-react 0.1.0-alpha.9 → 1.0.0-alpha.21

package/README.md

@@ -2,6 +2,10 @@
 
 React components for the Zitadel auth UI, for client-side SPAs.
 
+## Requirements
+
+TypeScript ≥ 5.0 — the published type definitions re-export with `export type *`, which TypeScript introduced in 5.0.
+
 ## Usage
 
 ```tsx
@@ -27,31 +31,19 @@ export function ProfilePage() {
 }
 ```
 
-## Proxying to the backend (deployment)
-
-The widgets call `${proxyPath}/…` same-origin (default `/__nextgen`). A SPA has no
-server, so on Vercel (and Cloudflare/Netlify) use `@zitadel/edge-proxy` to forward
-those calls to your Zitadel backend:
-
-```ts
-// api/__nextgen/[...path].ts  (Vercel Edge Function)
-import { handleProxy, resolveConfig } from '@zitadel/edge-proxy';
+The signed-in session card is `<ZitadelSession project={project} />` (exported
+as `ZitadelSession`).
 
-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" }
-  ]
-}
-```
+## Proxying to the backend (deployment)
 
-For local development you can skip the proxy entirely and point `proxyPath` straight
-at the backend (cross-origin), e.g. `proxyPath: "http://localhost:4000"`.
+The widgets call `${proxyPath}/…` same-origin (default `/__nextgen`). In
+production the same-origin path must come from your hosting platform — until
+the CLI can scaffold those configs, **production SPA deployment is not yet
+supported**; see
+[ADR 036](https://github.com/zitadel/nextgen/blob/main/docs/adrs/036-api-credential-planes.md)
+and [zitadel/nextgen#560](https://github.com/zitadel/nextgen/issues/560). The
+CLI dev proxy covers local development.
+
+For local development you can also skip the proxy and point `proxyPath`
+straight at the backend (cross-origin), e.g. `proxyPath: "http://localhost:8080"`
+(the `zitadel start` local runtime default port).

package/dist/index.d.ts

@@ -1,5 +1,37 @@
-export { ZitadelLogin, ZitadelLogout } from './react.js';
-export { ZitadelConfig, ZitadelProject, configureZitadel, getApi, getZitadelConfig } from '@zitadel/api/config';
-export { AuthResult, AuthState, NextgenMiddlewareOptions, NextgenSession, UnauthState } from '@zitadel/sdk-core/types';
-import '@lit/react';
-import '@zitadel/components';
+import { configureZitadel, getApi, getZitadelConfig, ZitadelConfig, ZitadelProject } from '@zitadel/api/config';
+import { ZitadelLogin as ZitadelLoginElement, ZitadelLogout as ZitadelLogoutElement, ZitadelSession as ZitadelSessionElement } from '@zitadel/components';
+import * as React from "react";
+export { configureZitadel, getApi, getZitadelConfig };
+export type { ZitadelConfig, ZitadelProject };
+export * from './types';
+export { businessLocales } from '@zitadel/components';
+/**
+ * React component wrapping the `<zitadel-login>` web component. Binds the
+ * `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 const ZitadelLogin: React.ForwardRefExoticComponent<import('@zitadel/sdk-core/types').ZitadelLoginConfig & import('@zitadel/sdk-core/types').ZitadelLoginHandlers & React.RefAttributes<ZitadelLoginElement>>;
+/**
+ * React component wrapping the `<zitadel-logout>` web component. Binds the
+ * `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 const ZitadelLogout: React.ForwardRefExoticComponent<import('@zitadel/sdk-core/types').ZitadelLogoutConfig & import('@zitadel/sdk-core/types').ZitadelLogoutHandlers & React.RefAttributes<ZitadelLogoutElement>>;
+/**
+ * React component wrapping the `<zitadel-session>` web component — the
+ * post-sign-in "signed in as" card. Binds the `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-session>` DOM element.
+ */
+export declare const ZitadelSession: React.ForwardRefExoticComponent<import('@zitadel/sdk-core/types').ZitadelSessionConfig & import('@zitadel/sdk-core/types').ZitadelSessionHandlers & React.RefAttributes<ZitadelSessionElement>>;
+//# 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":"AACA,OAAO,EACL,gBAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,YAAY,IAAI,mBAAmB,EACnC,aAAa,IAAI,oBAAoB,EACrC,cAAc,IAAI,qBAAqB,EACxC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC;AAC9C,cAAc,SAAS,CAAC;AAIxB,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA0DtD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,2LAiBxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,8LAUzB,CAAC;AAIF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,iMAU1B,CAAC"}

package/dist/index.js

@@ -1,19 +1,82 @@
-import {
-  ZitadelLogin,
-  ZitadelLogout
-} from "./chunk-QJALWXNY.js";
-import "./chunk-6F4PWJZI.js";
-
-// src/index.ts
-import {
-  configureZitadel,
-  getApi,
-  getZitadelConfig
-} from "@zitadel/api/config";
+import { jsx as n } from "react/jsx-runtime";
+import { createComponent as d } from "@lit/react";
+import { configureZitadel as F, getApi as v, getZitadelConfig as y } from "@zitadel/api/config";
+import { ZitadelLogin as m, ZitadelLogout as u, ZitadelSession as f } from "@zitadel/components";
+import { businessLocales as b } from "@zitadel/components";
+import * as l from "react";
+const c = d({
+  react: l,
+  tagName: "zitadel-login",
+  elementClass: m,
+  events: {
+    onZitadelFlowStep: "zitadel-flow-step",
+    onZitadelFlowInput: "zitadel-flow-input",
+    onZitadelFlowComplete: "zitadel-flow-complete",
+    onZitadelFlowError: "zitadel-flow-error"
+  }
+}), p = d({
+  react: l,
+  tagName: "zitadel-logout",
+  elementClass: u,
+  events: {
+    onZitadelSignout: "zitadel-signout"
+  }
+}), L = d({
+  react: l,
+  tagName: "zitadel-session",
+  elementClass: f,
+  events: {
+    onZitadelSignout: "zitadel-signout"
+  }
+}), w = l.forwardRef(
+  function({ purpose: e, onFlowStep: o, onFlowInput: i, onFlowComplete: a, onFlowError: r, ...Z }, g) {
+    return /* @__PURE__ */ n(
+      c,
+      {
+        ...Z,
+        ref: g,
+        purpose: e ?? "login",
+        onZitadelFlowStep: o && ((t) => o(t.detail)),
+        onZitadelFlowInput: i && ((t) => i(t.detail)),
+        onZitadelFlowComplete: a && ((t) => a(t.detail)),
+        onZitadelFlowError: r && ((t) => r(t.detail))
+      }
+    );
+  }
+);
+w.displayName = "ZitadelLogin";
+const z = l.forwardRef(
+  function({ onSignout: e, ...o }, i) {
+    return /* @__PURE__ */ n(
+      p,
+      {
+        ...o,
+        ref: i,
+        onZitadelSignout: e && ((a) => e(a.detail))
+      }
+    );
+  }
+);
+z.displayName = "ZitadelLogout";
+const S = l.forwardRef(
+  function({ onSignout: e, ...o }, i) {
+    return /* @__PURE__ */ n(
+      L,
+      {
+        ...o,
+        ref: i,
+        onZitadelSignout: e && ((a) => e(a.detail))
+      }
+    );
+  }
+);
+S.displayName = "ZitadelSession";
 export {
-  ZitadelLogin,
-  ZitadelLogout,
-  configureZitadel,
-  getApi,
-  getZitadelConfig
+  w as ZitadelLogin,
+  z as ZitadelLogout,
+  S as ZitadelSession,
+  b as businessLocales,
+  F as configureZitadel,
+  v as getApi,
+  y 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

@@ -1 +1,10 @@
-export { AuthResult, AuthState, NextgenMiddlewareOptions, NextgenSession, UnauthState } from '@zitadel/sdk-core/types';
+/**
+ * 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

@@ -1,21 +1,21 @@
 {
   "name": "@zitadel/sdk-react",
-  "version": "0.1.0-alpha.9",
+  "version": "1.0.0-alpha.21",
   "description": "React components for the Zitadel auth UI (client-side SPA).",
   "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/sdk-react#readme",
   "bugs": {
     "url": "https://github.com/zitadel/nextgen/issues"
   },
-  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zitadel/nextgen.git",
     "directory": "packages/sdk-react"
   },
+  "license": "MIT",
+  "type": "module",
   "files": [
     "dist"
   ],
-  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@zitadel/api": "0.1.0-alpha.9",
-    "@zitadel/components": "0.1.0-alpha.9",
-    "@zitadel/sdk-core": "0.1.0-alpha.9"
+    "@zitadel/api": "1.0.0-alpha.21",
+    "@zitadel/sdk-core": "1.0.0-alpha.21",
+    "@zitadel/components": "1.0.0-alpha.21"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -37,33 +37,34 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
+    "@eslint/json": "^0.11.0",
+    "@eslint/markdown": "^6.0.0",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "eslint": "^9.0.0",
-    "jsdom": "^29.0.2",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.0",
-    "@eslint/json": "^0.11.0",
-    "@eslint/markdown": "^6.0.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-perfectionist": "^4.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "prettier": "^3.0.0",
-    "typescript-eslint": "^8.0.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-testing-library": "^7.0.0"
+    "eslint-plugin-testing-library": "^7.0.0",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.0.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "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": "tsup src/index.ts src/react.tsx src/types.ts --format esm --dts --clean --tsconfig tsconfig.json --external react react-dom",
+    "build": "vite build",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "vitest run --passWithNoTests",
+    "test": "vitest run",
     "lint": "eslint ."
   }
 }

package/dist/chunk-QJALWXNY.js

@@ -1,22 +0,0 @@
-// src/react.tsx
-import { createComponent } from "@lit/react";
-import {
-  ZitadelLogin as ZitadelLoginElement,
-  ZitadelLogout as ZitadelLogoutElement
-} from "@zitadel/components";
-import * as React from "react";
-var ZitadelLogin = createComponent({
-  react: React,
-  tagName: "zitadel-login",
-  elementClass: ZitadelLoginElement
-});
-var ZitadelLogout = createComponent({
-  react: React,
-  tagName: "zitadel-logout",
-  elementClass: ZitadelLogoutElement
-});
-
-export {
-  ZitadelLogin,
-  ZitadelLogout
-};

package/dist/react.d.ts

@@ -1,32 +0,0 @@
-import * as _lit_react from '@lit/react';
-import { ZitadelLogin as ZitadelLogin$1, ZitadelLogout as ZitadelLogout$1 } from '@zitadel/components';
-import '@zitadel/api/config';
-import '@zitadel/sdk-core/types';
-
-/**
- * React components for the Zitadel auth widgets.
- *
- * These wrap the framework-agnostic Lit web components from
- * `@zitadel/components` with `@lit/react`'s `createComponent`, so they are real
- * React components: typed props, refs, and events, with the SDK `project`
- * handle bound as a DOM *property* (not an attribute) — which is what the
- * elements read at startup.
- *
- * In a client-side SPA, build the handle with `configureZitadel(...)` and pass
- * it as the `project` prop. Because the SPA renders after configuration, the
- * prop is present when the element upgrades:
- *
- * ```tsx
- * import { ZitadelLogin, configureZitadel } from "@zitadel/sdk-react";
- *
- * const project = configureZitadel({ projectId: "…", proxyPath: "/__nextgen" });
- *
- * export function LoginPage() {
- *   return <ZitadelLogin project={project} purpose="login" postSignInUrl="/" />;
- * }
- * ```
- */
-declare const ZitadelLogin: _lit_react.ReactWebComponent<ZitadelLogin$1, {}>;
-declare const ZitadelLogout: _lit_react.ReactWebComponent<ZitadelLogout$1, {}>;
-
-export { ZitadelLogin, ZitadelLogout };

package/dist/react.js

@@ -1,8 +0,0 @@
-import {
-  ZitadelLogin,
-  ZitadelLogout
-} from "./chunk-QJALWXNY.js";
-export {
-  ZitadelLogin,
-  ZitadelLogout
-};

package/dist/types.js

@@ -1 +0,0 @@
-import "./chunk-6F4PWJZI.js";