<!--
Please inform yourself about the contribution guidelines on submitting a
PR here:
https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr.
Take note of how PR/commit titles should be written and replace the
template texts in the sections below. Don't remove any of the sections.
It is important that the commit history clearly shows what is changed
and why.
Important: By submitting a contribution you agree to the terms from our
Licensing Policy as described here:
https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions.
-->
# Which Problems Are Solved
The api call for adding a mfa/2fa factor was running before creating a
login policy.
# How the Problems Are Solved
A new event emitter `beforeTypeAdd` is responsible for taking in a
callback, and then the parent component (login-policy) checks if a login
policy should be created, and then it is successfully created, calls the
callback.
The callback then adds the mfa/2fa factor as before.
# Additional Context
- Closes #9047
Co-authored-by: David Skewis <david@zitadel.com>
Co-authored-by: Stefan Benz <46600784+stebenz@users.noreply.github.com>
(cherry picked from commit 381727e919)
Zitadel Console
The Console is Zitadels management UI.
It is built using Angular and part of the Zitadel monorepo.
To get started follow the contributing quick start.
Building
To build for production:
pnpm nx run @zitadel/console:build
This will:
- Generate proto files (via
prebuildscript) - Build the Angular app with production optimizations
Linting
To run linting and formatting checks:
pnpm nx @zitadel/console:lint
To auto-fix formatting issues:
pnpm nx @zitadel/console:lint-fix
Project Structure
src/app/proto/generated/- Generated proto files (Angular-specific format)buf.gen.yaml- Local proto generation configurationproject.json- Nx orchestration and caching for builds and testsprebuild.development.js- Development environment configuration script
Dependency Chain
The Console app has the following build dependencies managed by Nx:
@zitadel/proto:generate- Generates the protobuf stubs@zitadel/client:build- Builds the TypeScript gRPC client library@zitadel/console:generate- Generates Console-specific protobuf stubs@zitadel/console:build- Creates a production build from Console
This ensures that the Console always has access to the latest client library and protobuf definitions.
Proto Generation Details
@zitadel/protogeneration: Modern ES modules with@bufbuild/protobuffor v2 APIs- Local
buf.gen.yamlgeneration: Traditional protobuf JavaScript classes for v1 APIs
The Console app calls Zitadel v1 and v2 APIs. As long as the Console still calls v1 APIs, it needs to import client stubs from separate sources:
Legacy v1 API (Traditional Protobuf)
- Uses local
buf.gen.yamlconfiguration - Generates traditional Google protobuf JavaScript classes extending
jspb.Message - Uses plugins:
protocolbuffers/js,grpc/web,grpc-ecosystem/openapiv2 - Output:
src/app/proto/generated/ - Used for: Most existing Console functionality
Modern v2 API (ES Modules)
- Uses
@zitadel/protopackage generation - Generates modern ES modules with
@bufbuild/protobuf - Uses plugin:
@bufbuild/eswith ES modules and JSON types - Output:
login/packages/zitadel-proto/ - Used for: New user v2 API and services
Dependency Management
The Console's project.json ensures proper execution order:
@zitadel/proto:generateruns first (modern ES modules)- Console's local generation runs second (traditional protobuf)
- Build/lint/start tasks depend on both generations being complete
This approach allows the Console app to use both v1 and v2 APIs while maintaining proper build dependencies.
Legacy Information
This project was originally generated with Angular CLI version 8.3.20 and has been updated over time.