Angular SDK
Angular wrappers for Zitadel login and logout UI.
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-angularSetup
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
Runtime model
The Angular wrapper renders the underlying custom element.
The generated dev proxy forwards
/__nextgen/* and attaches the project service key only on the session exchange.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 iszitadel-login.
See also
- SDK proxy — why SPAs need a same-origin
/__nextgen/*proxy and how to run one in production. - Components — the shared web components these wrappers render.
@zitadel/sdk-angularsource and the CLI Angular patcher.