UI: (Enterprise) Login form customization feature #30700

hellobontempo · 2025-05-20T23:17:30Z

Description

Users can simplify the web UI login experience and remove unwanted login methods by choosing a default auth method (and optional backup methods). These settings can be inherited by child namespaces.

Frontend compliment to https://github.com/hashicorp/vault-enterprise/pull/8097. Closes 9076.

To encourage best practices, creating custom login rules not supported as a form in the web ui and must happen via the API or CLI.

listing_visibility

The resulting login views vary slightly depending on whether or not the selected default (or backup) auth method has any mounts tuned with listing_visibility="unauth". If mount data is returned by the unauthenticated request to sys/internal/ui/mounts, then the web UI uses that path to log in and hides the path <input>.
If no data is returned, the web UI assumes the default login path (which is the same as the method name, i.e. ldap), but the custom input is available.

⚙️ Configuration options:

The login form either renders a dropdown or tabs depending on specific configuration combinations.
In some scenarios, the component supports toggling between a default view and an alternate view. Users can use a direct link to override any login settings or default behavior.

📋 Dropdown (default view)
▸ All supported auth methods show in a dropdown.
▸ No alternate view.

🗂️ Visible mount tabs (visible (unauth) mount tabs)
▸ Groups visible mounts (listing_visibility="unauth") by type and displays as tabs.
▸ Alternate view: full dropdown of all methods.

🔗 Direct link (via ?with= query param)
▸ If the param references a visible mount, that method renders by default and the mount path is assumed.
↳ Alternate view: full dropdown.
▸ If the param references a method type (legacy behavior), the method is preselected in the dropdown or its tab is selected.
↳ Alternate view: if other methods have visible mounts, the form can toggle between tabs and dropdown. The initial view depends on whether the chosen type is a tab.

🏢 Enterprise-only login settings
▸ A namespace can define a default method and/or preferred methods (i.e. "backups") and enable child namespaces to inherit these preferences.
✎ Both set:
▸ Default method shown initially.
▸ Alternate view: preferred methods in tab layout.
✎ Only one set:
▸ No alternate view.

🛠️ Advanced settings toggle reveals the custom path input:
🚫 No visible mounts:
▸ UI defaults to method type as path.
▸ "Advanced settings" shows a path input.
1️⃣ One visible mount:
▸ Path is assumed and hidden.
🔀 Multiple visible mounts:
▸ Path dropdown is shown.

📸 Screenshots

Default + Backup methods set with mount data

Advanced settings toggle is hidden because method has mount data available
Clicking "Sign in to view other methods" toggles to view backup methods
Advanced settings hides/shows for each tab depending on mount visibility

Default + Backup methods set with no mount data

UI assumes default login path for method and Advanced settings renders

Default only

Default method is set without backups so it is the only option. "Sign in with other methods" does not render

Direct links

?with= query param refers to an auth method type it is preselected in the dropdown (backward compatibility)

- `?with=` query param refers to a visible mount path

TODO only if you're a HashiCorp employee

Backport Labels: If this fix needs to be backported, use the appropriate backport/ label that matches the desired release branch. Note that in the CE repo, the latest release branch will look like backport/x.x.x, but older release branches will be backport/ent/x.x.x+ent.
- LTS: If this fixes a critical security vulnerability or severity 1 bug, it will also need to be backported to the current LTS versions of Vault. To ensure this, use all available enterprise labels.
ENT Breakage: If this PR either 1) removes a public function OR 2) changes the signature
of a public function, even if that change is in a CE file, double check that
applying the patch for this PR to the ENT repo and running tests doesn't
break any tests. Sometimes ENT only tests rely on public functions in CE
files.
Jira: If this change has an associated Jira, it's referenced either
in the PR description, commit message, or branch name.
RFC: If this change has an associated RFC, please link it in the description.
ENT PR: If this change has an associated ENT PR, please link it in the
description. Also, make sure the changelog is in this PR, not in your ENT PR.

github-actions · 2025-05-20T23:18:46Z

CI Results:
All Go tests succeeded! ✅

github-actions · 2025-05-20T23:19:53Z

Build Results:
All builds succeeded! ✅

hellobontempo · 2025-05-21T01:01:56Z

ui/app/components/auth/form-template.hbs

@@ -3,105 +3,103 @@
  SPDX-License-Identifier: BUSL-1.1
 }}

-<div {{did-insert this.initializeState}}>


moved initialization to the parent, so no more need for did-insert 🎉 . I recommend reviewing with ✅ Hide whitespace

hellobontempo · 2025-05-21T01:10:57Z

ui/app/components/auth/page.ts

+  }
+
+  private constructViews(view: FormView, tabData: UnauthMountsByType | null) {
+    return { view, tabData };


view is actually never used anywhere and only included it to make the form view logic easier to navigate. Without it, the dropdown view has to be deduced whether or not tabData exists. So for state that has an alternate view, but no tabs it would be alternateView = { tabData: null }. It felt strange to rely on an object of that shape for a truthy value. Alternatively, I could add a key like hasAlternateView but at that point it just seemed like I might as well say what said alternate view is to ease navigating these chaotic logic combinations 😅

hellobontempo · 2025-05-21T01:12:42Z

ui/app/routes/vault/cluster/auth.js

  */
  getMountOrTypeData(authMount, visibleAuthMounts) {
-    if (visibleAuthMounts?.[authMount]) {
-      return { path: authMount, ...visibleAuthMounts[authMount], isVisibleMount: true };
+    const sanitizedParam = sanitizePath(authMount); // strip leading/trailing slashes


added test here for this update

hellobontempo · 2025-05-21T01:13:05Z

ui/tests/integration/components/auth/form-template-test.js

@@ -180,37 +155,14 @@ module('Integration | Component | auth | form template', function (hooks) {
      assert.dom(AUTH_FORM.advancedSettings).doesNotExist();
    });

-    test('it renders the mount description', async function (assert) {


moved these tests to auth/tabs-test component

hellobontempo · 2025-05-21T01:13:28Z

ui/tests/integration/components/auth/form-template-test.js

unless otherwise noted, tests deleted here migrated to auth/page-test.js

hellobontempo · 2025-05-21T01:47:20Z

ui/app/components/auth/form-template.hbs

ui/app/components/auth/form-template.ts

ui/app/routes/vault/cluster/auth.js

ui/app/components/auth/form-template.ts

hellobontempo · 2025-05-22T15:16:28Z

Enterprise tests ✅

hellobontempo · 2025-05-22T21:24:27Z

ui/lib/config-ui/addon/components/login-settings/page/list.hbs

@@ -15,35 +15,52 @@

 {{#if @loginRules}}
  {{#each @loginRules as |rule|}}
-    <div class="list-item-row linked-block-item is-no-underline">


Makes the list item clickable

hellobontempo · 2025-05-22T22:13:06Z

* add request for custom login settings to auth route * add tests to page integration before updating logic * make tab component tests * move form state logic to parent page component * test updates for sanitizing query param in auth route * add custom login feature * add test for fetching login settings on ent only * add changelog * reword changelog * rename variable from showOtherMethods to showAlternateView * cleanup store * cleanup comments per PR feedback * abc * VAULT-34672 render line breaks in description * update endpoints after testing with live api * add test coverage * word * remove backup types from test-ns for testing * change to manually log in * add error handling for no login settings * add inheritance badge and make list item linkable

hellobontempo added 7 commits May 20, 2025 12:28

add request for custom login settings to auth route

75779e3

add tests to page integration before updating logic

5935a43

make tab component tests

a07f224

move form state logic to parent page component

cf1904f

test updates for sanitizing query param in auth route

3dbca86

add custom login feature

4e2c3dd

add test for fetching login settings on ent only

94e8c37

hellobontempo added this to the 1.20.0-rc milestone May 20, 2025

hellobontempo requested a review from a team as a code owner May 20, 2025 23:17

hellobontempo added the ui label May 20, 2025

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 20, 2025

add changelog

bbc146f

hellobontempo requested a review from a team as a code owner May 20, 2025 23:18

hellobontempo requested a review from erikapierr May 20, 2025 23:18

hellobontempo removed the request for review from erikapierr May 20, 2025 23:48

reword changelog

7eca86d

hellobontempo commented May 21, 2025

View reviewed changes

rename variable from showOtherMethods to showAlternateView

4709f81

hellobontempo commented May 21, 2025

View reviewed changes

cleanup store

3707237

hellobontempo mentioned this pull request May 21, 2025

UI: Custom login form feature #30589

Closed

6 tasks

lane-wetmore reviewed May 21, 2025

View reviewed changes

ui/app/components/auth/form-template.hbs Show resolved Hide resolved

ui/app/components/auth/form-template.ts Outdated Show resolved Hide resolved

ui/app/components/auth/form-template.ts Outdated Show resolved Hide resolved

ui/app/routes/vault/cluster/auth.js Outdated Show resolved Hide resolved

cleanup comments per PR feedback

e4ffed1

hellobontempo commented May 21, 2025

View reviewed changes

ui/app/components/auth/form-template.ts Show resolved Hide resolved

abc

40bdb25

hellobontempo requested a review from meirish May 21, 2025 17:42

hellobontempo added 6 commits May 21, 2025 11:40

VAULT-34672 render line breaks in description

fc148a6

update endpoints after testing with live api

453b483

add test coverage

87314c6

word

c58cfb9

remove backup types from test-ns for testing

b7f3c41

change to manually log in

561f9ca

lane-wetmore previously approved these changes May 22, 2025

View reviewed changes

Merge branch 'main' into VAULT-35204/login-customization-feature-2

e7c9871

vercel bot deployed to Preview May 22, 2025 18:28 View deployment

Monkeychip previously approved these changes May 22, 2025

View reviewed changes

add error handling for no login settings

b028ffa

hellobontempo dismissed stale reviews from Monkeychip and lane-wetmore via b028ffa May 22, 2025 19:43

add inheritance badge and make list item linkable

e368e55

drivera258 approved these changes May 22, 2025

View reviewed changes

hellobontempo commented May 22, 2025

View reviewed changes

hellobontempo merged commit 45fee5c into main May 22, 2025
33 checks passed

hellobontempo deleted the VAULT-35204/login-customization-feature-2 branch May 22, 2025 22:13

This was referenced May 30, 2025

Docs: GUI custom login feature #30799

Merged

UI: Fixes issue where backup tab was selected if they included default type #30805

Merged

UI: Update namespace key to namespace_path #30848

Merged

hc-github-team-secure-vault-core mentioned this pull request Jun 10, 2025

Backport of Docs: GUI custom login feature into release/1.20.x #30935

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UI: (Enterprise) Login form customization feature #30700

UI: (Enterprise) Login form customization feature #30700

Uh oh!

hellobontempo commented May 20, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 20, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 20, 2025 •

edited

Loading

Uh oh!

hellobontempo May 21, 2025

Uh oh!

hellobontempo May 21, 2025

Uh oh!

hellobontempo May 21, 2025

Uh oh!

hellobontempo May 21, 2025

Uh oh!

hellobontempo May 21, 2025

Uh oh!

hellobontempo commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hellobontempo commented May 22, 2025

Uh oh!

hellobontempo May 22, 2025

Uh oh!

hellobontempo commented May 22, 2025

Uh oh!

Uh oh!

Uh oh!

UI: (Enterprise) Login form customization feature #30700

UI: (Enterprise) Login form customization feature #30700

Uh oh!

Conversation

hellobontempo commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

To encourage best practices, creating custom login rules not supported as a form in the web ui and must happen via the API or CLI.

listing_visibility

⚙️ Configuration options:

📸 Screenshots

Default + Backup methods set with mount data

Default + Backup methods set with no mount data

Default only

Direct links

TODO only if you're a HashiCorp employee

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hellobontempo May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hellobontempo May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hellobontempo May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hellobontempo May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hellobontempo May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hellobontempo commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hellobontempo commented May 22, 2025

Uh oh!

hellobontempo May 22, 2025

Choose a reason for hiding this comment

Uh oh!

hellobontempo commented May 22, 2025

Uh oh!

Uh oh!

Uh oh!

hellobontempo commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading