mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-18 05:52:51 +00:00
324cc54d9a
# Which Problems Are Solved
The backend and the new login already support the dedicated ZITADEL IdP
template
(`AddZitadelProvider`/`UpdateZitadelProvider`, `PROVIDER_TYPE_ZITADEL`,
`InstanceRolesInfo`),
but the Console does not expose it:
- A ZITADEL provider cannot be created or edited from the Console,
neither at instance nor at
organization level — it is missing from the "add provider" list in the
IdP settings.
- Providers created through the API are listed in the IdP table as
`coming soon` (the type
`@switch` has no `PROVIDER_TYPE_ZITADEL` case) and the row has no detail
route, so an existing
provider cannot be opened.
- `InstanceRolesInfo` — the organization ID/domain pairs that drive
instance-role synchronization
for instance-level providers — is not configurable outside the API.
# How the Problems Are Solved
- Added `ProviderZitadelComponent`
(`console/src/app/modules/providers/provider-zitadel/`),
modeled on the generic OIDC provider component:
- Form for `name`, `issuer`, `clientId`, `clientSecret` and `scopesList`
(chip input, defaulting
to `openid`, `profile`, `email`), plus the shared
`cnsl-provider-options` block.
- On edit the client secret is optional and is only sent when the
"update client secret"
checkbox is set.
- Reuses `cnsl-provider-next` for the callback URL, activation and "what
now" flow.
- Added the instance role mapping section, rendered only for
instance-level providers
(`serviceType === ADMIN`), since the API rejects `instance_roles_info`
on organization-scoped
ZITADEL providers. Entries are added as organization ID + organization
domain pairs and are
submitted as `InstanceRolesInfo`; both values are required and are
matched together on login.
- Added `addZitadelProvider`/`updateZitadelProvider` to `AdminService`
and `ManagementService`
wrapping the existing gRPC calls.
- Declared the component in `providers.module.ts` and mapped
`PROVIDER_TYPE_ZITADEL` to the
`zitadel` path in `providers-routing.module.ts`, so
`/instance/provider/zitadel/...` and
`/org/provider/zitadel/...` resolve for both create and edit.
- Added a ZITADEL tile to the "add provider" list in the IdP settings
and a
`PROVIDER_TYPE_ZITADEL` case to the IdP table;
`IdpTableComponent.routerLinkForRow` now returns
the detail route for ZITADEL rows.
# Additional Changes
- Added the new i18n keys `IDP.CREATE.ZITADEL.TITLE`/`DESCRIPTION`,
`IDP.INSTANCEROLESINFO`,
`IDP.INSTANCEROLESINFO_DESC`, `IDP.ORGANIZATIONID` and
`IDP.ORGANIZATIONDOMAIN` to all 22
Console locale files with actual translations instead of English
fallbacks.
- The provider tile, table entry and detail header use the colored
ZITADEL logo assets
(`zitadel-logo-solo-light.svg` in the dark theme,
`zitadel-logo-solo-dark.svg` in the light
theme), consistent with the header, rather than the monochrome
`*-solo-*-icon.svg` variants.
- Additional sync roles trigger for the support IDP to behave correctly
on first login after a disable/enable cycle — where auto-linking jumps
in — but not required for the link to be established.
# Additional Context
- Closes #11825
- Part of the "Zitadel as an Identity Provider" epic #5127
- Console counterpart to the API work in #12018, #12056 (add), #12371,
#12378, #12384 (update),
#12394 (get/list), #12396 (delete), #12422 (active IdPs) and to the
login support in #12469,
#12530 and #12568
---------
Co-authored-by: Livio Spring <[email protected]>
81 lines
3.6 KiB
TypeScript
81 lines
3.6 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import { NgModule } from '@angular/core';
|
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
import { MatChipsModule } from '@angular/material/chips';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
import { MatSelectModule } from '@angular/material/select';
|
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
import { TranslateModule } from '@ngx-translate/core';
|
|
import { InputModule } from 'src/app/modules/input/input.module';
|
|
|
|
import { CardModule } from '../card/card.module';
|
|
import { CreateLayoutModule } from '../create-layout/create-layout.module';
|
|
import { InfoSectionModule } from '../info-section/info-section.module';
|
|
import { ProviderOptionsModule } from '../provider-options/provider-options.module';
|
|
import { StringListModule } from '../string-list/string-list.module';
|
|
import { LDAPAttributesComponent } from './ldap-attributes/ldap-attributes.component';
|
|
import { ProviderAppleComponent } from './provider-apple/provider-apple.component';
|
|
import { ProviderAzureADComponent } from './provider-azure-ad/provider-azure-ad.component';
|
|
import { ProviderGithubESComponent } from './provider-github-es/provider-github-es.component';
|
|
import { ProviderGithubComponent } from './provider-github/provider-github.component';
|
|
import { ProviderGitlabSelfHostedComponent } from './provider-gitlab-self-hosted/provider-gitlab-self-hosted.component';
|
|
import { ProviderGitlabComponent } from './provider-gitlab/provider-gitlab.component';
|
|
import { ProviderGoogleComponent } from './provider-google/provider-google.component';
|
|
import { ProviderJWTComponent } from './provider-jwt/provider-jwt.component';
|
|
import { ProviderLDAPComponent } from './provider-ldap/provider-ldap.component';
|
|
import { ProviderOAuthComponent } from './provider-oauth/provider-oauth.component';
|
|
import { ProviderOIDCComponent } from './provider-oidc/provider-oidc.component';
|
|
import { ProvidersRoutingModule } from './providers-routing.module';
|
|
import { ProviderSamlSpComponent } from './provider-saml-sp/provider-saml-sp.component';
|
|
import { ProviderZitadelComponent } from './provider-zitadel/provider-zitadel.component';
|
|
import { CopyRowComponent } from '../../components/copy-row/copy-row.component';
|
|
import { ProviderNextComponent } from './provider-next/provider-next.component';
|
|
import { ProviderNextService } from './provider-next/provider-next.service';
|
|
|
|
@NgModule({
|
|
declarations: [
|
|
ProviderGoogleComponent,
|
|
ProviderGithubComponent,
|
|
ProviderGithubESComponent,
|
|
ProviderAzureADComponent,
|
|
LDAPAttributesComponent,
|
|
ProviderGitlabSelfHostedComponent,
|
|
ProviderGitlabComponent,
|
|
ProviderGithubESComponent,
|
|
ProviderJWTComponent,
|
|
ProviderOIDCComponent,
|
|
ProviderOAuthComponent,
|
|
ProviderLDAPComponent,
|
|
ProviderAppleComponent,
|
|
ProviderSamlSpComponent,
|
|
ProviderZitadelComponent,
|
|
ProviderNextComponent,
|
|
],
|
|
imports: [
|
|
ProvidersRoutingModule,
|
|
CommonModule,
|
|
FormsModule,
|
|
ReactiveFormsModule,
|
|
CreateLayoutModule,
|
|
StringListModule,
|
|
InfoSectionModule,
|
|
InputModule,
|
|
MatButtonModule,
|
|
MatSelectModule,
|
|
MatIconModule,
|
|
MatChipsModule,
|
|
CardModule,
|
|
MatCheckboxModule,
|
|
MatTooltipModule,
|
|
TranslateModule,
|
|
ProviderOptionsModule,
|
|
MatProgressSpinnerModule,
|
|
CopyRowComponent,
|
|
],
|
|
providers: [ProviderNextService],
|
|
})
|
|
export default class ProvidersModule {}
|