@zitadel/sdk-angular 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,37 @@
+# @zitadel/sdk-angular
+
+Angular components for the Zitadel auth UI, for client-side SPAs.
+
+## Usage
+
+```ts
+import { Component } from '@angular/core';
+import { ZitadelLoginComponent, configureZitadel } from '@zitadel/sdk-angular';
+
+const project = configureZitadel({ projectId: '…', proxyPath: '/__nextgen' });
+
+@Component({
+  standalone: true,
+  imports: [ZitadelLoginComponent],
+  template: `<zitadel-auth-login
+    [project]="project"
+    purpose="login"
+    postSignInUrl="/"
+  />`,
+})
+export class LoginPage {
+  project = project;
+}
+```
+
+`<zitadel-auth-logout [project]="project" postSignOutUrl="/login" />` works the same way.
+
+> The wrapper uses the selector `zitadel-auth-login` (not `zitadel-login`) because
+> the latter is the underlying custom element the component renders internally.
+
+## Proxying to the backend (deployment)
+
+The widgets call `${proxyPath}/…` same-origin (default `/__nextgen`). On Vercel use
+`@zitadel/edge-proxy` to forward those calls (see the React/Vue READMEs for the
+`vercel.json` rewrite + edge function). Locally you can point `proxyPath` straight at
+the backend (cross-origin), e.g. `proxyPath: "http://localhost:4000"`.

package/fesm2022/zitadel-sdk-angular.mjs

@@ -0,0 +1,112 @@
+import * as i0 from '@angular/core';
+import { Input, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import '@zitadel/components';
+
+/**
+ * Angular wrapper for the `<zitadel-login>` Lit web component.
+ *
+ * Uses a distinct selector (`zitadel-auth-login`) and renders the real custom
+ * element in its template under `CUSTOM_ELEMENTS_SCHEMA`. The `project` handle
+ * (from `configureZitadel(...)`) is bound as a DOM **property** via `[project]`;
+ * `purpose` / `post-sign-in-url` are bound as attributes the Lit element reads.
+ *
+ * ```html
+ * <zitadel-auth-login [project]="project" purpose="login" postSignInUrl="/" />
+ * ```
+ */
+class ZitadelLoginComponent {
+    project;
+    purpose = 'login';
+    postSignInUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZitadelLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZitadelLoginComponent, isStandalone: true, selector: "zitadel-auth-login", inputs: { project: "project", purpose: "purpose", postSignInUrl: "postSignInUrl" }, ngImport: i0, template: `<zitadel-login
+    [project]="project"
+    [attr.purpose]="purpose"
+    [attr.post-sign-in-url]="postSignInUrl"
+  ></zitadel-login>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZitadelLoginComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zitadel-auth-login',
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    template: `<zitadel-login
+    [project]="project"
+    [attr.purpose]="purpose"
+    [attr.post-sign-in-url]="postSignInUrl"
+  ></zitadel-login>`,
+                }]
+        }], propDecorators: { project: [{
+                type: Input
+            }], purpose: [{
+                type: Input
+            }], postSignInUrl: [{
+                type: Input
+            }] } });
+
+/**
+ * Angular wrapper for the `<zitadel-logout>` Lit web component. See
+ * {@link ZitadelLoginComponent} for the strategy.
+ *
+ * ```html
+ * <zitadel-auth-logout [project]="project" postSignOutUrl="/login" />
+ * ```
+ */
+class ZitadelLogoutComponent {
+    project;
+    postSignOutUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZitadelLogoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZitadelLogoutComponent, isStandalone: true, selector: "zitadel-auth-logout", inputs: { project: "project", postSignOutUrl: "postSignOutUrl" }, ngImport: i0, template: `<zitadel-logout
+    [project]="project"
+    [attr.post-sign-out-url]="postSignOutUrl"
+  ></zitadel-logout>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZitadelLogoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zitadel-auth-logout',
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    template: `<zitadel-logout
+    [project]="project"
+    [attr.post-sign-out-url]="postSignOutUrl"
+  ></zitadel-logout>`,
+                }]
+        }], propDecorators: { project: [{
+                type: Input
+            }], postSignOutUrl: [{
+                type: Input
+            }] } });
+
+/**
+ * SDK configuration for the Angular wrapper.
+ *
+ * `@zitadel/api` is published with subpath-only `exports` and no main entry,
+ * which ng-packagr's module resolution cannot follow. For the client-side SPA
+ * (prop-based) flow the widget only needs a plain handle — `{ projectId,
+ * proxyPath }` — which it reads directly. So this package builds that handle
+ * locally rather than importing `configureZitadel` from `@zitadel/api`, keeping
+ * the Angular library self-contained.
+ */
+/**
+ * Builds the project handle to pass to `<zitadel-auth-login [project]>`.
+ *
+ * ```ts
+ * const project = configureZitadel({ projectId: "…", proxyPath: "/__nextgen" });
+ * ```
+ */
+function configureZitadel(config) {
+    return Object.freeze({
+        proxyPath: config.proxyPath ?? '/__nextgen',
+        projectId: config.projectId,
+        url: config.url,
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZitadelLoginComponent, ZitadelLogoutComponent, configureZitadel };
+//# sourceMappingURL=zitadel-sdk-angular.mjs.map

package/fesm2022/zitadel-sdk-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"zitadel-sdk-angular.mjs","sources":["../../src/lib/zitadel-login.component.ts","../../src/lib/zitadel-logout.component.ts","../../src/lib/config.ts","../../src/zitadel-sdk-angular.ts"],"sourcesContent":["import { Component, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\nimport type { ZitadelProject } from './config';\n\n// Registers <zitadel-login> / <zitadel-logout> with the browser.\nimport '@zitadel/components';\n\n/**\n * Angular wrapper for the `<zitadel-login>` Lit web component.\n *\n * Uses a distinct selector (`zitadel-auth-login`) and renders the real custom\n * element in its template under `CUSTOM_ELEMENTS_SCHEMA`. The `project` handle\n * (from `configureZitadel(...)`) is bound as a DOM **property** via `[project]`;\n * `purpose` / `post-sign-in-url` are bound as attributes the Lit element reads.\n *\n * ```html\n * <zitadel-auth-login [project]=\"project\" purpose=\"login\" postSignInUrl=\"/\" />\n * ```\n */\n@Component({\n  selector: 'zitadel-auth-login',\n  standalone: true,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `<zitadel-login\n    [project]=\"project\"\n    [attr.purpose]=\"purpose\"\n    [attr.post-sign-in-url]=\"postSignInUrl\"\n  ></zitadel-login>`,\n})\nexport class ZitadelLoginComponent {\n  @Input() project?: ZitadelProject;\n  @Input() purpose = 'login';\n  @Input() postSignInUrl?: string;\n}\n","import { Component, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\nimport type { ZitadelProject } from './config';\n\nimport '@zitadel/components';\n\n/**\n * Angular wrapper for the `<zitadel-logout>` Lit web component. See\n * {@link ZitadelLoginComponent} for the strategy.\n *\n * ```html\n * <zitadel-auth-logout [project]=\"project\" postSignOutUrl=\"/login\" />\n * ```\n */\n@Component({\n  selector: 'zitadel-auth-logout',\n  standalone: true,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `<zitadel-logout\n    [project]=\"project\"\n    [attr.post-sign-out-url]=\"postSignOutUrl\"\n  ></zitadel-logout>`,\n})\nexport class ZitadelLogoutComponent {\n  @Input() project?: ZitadelProject;\n  @Input() postSignOutUrl?: string;\n}\n","/**\n * SDK configuration for the Angular wrapper.\n *\n * `@zitadel/api` is published with subpath-only `exports` and no main entry,\n * which ng-packagr's module resolution cannot follow. For the client-side SPA\n * (prop-based) flow the widget only needs a plain handle — `{ projectId,\n * proxyPath }` — which it reads directly. So this package builds that handle\n * locally rather than importing `configureZitadel` from `@zitadel/api`, keeping\n * the Angular library self-contained.\n */\n\n/** Frozen project handle passed to the widgets via the `project` input. */\nexport interface ZitadelProject {\n  readonly proxyPath: string;\n  readonly projectId: string;\n  readonly url?: string;\n}\n\n/** Input options for {@link configureZitadel}. */\nexport interface ZitadelConfig {\n  /** Proxy path for API requests. Defaults to `\"/__nextgen\"`. */\n  proxyPath?: string;\n  /** Project id passed to flow creation. */\n  projectId: string;\n  /** Full backend URL (server-side only; optional for client SPAs). */\n  url?: string;\n}\n\n/**\n * Builds the project handle to pass to `<zitadel-auth-login [project]>`.\n *\n * ```ts\n * const project = configureZitadel({ projectId: \"…\", proxyPath: \"/__nextgen\" });\n * ```\n */\nexport function configureZitadel(config: ZitadelConfig): ZitadelProject {\n  return Object.freeze({\n    proxyPath: config.proxyPath ?? '/__nextgen',\n    projectId: config.projectId,\n    url: config.url,\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;;;AAWG;MAWU,qBAAqB,CAAA;AACvB,IAAA,OAAO;IACP,OAAO,GAAG,OAAO;AACjB,IAAA,aAAa;uGAHX,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANtB,CAAA;;;;AAIQ,mBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEP,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAVjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE,CAAA;;;;AAIQ,mBAAA,CAAA;AACnB,iBAAA;;sBAEE;;sBACA;;sBACA;;;AC1BH;;;;;;;AAOG;MAUU,sBAAsB,CAAA;AACxB,IAAA,OAAO;AACP,IAAA,cAAc;uGAFZ,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EALvB,CAAA;;;AAGS,oBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAER,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBATlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE,CAAA;;;AAGS,oBAAA,CAAA;AACpB,iBAAA;;sBAEE;;sBACA;;;ACzBH;;;;;;;;;AASG;AAmBH;;;;;;AAMG;AACG,SAAU,gBAAgB,CAAC,MAAqB,EAAA;IACpD,OAAO,MAAM,CAAC,MAAM,CAAC;AACnB,QAAA,SAAS,EAAE,MAAM,CAAC,SAAS,IAAI,YAAY;QAC3C,SAAS,EAAE,MAAM,CAAC,SAAS;QAC3B,GAAG,EAAE,MAAM,CAAC,GAAG;AAChB,KAAA,CAAC;AACJ;;ACzCA;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@zitadel/sdk-angular",
+  "version": "0.0.0",
+  "description": "Angular components for the Zitadel auth UI (client-side SPA).",
+  "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/sdk-angular#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-angular"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0",
+    "@zitadel/api": "0.1.0-alpha.0",
+    "@zitadel/components": "0.1.0-alpha.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17",
+    "@angular/core": ">=17"
+  },
+  "module": "fesm2022/zitadel-sdk-angular.mjs",
+  "typings": "types/zitadel-sdk-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/zitadel-sdk-angular.d.ts",
+      "default": "./fesm2022/zitadel-sdk-angular.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module"
+}

package/types/zitadel-sdk-angular.d.ts

@@ -0,0 +1,73 @@
+import * as i0 from '@angular/core';
+
+/**
+ * SDK configuration for the Angular wrapper.
+ *
+ * `@zitadel/api` is published with subpath-only `exports` and no main entry,
+ * which ng-packagr's module resolution cannot follow. For the client-side SPA
+ * (prop-based) flow the widget only needs a plain handle — `{ projectId,
+ * proxyPath }` — which it reads directly. So this package builds that handle
+ * locally rather than importing `configureZitadel` from `@zitadel/api`, keeping
+ * the Angular library self-contained.
+ */
+/** Frozen project handle passed to the widgets via the `project` input. */
+interface ZitadelProject {
+    readonly proxyPath: string;
+    readonly projectId: string;
+    readonly url?: string;
+}
+/** Input options for {@link configureZitadel}. */
+interface ZitadelConfig {
+    /** Proxy path for API requests. Defaults to `"/__nextgen"`. */
+    proxyPath?: string;
+    /** Project id passed to flow creation. */
+    projectId: string;
+    /** Full backend URL (server-side only; optional for client SPAs). */
+    url?: string;
+}
+/**
+ * Builds the project handle to pass to `<zitadel-auth-login [project]>`.
+ *
+ * ```ts
+ * const project = configureZitadel({ projectId: "…", proxyPath: "/__nextgen" });
+ * ```
+ */
+declare function configureZitadel(config: ZitadelConfig): ZitadelProject;
+
+/**
+ * Angular wrapper for the `<zitadel-login>` Lit web component.
+ *
+ * Uses a distinct selector (`zitadel-auth-login`) and renders the real custom
+ * element in its template under `CUSTOM_ELEMENTS_SCHEMA`. The `project` handle
+ * (from `configureZitadel(...)`) is bound as a DOM **property** via `[project]`;
+ * `purpose` / `post-sign-in-url` are bound as attributes the Lit element reads.
+ *
+ * ```html
+ * <zitadel-auth-login [project]="project" purpose="login" postSignInUrl="/" />
+ * ```
+ */
+declare class ZitadelLoginComponent {
+    project?: ZitadelProject;
+    purpose: string;
+    postSignInUrl?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ZitadelLoginComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ZitadelLoginComponent, "zitadel-auth-login", never, { "project": { "alias": "project"; "required": false; }; "purpose": { "alias": "purpose"; "required": false; }; "postSignInUrl": { "alias": "postSignInUrl"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Angular wrapper for the `<zitadel-logout>` Lit web component. See
+ * {@link ZitadelLoginComponent} for the strategy.
+ *
+ * ```html
+ * <zitadel-auth-logout [project]="project" postSignOutUrl="/login" />
+ * ```
+ */
+declare class ZitadelLogoutComponent {
+    project?: ZitadelProject;
+    postSignOutUrl?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ZitadelLogoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ZitadelLogoutComponent, "zitadel-auth-logout", never, { "project": { "alias": "project"; "required": false; }; "postSignOutUrl": { "alias": "postSignOutUrl"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { ZitadelLoginComponent, ZitadelLogoutComponent, configureZitadel };
+export type { ZitadelConfig, ZitadelProject };