@idp.global/catalog 3.4.0 → 3.6.0

package/ts_web/elements/idp-admin-shell.ts

@@ -123,6 +123,36 @@ export interface IIdpAdminGaAppActionEventDetail {
   action: 'approve' | 'reject' | 'suspend' | 'reinstate';
 }
 
+export interface IIdpAdminGaAppConfigureEventDetail {
+  appId: string;
+  clientType: 'public' | 'confidential';
+  isActive: boolean;
+  redirectUris: string[];
+  postLogoutRedirectUris: string[];
+  allowedScopes: string[];
+  grantTypes: Array<'authorization_code' | 'client_credentials' | 'refresh_token'>;
+  oidcSettings: {
+    accessTokenLifetime: number;
+    idTokenLifetime: number;
+    refreshTokenLifetime: number;
+  };
+}
+
+export interface IIdpAdminGaAppRotateSecretEventDetail {
+  appId: string;
+  gracePeriodSeconds: number;
+}
+
+export interface IIdpAdminGaAppSecretDismissEventDetail {
+  appId: string;
+}
+
+export interface IIdpAdminClientSecret {
+  appId: string;
+  clientId: string;
+  clientSecret: string;
+}
+
 export interface IIdpAdminOverviewSeriesPoint {
   /** epoch-ms timestamp or Date-parseable string; plain clock times like '14:00' are not chartable */
   x: string | number;
@@ -190,8 +220,16 @@ export interface IIdpAdminApp {
   isConnected?: boolean;
   connectionCount?: number;
   clientId?: string;
+  clientType?: 'public' | 'confidential';
+  isActive?: boolean;
+  redirectUris?: string[];
+  postLogoutRedirectUris?: string[];
   scopes?: string[];
   grants?: string[];
+  accessTokenLifetime?: number;
+  idTokenLifetime?: number;
+  refreshTokenLifetime?: number;
+  retiringClientSecretCount?: number;
   roleMappings?: IIdpAdminAppRoleMapping[];
 }
 
@@ -989,6 +1027,9 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Array })
   public accessor adminApps: IIdpAdminApp[] = [];
 
+  @property({ type: Object })
+  public accessor oidcClientSecret: IIdpAdminClientSecret | null = null;
+
   @property({ type: Array })
   public accessor passportDevices: IIdpAdminPassportDevice[] = [];
 
@@ -1126,7 +1167,7 @@ export class IdpAdminShell extends DeesElement {
   private accessor orgSettingsError = '';
 
   @state()
-  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' | 'create-org' | 'logout-confirm' = 'none';
+  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' | 'oidc-app-config' | 'oidc-secret-rotate' | 'create-org' | 'logout-confirm' = 'none';
 
   @state()
   private accessor dialogError = '';
@@ -1155,6 +1196,36 @@ export class IdpAdminShell extends DeesElement {
   @state()
   private accessor dialogAppMappings: IIdpAdminAppRoleMapping[] = [];
 
+  @state()
+  private accessor dialogClientType: 'public' | 'confidential' = 'confidential';
+
+  @state()
+  private accessor dialogAppActive = true;
+
+  @state()
+  private accessor dialogRedirectUris = '';
+
+  @state()
+  private accessor dialogPostLogoutRedirectUris = '';
+
+  @state()
+  private accessor dialogAllowedScopes = '';
+
+  @state()
+  private accessor dialogGrantTypes = '';
+
+  @state()
+  private accessor dialogAccessTokenLifetime = 3600;
+
+  @state()
+  private accessor dialogIdTokenLifetime = 3600;
+
+  @state()
+  private accessor dialogRefreshTokenLifetime = 2592000;
+
+  @state()
+  private accessor dialogSecretGracePeriod = 86400;
+
   private get safeOrgs(): IIdpAdminOrg[] {
     return Array.isArray(this.orgs) ? this.orgs.filter(Boolean) : [];
   }
@@ -1556,6 +1627,16 @@ export class IdpAdminShell extends DeesElement {
     this.dialogMemberRoles = [];
     this.dialogApp = null;
     this.dialogAppMappings = [];
+    this.dialogClientType = 'confidential';
+    this.dialogAppActive = true;
+    this.dialogRedirectUris = '';
+    this.dialogPostLogoutRedirectUris = '';
+    this.dialogAllowedScopes = '';
+    this.dialogGrantTypes = '';
+    this.dialogAccessTokenLifetime = 3600;
+    this.dialogIdTokenLifetime = 3600;
+    this.dialogRefreshTokenLifetime = 2592000;
+    this.dialogSecretGracePeriod = 86400;
   }
 
   private openRoleUpsertDialog(roleArg?: IIdpAdminOrgRoleDefinition) {
@@ -1597,6 +1678,130 @@ export class IdpAdminShell extends DeesElement {
     });
   }
 
+  private openOidcAppConfigDialog(appArg: IIdpAdminApp) {
+    this.dialogMode = 'oidc-app-config';
+    this.dialogError = '';
+    this.dialogApp = appArg;
+    this.dialogClientType = appArg.clientType || 'confidential';
+    this.dialogAppActive = appArg.isActive ?? appArg.status !== 'suspended';
+    this.dialogRedirectUris = (appArg.redirectUris || []).join('\n');
+    this.dialogPostLogoutRedirectUris = (appArg.postLogoutRedirectUris || []).join('\n');
+    this.dialogAllowedScopes = (appArg.scopes || []).join(', ');
+    this.dialogGrantTypes = (appArg.grants || []).join(', ');
+    this.dialogAccessTokenLifetime = appArg.accessTokenLifetime || 3600;
+    this.dialogIdTokenLifetime = appArg.idTokenLifetime || 3600;
+    this.dialogRefreshTokenLifetime = appArg.refreshTokenLifetime || 2592000;
+  }
+
+  private openOidcSecretRotateDialog(appArg: IIdpAdminApp) {
+    this.dialogMode = 'oidc-secret-rotate';
+    this.dialogError = '';
+    this.dialogApp = appArg;
+    this.dialogSecretGracePeriod = 86400;
+  }
+
+  private parseLines(valueArg: string): string[] {
+    return [...new Set(valueArg.split(/\r?\n/).map((entryArg) => entryArg.trim()).filter(Boolean))];
+  }
+
+  private isValidExactUri(valueArg: string): boolean {
+    if (/\s|\*|#/.test(valueArg)) {
+      return false;
+    }
+    try {
+      const url = new URL(valueArg);
+      return !['data:', 'file:', 'javascript:'].includes(url.protocol)
+        && !url.username
+        && !url.password
+        && !url.hash;
+    } catch {
+      return false;
+    }
+  }
+
+  private setDialogNumber(fieldArg: 'access' | 'id' | 'refresh' | 'grace', eventArg: Event) {
+    const value = Number((eventArg.target as HTMLInputElement).value);
+    if (fieldArg === 'access') this.dialogAccessTokenLifetime = value;
+    if (fieldArg === 'id') this.dialogIdTokenLifetime = value;
+    if (fieldArg === 'refresh') this.dialogRefreshTokenLifetime = value;
+    if (fieldArg === 'grace') this.dialogSecretGracePeriod = value;
+    this.dialogError = '';
+  }
+
+  private submitOidcAppConfigDialog() {
+    if (!this.dialogApp) return;
+    const redirectUris = this.parseLines(this.dialogRedirectUris);
+    const postLogoutRedirectUris = this.parseLines(this.dialogPostLogoutRedirectUris);
+    const allowedScopes = this.parseCsv(this.dialogAllowedScopes);
+    const configuredGrantTypes = this.parseCsv(this.dialogGrantTypes);
+    const supportedGrantTypes = ['authorization_code', 'client_credentials', 'refresh_token'];
+    const invalidGrantTypes = configuredGrantTypes.filter((grantArg) => !supportedGrantTypes.includes(grantArg));
+    const grantTypes = configuredGrantTypes
+      .filter((grantArg): grantArg is 'authorization_code' | 'client_credentials' | 'refresh_token' => supportedGrantTypes.includes(grantArg));
+    const invalidUris = [...redirectUris, ...postLogoutRedirectUris].filter((uriArg) => !this.isValidExactUri(uriArg));
+    const lifetimesAreValid = [this.dialogAccessTokenLifetime, this.dialogIdTokenLifetime]
+      .every((lifetimeArg) => Number.isInteger(lifetimeArg) && lifetimeArg >= 300 && lifetimeArg <= 86400)
+      && Number.isInteger(this.dialogRefreshTokenLifetime)
+      && this.dialogRefreshTokenLifetime >= 3600
+      && this.dialogRefreshTokenLifetime <= 7776000;
+    if (invalidGrantTypes.length) {
+      this.dialogError = `Unsupported grant types: ${invalidGrantTypes.join(', ')}.`;
+      return;
+    }
+    if (invalidUris.length) {
+      this.dialogError = `Invalid exact redirect URIs: ${invalidUris.join(', ')}.`;
+      return;
+    }
+    if (!grantTypes.length) {
+      this.dialogError = 'Add at least one supported grant type.';
+      return;
+    }
+    if (grantTypes.includes('authorization_code') && (!redirectUris.length || !allowedScopes.includes('openid'))) {
+      this.dialogError = 'The authorization_code grant requires a callback URI and the openid scope.';
+      return;
+    }
+    if (grantTypes.includes('refresh_token') && !grantTypes.includes('authorization_code')) {
+      this.dialogError = 'The refresh_token grant requires the authorization_code grant.';
+      return;
+    }
+    if (this.dialogClientType === 'public' && grantTypes.includes('client_credentials')) {
+      this.dialogError = 'Public clients cannot use the client_credentials grant.';
+      return;
+    }
+    if (!lifetimesAreValid) {
+      this.dialogError = 'Access and ID token lifetimes must be 300 to 86400 seconds; refresh family lifetime must be 3600 to 7776000 seconds.';
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminGaAppConfigureEventDetail>('idp-admin-ga-app-configure', {
+      appId: this.dialogApp.id,
+      clientType: this.dialogClientType,
+      isActive: this.dialogAppActive,
+      redirectUris,
+      postLogoutRedirectUris,
+      allowedScopes,
+      grantTypes,
+      oidcSettings: {
+        accessTokenLifetime: this.dialogAccessTokenLifetime,
+        idTokenLifetime: this.dialogIdTokenLifetime,
+        refreshTokenLifetime: this.dialogRefreshTokenLifetime,
+      },
+    });
+    this.closeDialog();
+  }
+
+  private submitOidcSecretRotateDialog() {
+    if (!this.dialogApp) return;
+    if (!Number.isInteger(this.dialogSecretGracePeriod) || this.dialogSecretGracePeriod < 0 || this.dialogSecretGracePeriod > 604800) {
+      this.dialogError = 'Grace period must be a whole number from 0 to 604800 seconds.';
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminGaAppRotateSecretEventDetail>('idp-admin-ga-app-rotate-secret', {
+      appId: this.dialogApp.id,
+      gracePeriodSeconds: this.dialogSecretGracePeriod,
+    });
+    this.closeDialog();
+  }
+
   private setDialogRoleField(fieldArg: 'key' | 'name' | 'description' | 'deleteConfirmation', eventArg: Event) {
     const value = (eventArg.target as HTMLInputElement).value;
     if (fieldArg === 'key') this.dialogRoleKey = this.normalizeRoleKey(value);
@@ -1810,6 +2015,60 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private renderOidcAppConfigDialog(): TemplateResult {
+    return html`
+      <div class="dialog-card wide" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Configure OIDC client</div><div class="muted">${this.dialogApp?.name || 'Platform app'} uses exact callback and logout URI allowlists.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          ${this.renderFormRow('Client type', 'Public clients use PKCE without a client secret.', html`
+            <select class="input" .value=${this.dialogClientType} @change=${(eventArg: Event) => { this.dialogClientType = (eventArg.target as HTMLSelectElement).value as 'public' | 'confidential'; }}>
+              <option value="confidential">Confidential</option>
+              <option value="public">Public</option>
+            </select>
+          `, true)}
+          ${this.renderFormRow('Active', 'Deactivation rejects authorization, exchange, refresh, and UserInfo.', html`<input type="checkbox" .checked=${this.dialogAppActive} @change=${(eventArg: Event) => { this.dialogAppActive = (eventArg.target as HTMLInputElement).checked; }} />`)}
+          ${this.renderFormRow('Callback URIs', 'One exact absolute URI per line; required for authorization_code.', html`<textarea class="textarea" .value=${this.dialogRedirectUris} @input=${(eventArg: Event) => { this.dialogRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
+          ${this.renderFormRow('Post-logout URIs', 'One exact RP-Initiated Logout destination per line.', html`<textarea class="textarea" .value=${this.dialogPostLogoutRedirectUris} @input=${(eventArg: Event) => { this.dialogPostLogoutRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
+          ${this.renderFormRow('Allowed scopes', 'Comma-separated scopes; authorization_code requires openid.', html`<input class="input" .value=${this.dialogAllowedScopes} @input=${(eventArg: Event) => { this.dialogAllowedScopes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+          ${this.renderFormRow('Grant types', 'authorization_code, client_credentials, and refresh_token are supported.', html`<input class="input" .value=${this.dialogGrantTypes} @input=${(eventArg: Event) => { this.dialogGrantTypes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+          <div class="mapping-row">
+            <div>${this.renderFormRow('Access token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogAccessTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('access', eventArg)} />`, true)}</div>
+            <div>${this.renderFormRow('ID token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogIdTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('id', eventArg)} />`, true)}</div>
+            <div>${this.renderFormRow('Refresh family seconds', '3600 to 7776000; absolute lifetime.', html`<input class="input" type="number" .value=${String(this.dialogRefreshTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('refresh', eventArg)} />`, true)}</div>
+          </div>
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button primary" @click=${() => this.submitOidcAppConfigDialog()}>Save OIDC configuration</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderOidcSecretRotateDialog(): TemplateResult {
+    return html`
+      <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Rotate client secret</div><div class="muted">The client ID remains stable. The old secret stays valid only during the overlap window.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          ${this.renderFormRow('Overlap seconds', 'Default 86400 (24 hours), maximum 604800 (7 days).', html`<input class="input" type="number" min="0" max="604800" .value=${String(this.dialogSecretGracePeriod)} @input=${(eventArg: Event) => this.setDialogNumber('grace', eventArg)} />`, true)}
+          <div class="notice-card"><idp-icon name="key" size="16"></idp-icon><div><div class="section-title">Shown once</div><div class="muted">The new plaintext secret appears once after rotation. Store it before dismissing the notice.</div></div></div>
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button destructive" @click=${() => this.submitOidcSecretRotateDialog()}>Rotate secret</button>
+        </div>
+      </div>
+    `;
+  }
+
   private renderCreateOrgDialog(): TemplateResult {
     return html`
       <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
@@ -1868,7 +2127,11 @@ export class IdpAdminShell extends DeesElement {
             ? this.renderCreateOrgDialog()
             : this.dialogMode === 'logout-confirm'
               ? this.renderLogoutConfirmDialog()
-              : this.renderAppRoleMappingsDialog();
+              : this.dialogMode === 'oidc-app-config'
+                ? this.renderOidcAppConfigDialog()
+                : this.dialogMode === 'oidc-secret-rotate'
+                  ? this.renderOidcSecretRotateDialog()
+                  : this.renderAppRoleMappingsDialog();
     return html`<div class="dialog-backdrop" @click=${() => this.closeDialog()}>${dialog}</div>`;
   }
 
@@ -1904,8 +2167,17 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private async copyCodeValue(valueArg: string) {
+    try {
+      await navigator.clipboard.writeText(valueArg);
+      this.showToast('Copied to clipboard.');
+    } catch {
+      this.showToast('Clipboard access was denied. Select and copy the value manually.', 'warn');
+    }
+  }
+
   private renderCodeBlock(valueArg: string): TemplateResult {
-    return html`<div class="code-block"><code>${valueArg}</code><idp-icon name="copy" size="13"></idp-icon></div>`;
+    return html`<div class="code-block"><code>${valueArg}</code><button class="plain-button ghost" aria-label="Copy value" @click=${() => this.copyCodeValue(valueArg)}><idp-icon name="copy" size="13"></idp-icon></button></div>`;
   }
 
   private renderOverview(): TemplateResult {
@@ -2600,20 +2872,41 @@ export class IdpAdminShell extends DeesElement {
         appArg.category || '-',
         appArg.connectionCount ?? '-',
         html`<idp-badge variant=${appArg.status === 'suspended' || appArg.status === 'rejected' ? 'error' : appArg.status === 'pending_review' ? 'warn' : 'ok'}>${(appArg.status || 'active').replace(/_/g, ' ')}</idp-badge>`,
-        appArg.status === 'pending_review'
-          ? html`
-              <div style="display:flex;gap:4px">
+        html`
+          <div class="cell-actions">
+            ${appArg.status === 'pending_review'
+              ? html`
                 <button class="plain-button outline" style="font-size:11px;color:var(--idp-ok);border-color:var(--idp-ok-border)" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: 'approve' })}>Approve</button>
                 <button class="plain-button ghost" style="font-size:11px;color:var(--idp-destructive)" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: 'reject' })}>Reject</button>
-              </div>
-            `
-          : html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: appArg.status === 'suspended' ? 'reinstate' : 'suspend' })}>${appArg.status === 'suspended' ? 'Reinstate' : 'Suspend'}</button>`,
+              `
+              : html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: appArg.status === 'suspended' ? 'reinstate' : 'suspend' })}>${appArg.status === 'suspended' ? 'Reinstate' : 'Suspend'}</button>`}
+            <button class="plain-button outline" style="font-size:11px" @click=${() => this.openOidcAppConfigDialog(appArg)}>Configure</button>
+            ${appArg.clientType === 'public'
+              ? html``
+              : html`<button class="plain-button outline" style="font-size:11px" @click=${() => this.openOidcSecretRotateDialog(appArg)}>Rotate secret</button>`}
+          </div>
+        `,
       ],
     }));
 
     return html`
       ${this.renderPageHeader('Platform Apps', 'Global and partner apps across the platform.')}
       <div class="body wide-body">
+        ${this.oidcClientSecret
+          ? html`
+              <div class="notice-card" style="margin-bottom:16px" role="status" aria-live="polite">
+                <idp-icon name="key" size="16"></idp-icon>
+                <div style="min-width:0;flex:1">
+                  <div class="section-title">New client secret for ${this.oidcClientSecret.clientId}</div>
+                  <div class="muted" style="margin:3px 0 10px">Copy this secret now. It cannot be retrieved after this notice is dismissed.</div>
+                  ${this.renderCodeBlock(this.oidcClientSecret.clientSecret)}
+                  <div class="cell-actions" style="justify-content:flex-end;margin-top:10px">
+                    <button class="plain-button outline" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppSecretDismissEventDetail>('idp-admin-ga-app-secret-dismiss', { appId: this.oidcClientSecret!.appId })}>I have stored the secret</button>
+                  </div>
+                </div>
+              </div>
+            `
+          : html``}
         <idp-data-table
           title="Platform apps"
           badge=${`${apps.length} total`}

package/ts_web/elements/idp-sso-connection-form.ts

@@ -10,6 +10,7 @@ export interface IIdpSsoConnectionItem {
   displayName: string;
   status: 'active' | 'disabled';
   emailDomains: string[];
+  domainVerifications?: IIdpSsoDomainVerificationItem[];
   entityId: string;
   ssoUrl: string;
   certificateCount: number;
@@ -18,6 +19,15 @@ export interface IIdpSsoConnectionItem {
   groupMappings: { idpGroup: string; orgRoles: string[] }[];
 }
 
+export interface IIdpSsoDomainVerificationItem {
+  domain: string;
+  status: 'pending' | 'verified';
+  dnsTxtName: string;
+  dnsTxtValue: string;
+  lastCheckedAt?: number;
+  verifiedAt?: number;
+}
+
 export interface IIdpSsoSpDetails {
   spEntityId: string;
   acsUrl: string;
@@ -44,6 +54,11 @@ export interface IIdpSsoDeleteEventDetail {
   connectionId: string;
 }
 
+export interface IIdpSsoVerifyDomainEventDetail {
+  connectionId: string;
+  domain: string;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'idp-sso-connection-form': IdpSsoConnectionForm;
@@ -67,6 +82,21 @@ export class IdpSsoConnectionForm extends DeesElement {
             displayName: 'Okta (acme.com)',
             status: 'active',
             emailDomains: ['acme.com', 'acme.io'],
+            domainVerifications: [
+              {
+                domain: 'acme.com',
+                status: 'verified',
+                dnsTxtName: '_idp-global-verification.acme.com',
+                dnsTxtValue: 'idp-global-verification=verified-example',
+                verifiedAt: Date.now(),
+              },
+              {
+                domain: 'acme.io',
+                status: 'pending',
+                dnsTxtName: '_idp-global-verification.acme.io',
+                dnsTxtValue: 'idp-global-verification=pending-example',
+              },
+            ],
             entityId: 'http://www.okta.com/exk9examples',
             ssoUrl: 'https://acme.okta.com/app/xyz/sso/saml',
             certificateCount: 1,
@@ -204,6 +234,40 @@ export class IdpSsoConnectionForm extends DeesElement {
         gap: 6px;
         margin-top: 8px;
       }
+      .domain-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: 10px;
+      }
+      .domain-proof {
+        padding: 10px 12px;
+        border: 1px solid var(--idp-border);
+        border-radius: 9px;
+        background: var(--idp-muted);
+      }
+      .domain-proof-head {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .domain-proof-head .table-action {
+        margin-left: auto;
+      }
+      .dns-record {
+        display: grid;
+        grid-template-columns: minmax(72px, auto) 1fr;
+        gap: 4px 10px;
+        margin-top: 8px;
+        font-size: 11px;
+      }
+      .dns-record-key {
+        color: var(--idp-muted-fg);
+      }
+      .dns-record-value {
+        font-family: var(--idp-mono, ui-monospace, monospace);
+        overflow-wrap: anywhere;
+      }
       .row-actions {
         display: flex;
         gap: 6px;
@@ -395,6 +459,7 @@ export class IdpSsoConnectionForm extends DeesElement {
   }
 
   private renderConnectionRow(connectionArg: IIdpSsoConnectionItem): TemplateResult {
+    const domainVerifications = connectionArg.domainVerifications;
     return html`
       <div class="row">
         <div class="row-head">
@@ -436,8 +501,53 @@ export class IdpSsoConnectionForm extends DeesElement {
           </div>
         </div>
         <div class="row-meta">${connectionArg.entityId} · ${connectionArg.ssoUrl} · ${connectionArg.certificateCount} cert${connectionArg.certificateCount === 1 ? '' : 's'}</div>
+        ${domainVerifications
+          ? html`
+              <div class="domain-list">
+                ${domainVerifications.map((verificationArg) => html`
+                  <div class="domain-proof">
+                    <div class="domain-proof-head">
+                      <idp-badge variant=${verificationArg.status === 'verified' ? 'ok' : 'outline'}>
+                        @${verificationArg.domain} ${verificationArg.status}
+                      </idp-badge>
+                      ${verificationArg.status === 'pending'
+                        ? html`
+                            <button
+                              class="table-action"
+                              aria-label=${`Verify DNS for ${verificationArg.domain}`}
+                              @click=${() => this.dispatchEvent(
+                                new CustomEvent<IIdpSsoVerifyDomainEventDetail>('idp-sso-verify-domain', {
+                                  detail: { connectionId: connectionArg.id, domain: verificationArg.domain },
+                                  bubbles: true,
+                                  composed: true,
+                                }),
+                              )}
+                            >
+                              Verify DNS
+                            </button>
+                          `
+                        : html``}
+                    </div>
+                    ${verificationArg.status === 'pending' && verificationArg.dnsTxtName && verificationArg.dnsTxtValue
+                      ? html`
+                          <div class="dns-record">
+                            <span class="dns-record-key">TXT name</span>
+                            <span class="dns-record-value">${verificationArg.dnsTxtName}</span>
+                            <span class="dns-record-key">TXT value</span>
+                            <span class="dns-record-value">${verificationArg.dnsTxtValue}</span>
+                          </div>
+                        `
+                      : html``}
+                  </div>
+                `)}
+              </div>
+            `
+          : html`
+              <div class="chip-row">
+                ${connectionArg.emailDomains.map((domainArg) => html`<idp-badge variant="accent">@${domainArg}</idp-badge>`)}
+              </div>
+            `}
         <div class="chip-row">
-          ${connectionArg.emailDomains.map((domainArg) => html`<idp-badge variant="accent">@${domainArg}</idp-badge>`)}
           ${connectionArg.groupMappings.map(
             (mappingArg) => html`<idp-badge variant="outline">${mappingArg.idpGroup} → ${mappingArg.orgRoles.join(', ')}</idp-badge>`,
           )}
@@ -548,7 +658,8 @@ export class IdpSsoConnectionForm extends DeesElement {
             <div class="title">SAML single sign-on</div>
             <div class="muted">
               Let members sign in through your organisation's identity provider. Users entering a
-              matching email domain are routed to your IdP automatically.
+              verified email domain are routed to your IdP automatically. Add the shown DNS TXT
+              record and verify ownership before account linking or just-in-time provisioning starts.
             </div>
           </div>
           ${!this.formOpen