Frontend: domain terminology, object-keyed origins, 🔑 auth host in table, display-time ordering

frontend/src/admin/AdminDialogs.vue

@@ -15,11 +15,11 @@ const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'
 const NO_SUBMIT_TYPES = new Set([])
 const discoveryUrl = computed(() => `${window.location.origin}/.well-known/openid-configuration`)
 
-// The rp-id of the realm being edited in the 'realm-edit' dialog
-const realmRpId = computed(() => props.dialog?.data?.rp_id || '')
+// The rp-id of the domain being edited in the 'domain-edit' dialog
+const dialogRpId = computed(() => props.dialog?.data?.rp_id || '')
 
 // Initialize validation properties
-if (props.dialog?.data && props.dialog.type === 'realm-edit') {
+if (props.dialog?.data && props.dialog.type === 'domain-edit') {
   if (!('originValidation' in props.dialog.data)) {
     props.dialog.data.originValidation = (props.dialog.data.origins || []).map(() => null)
   }
@@ -33,7 +33,7 @@ if (props.dialog?.data && props.dialog.type === 'realm-edit') {
 // (entries may be hosted elsewhere, or a new domain whose DNS is not
 // routed to this instance yet).
 const isValidationInvalid = computed(() => {
-  if (props.dialog?.type !== 'realm-edit') return false
+  if (props.dialog?.type !== 'domain-edit') return false
   const d = props.dialog.data
   const bad = v => v === 'invalid' || v === 'validating'
   if (d.originValidation?.some(bad)) return true
@@ -47,7 +47,7 @@ const isValidationInvalid = computed(() => {
 // from the hostname — the submit handler splits the two lists apart.
 function isRelatedEntry(origin) {
   const h = originHostname(origin)
-  return !!(h && realmRpId.value && !isWithinDomain(origin, realmRpId.value))
+  return !!(h && dialogRpId.value && !isWithinDomain(origin, dialogRpId.value))
 }
 const relatedEntries = computed(() => {
   const d = props.dialog?.data
@@ -86,7 +86,7 @@ function addOrigin() {
   // very domain (so saving never locks them out), else with the rp-id
   // (https default).
   const onThisDomain = authStore.settings?.rp_id && d.rp_id === authStore.settings.rp_id
-  d.origins.push(onThisDomain ? window.location.origin : realmRpId.value)
+  d.origins.push(onThisDomain ? window.location.origin : dialogRpId.value)
   d.originValidation.push(null)
   validateOrigin(d.origins.length - 1)
 }
@@ -148,7 +148,7 @@ async function validateOriginConnectivity(i) {
     if (response.ok) {
       const data = await response.json()
       // Valid when the entry is served by this instance for the edited domain
-      d.originValidation[i] = (data.rp_id && data.rp_id === realmRpId.value) ? 'valid' : 'mismatch'
+      d.originValidation[i] = (data.rp_id && data.rp_id === dialogRpId.value) ? 'valid' : 'mismatch'
     } else {
       d.originValidation[i] = 'unreachable'
     }
@@ -207,9 +207,9 @@ watch(() => relatedEntries.value.map(asHttpsOrigin).join('|'), testWellKnown, {
 // so the list always shows what is allowed ('*.example.com' = the domain and
 // all its subdomains). Removing the last in-domain entry is blocked in the
 // row menu, so the list never becomes empty afterwards.
-watch(realmRpId, rp => {
+watch(dialogRpId, rp => {
   const d = props.dialog?.data
-  if (props.dialog?.type !== 'realm-edit' || !d?.isNew) return
+  if (props.dialog?.type !== 'domain-edit' || !d?.isNew) return
   if (!d.origins.length && isWellFormedDomain(rp)) {
     d.origins.push('*.' + rp)
     d.originValidation.push(null)
@@ -220,33 +220,32 @@ watch(realmRpId, rp => {
 
 const openMenu = ref(null)
 
-// Host[:port] of an entry or the auth_host value, for comparison.
-function hostWithPort(value) {
-  if (!value?.trim()) return null
-  if (value.trim().startsWith('*.')) return null
-  try { return new URL(value.startsWith('http') ? value : 'https://' + value).host } catch { return null }
+// Origins-dict key form of an entry (https:// omitted), also used for the
+// auth_host value.
+function entryKey(value) {
+  return value?.trim().replace(/^https:\/\//, '').replace(/\/+$/, '') || ''
 }
 
 function isAuthHostEntry(origin) {
   const d = props.dialog?.data
-  const host = hostWithPort(origin)
-  return !!(host && d?.auth_host && host === hostWithPort(d.auth_host))
+  const key = entryKey(origin)
+  return !!(key && d?.auth_host && key === d.auth_host)
 }
 
 function setAuthHost(i) {
   const d = props.dialog?.data
   if (!d) return
-  let entry = d.origins[i].trim()
-  if (entry.startsWith('*.')) {
+  let key = entryKey(d.origins[i])
+  if (key.startsWith('*.')) {
     // A wildcard cannot be the auth host — create a concrete auth.<base> entry
-    entry = 'auth.' + entry.slice(2)
-    if (!d.origins.some(o => hostWithPort(o) === entry)) {
-      d.origins.push(entry)
+    key = 'auth.' + key.slice(2)
+    if (!d.origins.some(o => entryKey(o) === key)) {
+      d.origins.push(key)
       d.originValidation.push(null)
       validateOrigin(d.origins.length - 1)
     }
   }
-  d.auth_host = hostWithPort(entry) || entry
+  d.auth_host = key
   openMenu.value = null
 }
 
@@ -288,7 +287,7 @@ function onRemoveOrigin(i) {
         <template v-else-if="dialog.type==='user-update-name'">Edit User Name</template>
         <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">{{ dialog.type === 'perm-create' ? 'Create Permission' : 'Edit Permission' }}</template>
         <template v-else-if="dialog.type==='oidc-edit'">{{ dialog.data?.isNew ? 'New OIDC Client' : 'OIDC Client' }}</template>
-        <template v-else-if="dialog.type==='realm-edit'">{{ dialog.data?.isNew ? 'Add Domain' : 'Edit Domain' }}</template>
+        <template v-else-if="dialog.type==='domain-edit'">{{ dialog.data?.isNew ? 'Add Domain' : 'Edit Domain' }}</template>
         <template v-else-if="dialog.type==='confirm'">Confirm</template>
       </h3>
       <form @submit.prevent="$emit('submitDialog')" class="modal-form">
@@ -346,9 +345,9 @@ function onRemoveOrigin(i) {
           <label>Domain Scope
             <input v-model="dialog.data.domain" data-form-type="other" />
           </label>
-          <p class="small muted">A domain restricts this permission to that host (any configured realm's rp-id or a subdomain of it). An OIDC client UUID sends it as a <em>groups</em> claim to that client.</p>
+          <p class="small muted">A domain restricts this permission to that host (any configured domain's rp-id or a subdomain of it). An OIDC client UUID sends it as a <em>groups</em> claim to that client.</p>
         </template>
-        <template v-else-if="dialog.type==='realm-edit'">
+        <template v-else-if="dialog.type==='domain-edit'">
           <template v-if="dialog.data.isNew">
             <label>Domain (rp-id)
               <input v-model="dialog.data.rp_id" placeholder="example.com" data-form-type="other" required />

frontend/src/admin/AdminOverview.vue

@@ -1,19 +1,20 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'
-import { formatDate } from '@/utils/helpers'
+import { formatDate, originDisplayEntries } from '@/utils/helpers'
 
 const props = defineProps({
   info: Object,
   orgs: Array,
   permissions: Array,
   oidcClients: Array,
-  realms: Array,
+  domains: Array,
+  currentRpId: { type: String, default: '' },
   permissionSummary: Object,
   navigationDisabled: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'createOidcClient', 'openOidcClient', 'deleteOidcClient', 'createRealm', 'openRealm', 'deleteRealm', 'navigateOut'])
+const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'createOidcClient', 'openOidcClient', 'deleteOidcClient', 'createDomain', 'openDomain', 'deleteDomain', 'navigateOut'])
 
 // Template refs for navigation
 const orgActionsRef = ref(null)
@@ -38,17 +39,11 @@ function domainDisplay(domain) {
   return oidcClientNames.value[domain] || domain
 }
 
-// Origins a domain accepts sign-in from: an explicit in-domain allow-list
-// replaces the default "*.rp_id" wildcard; related domains (ROR) are always
-// listed individually — they cannot use wildcards.
-function originHost(origin) {
-  if (origin.startsWith('*.')) return origin
-  try { return new URL(origin).host } catch { return origin }
-}
-function allowedOrigins(realm) {
-  const inDomain = realm.origins?.length ? realm.origins.map(originHost) : ['*.' + realm.rp_id]
-  return [...inDomain, ...(realm.related_origins || []).map(originHost)]
-}
+// Domains display in alphabetical rp-id order — the stored configuration
+// is an unordered object.
+const sortedDomains = computed(() =>
+  [...(props.domains || [])].sort((a, b) => a.rp_id.localeCompare(b.rp_id))
+)
 
 // Map OIDC client UUIDs to their group permissions (sorted by scope)
 const clientGroups = computed(() => {
@@ -438,7 +433,7 @@ defineExpose({ focusFirstElement })
     </table>
   </div>
 
-  <div v-if="isMasterAdmin" class="realms-section">
+  <div v-if="isMasterAdmin" class="domains-section">
     <div class="section-header">
       <h2>Domains</h2>
       <p class="section-description">
@@ -446,38 +441,32 @@ defineExpose({ focusFirstElement })
       </p>
     </div>
     <div>
-      <button @click="$emit('createRealm')">+ Add Domain</button>
+      <button @click="$emit('createDomain')">+ Add Domain</button>
     </div>
     <table class="org-table">
       <thead>
         <tr>
           <th>Domain</th>
-          <th>Auth Host</th>
           <th>Allowed Origins</th>
           <th class="center"></th>
         </tr>
       </thead>
       <tbody>
-        <tr v-if="!realms || realms.length === 0">
-          <td colspan="4" class="center muted">No domains configured</td>
+        <tr v-if="!domains || domains.length === 0">
+          <td colspan="3" class="center muted">No domains configured</td>
         </tr>
-        <tr v-for="realm in realms" :key="realm.rp_id">
+        <tr v-for="domain in sortedDomains" :key="domain.rp_id">
           <td class="perm-name-cell">
             <div class="perm-title">
-              <a :href="'#realm:' + realm.rp_id" @click.prevent="$emit('openRealm', realm)">{{ realm.rp_name || realm.rp_id }}</a>
-              <span v-if="realm.is_default" class="badge badge-current">Default</span>
+              <a :href="'#domain:' + domain.rp_id" @click.prevent="$emit('openDomain', domain)">{{ domain.rp_name || domain.rp_id }}</a>
             </div>
             <div class="perm-id-info">
-              <span class="id-text">{{ realm.rp_id }}</span>
+              <span class="id-text">{{ domain.rp_id }}</span>
             </div>
           </td>
-          <td class="realm-auth-host">
-            <span v-if="realm.effective_auth_host">{{ realm.effective_auth_host }}<span v-if="!realm.auth_host" class="muted"> (shared)</span></span>
-            <span v-else class="muted">—</span>
-          </td>
-          <td class="realm-origins">{{ allowedOrigins(realm).join(', ') }}</td>
+          <td class="domain-origins"><span v-for="(e, i) in originDisplayEntries(domain)" :key="e.key">{{ i ? ', ' : '' }}{{ e.key }}{{ e.auth ? ' 🔑' : '' }}</span></td>
           <td class="center">
-            <button v-if="!realm.is_default" @click="$emit('deleteRealm', realm)" class="icon-btn delete-icon" aria-label="Delete domain" title="Delete domain">❌</button>
+            <button v-if="domain.rp_id !== currentRpId" @click="$emit('deleteDomain', domain)" class="icon-btn delete-icon" aria-label="Delete domain" title="Delete domain">❌</button>
           </td>
         </tr>
       </tbody>
@@ -508,10 +497,9 @@ defineExpose({ focusFirstElement })
 .oidc-clients-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
 .client-groups { font-size: 0.85rem; color: var(--color-text-muted); max-width: 200px; font-family: var(--font-mono, monospace); }
 
-/* Realms Section */
-.realms-section { margin-top: var(--space-2xl); }
-.realms-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
-.realm-auth-host { font-family: var(--font-mono, monospace); font-size: 0.85rem; }
-.realm-origins { font-family: var(--font-mono, monospace); font-size: 0.85rem; }
-.realms-section .perm-title { display: flex; align-items: center; gap: 0.5rem; }
+/* Domains Section */
+.domains-section { margin-top: var(--space-2xl); }
+.domains-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
+.domain-origins { font-family: var(--font-mono, monospace); font-size: 0.85rem; }
+.domains-section .perm-title { display: flex; align-items: center; gap: 0.5rem; }
 </style>

frontend/src/components/CredentialList.vue

@@ -32,7 +32,7 @@
           </div>
           <h4 class="item-title">{{ getCredentialAuthName(credential) }}</h4>
           <div class="item-actions">
-            <span v-if="credential.rp_id && settings?.rp_id && credential.rp_id !== settings.rp_id" class="badge badge-realm" :title="`Passkey registered for ${credential.rp_id}`">{{ credential.rp_id }}</span>
+            <span v-if="credential.rp_id && settings?.rp_id && credential.rp_id !== settings.rp_id" class="badge badge-domain" :title="`Passkey registered for ${credential.rp_id}`">{{ credential.rp_id }}</span>
             <span v-if="credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid" class="badge badge-current">Current</span>
             <span v-else-if="hoveredCredentialUuid === credential.credential" class="badge badge-current">Selected</span>
             <span v-else-if="hoveredSessionCredentialUuid === credential.credential" class="badge badge-current">Linked</span>

frontend/src/components/ProfileView.vue

@@ -54,7 +54,7 @@
         <p class="section-description">Ideally have at least two passkeys in case you lose one. More than one user can be registered on the same device, giving you a choice at login. <a href="https://bitwarden.com/pricing/" target="_blank" rel="noopener noreferrer">Bitwarden</a> can sync one passkey to all your devices. Other secure options include <b>local passkeys</b>, as well as hardware keys such as <a href="https://www.yubico.com" target="_blank" rel="noopener noreferrer">YubiKey</a>. Cloud sync via Google, Microsoft or iCloud is discouraged.</p>
       </div>
       <div class="section-body">
-        <div v-if="missingRealmPasskey" class="realm-enroll-notice">
+        <div v-if="missingDomainPasskey" class="domain-enroll-notice">
           <p>You don't have a passkey for <strong>{{ rpName }}</strong> ({{ authStore.settings.rp_id }}) yet. Add one to log in here directly.</p>
           <button @click="addNewCredential" class="btn-primary">Add Passkey for {{ authStore.settings.rp_id }}</button>
         </div>
@@ -414,7 +414,7 @@ const hasMultipleSessions = computed(() => Object.keys(sessions.value).length >
 const credentials = computed(() =>
   Object.entries(authStore.userInfo.credentials).map(([uuid, c]) => ({ ...c, credential: uuid }))
 )
-const missingRealmPasskey = computed(() => {
+const missingDomainPasskey = computed(() => {
   const rpId = authStore.settings?.rp_id
   if (!rpId) return false
   return !credentials.value.some(c => c.rp_id === rpId)

frontend/src/components/RemoteAuthPermit.vue

@@ -53,7 +53,7 @@
       <!-- Device info display (shown when 3 words match a request) -->
       <div v-else-if="deviceInfo" class="device-info">
         <p class="device-permit-text">Permit {{ deviceInfo.action === 'register' ? 'registration' : 'login' }} to <strong>{{ deviceInfo.host }}</strong></p>
-        <p v-if="crossRealmNotice" class="device-meta realm-notice">on <strong>{{ deviceInfo.rp_name || deviceInfo.rp_id }}</strong><template v-if="deviceInfo.rp_name"> ({{ deviceInfo.rp_id }})</template></p>
+        <p v-if="crossDomainNotice" class="device-meta domain-notice">on <strong>{{ deviceInfo.rp_name || deviceInfo.rp_id }}</strong><template v-if="deviceInfo.rp_name"> ({{ deviceInfo.rp_id }})</template></p>
         <p class="device-meta">{{ deviceInfo.user_agent_pretty || '—' }}</p>
 
         <p v-if="error" class="error-message">{{ error }}</p>
@@ -123,7 +123,7 @@ watch(deviceInfo, (newVal) => {
   emit('deviceInfoVisible', !!newVal)
 })
 
-const crossRealmNotice = computed(() => {
+const crossDomainNotice = computed(() => {
   const info = deviceInfo.value
   if (!info?.rp_id) return false
   const ownRpId = settings.value?.rp_id
@@ -947,7 +947,7 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
   font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
 }
 
-.realm-notice {
+.domain-notice {
   color: var(--color-text);
   font-family: inherit;
   font-size: 0.9rem;

frontend/src/utils/helpers.js

@@ -41,3 +41,26 @@ export const hostIP = ip => {
     return ip
   }
 }
+
+// Display-time ordering of a domain's configured origins (the stored
+// objects are unordered): the auth host first (flagged), then in-domain
+// entries (exact rp-id, then alphabetical), then related domains
+// alphabetically. An empty origins object shows as the '*.rp_id' default.
+export function originDisplayEntries(domain) {
+  const origins = domain.origins || {}
+  const keys = Object.keys(origins)
+  const authKey = keys.find(k => origins[k] !== true && origins[k]?.auth_host)
+  const inDomain = keys.filter(k => k !== authKey).sort((a, b) => {
+    if (a === domain.rp_id) return -1
+    if (b === domain.rp_id) return 1
+    return a.localeCompare(b)
+  })
+  const rows = []
+  if (authKey) rows.push({ key: authKey, auth: true })
+  for (const k of inDomain) rows.push({ key: k, auth: false })
+  if (!keys.length) rows.push({ key: '*.' + domain.rp_id, auth: false })
+  for (const k of Object.keys(domain.related || {}).sort()) {
+    rows.push({ key: k, auth: false, related: true })
+  }
+  return rows
+}