Angular SDK

The Angular SDK exposes standalone components that wrap the shared Zitadel auth UI.

Generated proxy

Angular uses a dev-server proxy config rather than Vite middleware. Production still needs a same-origin proxy for /__nextgen/*. See SDK proxy.

Install

pnpm add @zitadel/sdk-angular

npm install @zitadel/sdk-angular

yarn add @zitadel/sdk-angular

Setup

The CLI writes the root component, adds a proxy config, wires angular.json, and installs the SDK.

src/app/app.ts

src/app/app.html

proxy.conf.cjs

angular.json

package.json

Configure Zitadel once and pass the handle to the standalone component:

import { Component } from "@angular/core";
import { ZitadelLoginComponent, configureZitadel } from "@zitadel/sdk-angular";

const project = configureZitadel({ projectId: "proj_123", proxyPath: "/__nextgen" });

@Component({
  standalone: true,
  imports: [ZitadelLoginComponent],
  template: `<zitadel-auth-login [project]="project" purpose="login" postSignInUrl="/" />`,
})
export class LoginPage {
  project = project;
}

Runtime model

The Angular wrapper renders the underlying custom element.

The generated dev proxy forwards /__nextgen/* and attaches the project service key.

Production deployments need an equivalent proxy.

Verify

Run the generated Angular dev script.
Register or sign in through the widget.
Confirm logout works with zitadel-auth-logout.
Remember that the wrapper selector is zitadel-auth-login; the underlying custom element is zitadel-login.

Angular SDK

Install

Setup

Runtime model

Verify

See also

On this page