Skip to content

IAM UI

Purpose

The IAM UI is the identity and access management microfrontend for Platform Mesh. It provides user and role management directly inside the Portal shell, giving workspace administrators full control over who can access a resource and with what permissions.

The key capabilities are:

  • Browse members — paginated, searchable, and filterable list of all users assigned to a resource
  • Add members — invite existing platform users or send email invitations to new users, assigning one or more roles in a single step
  • Assign and remove roles — update role assignments inline; at least one owner is always enforced
  • Leave a scope — a user can remove themselves from a resource they belong to

Runtime role

IAM UI calls the IAM service via GraphQL to read and write authorization state. It surfaces as two independently deployable artifacts inside the Portal:

  • Standalone UI — a full-page Angular microfrontend loaded by Luigi inside an iframe, mounted at /ui/iam/ui/. It handles the members listing page (/:entityId/members) and the add-members flow (/:entityId/add-members).
  • Web components — self-registering custom elements loaded by Luigi as ES modules, mounted at /ui/iam/wc/. These embed lightweight member views (e.g. a members-sidebar) into compound layout slots without a full iframe.

Both artifacts read their runtime context (IAM service URL, tenant, entity, and KCP workspace path) from the Luigi globalContext, so they require no static configuration.

Luigi globalContext

IAM UI (iframe or web component)

GraphQL (Apollo) → IAM service

OpenFGA tuple evaluation + Keycloak user enrichment

Luigi navigation nodes registered by the UI:

PathSegmentEntityTypeVisibilityPurpose
membersproject/teamVisible (order 3)Members listing page
add-membersproject/teamHiddenAdd-members dialog
members-sidebarproject.overview::compoundSidebar slot (order 10)Members sidebar web component

Technology stack

ComponentTechnology
FrameworkAngular 21
UI ComponentsSAP Fundamental NGX 0.61
Micro-frontend orchestrationLuigi 2.25
GraphQL clientApollo Angular 13 / Apollo Client 4
Subscriptions transportSSE (Server-Sent Events)
TestingVitest 4
LanguageTypeScript (ES2022, strict mode)
Containernginx:alpine, served on port 8080

Repository

Configuration

The UI reads all runtime configuration from the Luigi node context injected by the Portal. No static environment files are required in production. The relevant context fields are:

FieldPurpose
portalContext.iamServiceApiUrlGraphQL endpoint for the IAM service
portalContext.avatarImgUrlBase URL for user avatar images
tenantIdTenant scope for multi-tenant deployments
entityType / entityIdThe resource being administered
resourceDefinitionKubernetes resource metadata (group, kind, scope, namespace)
kcpPathKCP workspace path for multi-cluster routing
analyticsTrackerConfigOptional Matomo analytics configuration

For local development, copy .env-example to .env and populate the required values before running.

EU and German government funding logos

Funded by the European Union – NextGenerationEU.

The views and opinions expressed are solely those of the author(s) and do not necessarily reflect the views of the European Union or the European Commission. Neither the European Union nor the European Commission can be held responsible for them.