@zitadel/sdk-react 0.0.0

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,57 @@
+# @zitadel/sdk-react
+
+React components for the Zitadel auth UI, for client-side SPAs.
+
+## Usage
+
+```tsx
+import {
+  ZitadelLogin,
+  ZitadelLogout,
+  configureZitadel,
+} from '@zitadel/sdk-react';
+
+// Configure once, before rendering. The handle is passed to the widget as a
+// prop, so it has config the moment it mounts.
+const project = configureZitadel({
+  projectId: '<your project id>', // e.g. from your bundler's env (import.meta.env, process.env, …)
+  proxyPath: '/__nextgen', // same-origin path your deploy proxies to the backend
+});
+
+export function LoginPage() {
+  return <ZitadelLogin project={project} purpose="login" postSignInUrl="/" />;
+}
+
+export function ProfilePage() {
+  return <ZitadelLogout project={project} postSignOutUrl="/login" />;
+}
+```
+
+## 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';
+
+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 entirely and point `proxyPath` straight
+at the backend (cross-origin), e.g. `proxyPath: "http://localhost:4000"`.

package/dist/chunk-QJALWXNY.js

@@ -0,0 +1,22 @@
+// 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/index.d.ts

@@ -0,0 +1,5 @@
+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';

package/dist/index.js

@@ -0,0 +1,19 @@
+import {
+  ZitadelLogin,
+  ZitadelLogout
+} from "./chunk-QJALWXNY.js";
+import "./chunk-6F4PWJZI.js";
+
+// src/index.ts
+import {
+  configureZitadel,
+  getApi,
+  getZitadelConfig
+} from "@zitadel/api/config";
+export {
+  ZitadelLogin,
+  ZitadelLogout,
+  configureZitadel,
+  getApi,
+  getZitadelConfig
+};

package/dist/react.d.ts

@@ -0,0 +1,32 @@
+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

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

package/dist/types.d.ts

@@ -0,0 +1 @@
+export { AuthResult, AuthState, NextgenMiddlewareOptions, NextgenSession, UnauthState } from '@zitadel/sdk-core/types';

package/dist/types.js

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

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@zitadel/sdk-react",
+  "version": "0.0.0",
+  "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"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lit/react": "^1.0.8",
+    "@zitadel/components": "0.1.0-alpha.0",
+    "@zitadel/api": "0.1.0-alpha.0",
+    "@zitadel/sdk-core": "0.1.0-alpha.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.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-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"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/react.tsx src/types.ts --format esm --dts --clean --tsconfig tsconfig.json --external react react-dom",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint ."
+  }
+}