Move fetching unauthenticated mounts to the route #30509

hellobontempo · 2025-05-03T00:16:35Z

Description

Fetching mounts in the component started to feel really awkward and resulted in a lot of manual state management. The sys/internal/ui/mounts request has to be re-fetched anytime the namespace query param changes anyway (which can happen when the namespace input is updated).

While I don't entirely agree with the namespace being a query param in the URL (see note below) it's out of scope to change it for this auth form refactor work. In short, fetching this data in the route model hook seems to most sensible and as you can see drastically cleaned up the component logic 🎉

Why the namespace param in the url is confusing
The namespace architecture of the web ui (and vault) is confusing because there is a narrow distinction between authenticating vs navigating to a namespace.

authenticating: Users can only log in to namespace where their auth method is mounted**. For example, if the ldap method is mounted in the admin/ namespace, users can only log in to the admin namespace.
navigating: Once authenticated, users can navigate to whatever namespace their policy grants access to. So if a user logs in the admin/ but has access to admin/west they can navigate to that namespace. But they cannot authenticate to admin/west

**Tokens generated in a namespace can log in without specifying the namespace and will be navigated accordingly because their root namespace is returned as part of the token data.

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-03T00:20:27Z

Build Results:
All builds succeeded! ✅

github-actions · 2025-05-03T00:40:53Z

CI Results:
All Go tests succeeded! ✅

hellobontempo · 2025-05-04T00:52:57Z

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

-    this.authTabs = null;
-    // fetch mounts for that namespace
-    this.fetchMounts.perform(500);


no longer necessary since the namespace update re-fires the model hook which re-requests mounts 🎉

hellobontempo · 2025-05-04T00:53:30Z

ui/app/components/auth/form/base.hbs

@@ -22,7 +22,7 @@
      @text="Sign in"
      @isFullWidth={{true}}
      type="submit"
-      class="has-top-margin-m has-bottom-margin-m"
+      class="has-top-margin-xl has-bottom-margin-xl"


I kept accidentally clicking "Sign in with other methods" 🙃 so added some spacing

hellobontempo · 2025-05-04T01:23:10Z

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

+
+  initializeState() {
+    // FORMAT MOUNT DATA
+    this.authTabData = this._formatTabs();


formatting happens here instead of in the route because there will be some additional logic if the cluster has login customizations (like a default method set)

hellobontempo · 2025-05-04T01:23:41Z

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

-          // SET FORM STATE
-          if (!this.args.preselectedAuthType) {
-            // set selectedAuthMethod auth type to first tab if nothing has been preselected
-            this.setAuthTypeFromTab(0);
-          }
-          // selectedTabIndex returns -1 if selectedAuthMethod is not a tab (i.e. preselected method exists)
-          // so display the dropdown of other methods (and not tabs)
-          this.showOtherMethods = this.selectedTabIndex < 0 ? true : false;


setting up the form state moved to initializeFormState

hellobontempo · 2025-05-05T01:44:08Z

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

  onSuccess: CallableFunction;
-}
-
-interface AuthTabs {


moved to a d.ts file

hellobontempo · 2025-05-05T01:45:58Z

ui/app/components/auth/namespace-input.hbs

-            @value={{@namespace}}
-            autocomplete="namespace"
+            @value={{@namespaceValue}}
+            autocomplete="off"


follow-on from #30444

hellobontempo · 2025-05-05T01:49:05Z

ui/app/components/auth/page.js


  get cspError() {
    const isStandby = this.args.cluster.standby;
    const hasConnectionViolations = this.csp.connectionViolations.length;
    return isStandby && hasConnectionViolations ? CSP_ERROR : '';
  }

+  get authTabData() {


This getter will eventually also include logic for managing tabs depending on the login customization settings. I decided it should live here because it only needs to be computed once (based on the fetch mounts request in the route) and does not change with user interactions (which everything in Auth::FormTemplate does).

It could also technically live in the route, but having it in the component makes it easier to test

hellobontempo · 2025-05-05T01:52:19Z

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

  }

  resetController(controller) {
    controller.set('authMethod', 'token');
  }

-  afterModel() {
+  afterModel(model) {


Moved the transition to the afterModel hook because Error: TransitionAborted was occasionally failing the wrapped_token tests. This way the model gets to cleanly finish its transition and then we redirect the user.

double 🎉

hellobontempo · 2025-05-05T02:07:58Z

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

    }
-    return super.model(...arguments);


super.model() returned the cluster model previously

vault/ui/app/routes/vault/cluster/cluster-route-base.js

Lines 16 to 18 in c1754f5

model() {

return this.modelFor('vault.cluster');

},

hellobontempo · 2025-05-05T02:08:24Z

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

        clusterId,
        backend: 'token',
        data: { token: auth.clientToken },
        selectedAuth: 'token',
      });
-      // handles transition
-      return authController.send('authSuccess', authResponse);


moved to afterModel hook

hellobontempo · 2025-05-05T02:09:35Z

ui/app/utils/supported-login-methods.ts

@@ -17,7 +17,7 @@ export const BASE_LOGIN_METHODS = [
  },
  {
    type: 'userpass',
-    displayName: 'Username',


lots of methods use username and password to login, changed this to match vault documentation so it's clear this is referencing the userpass auth type

Monkeychip · 2025-05-05T15:36:47Z

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

@@ -7,15 +7,14 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';


Love to see these no longer needed

Monkeychip · 2025-05-05T15:37:33Z

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

 import { ALL_LOGIN_METHODS, supportedTypes } from 'vault/utils/supported-login-methods';
 import { getRelativePath } from 'core/utils/sanitize-path';

 import type FlagsService from 'vault/services/flags';
 import type Store from '@ember-data/store';
 import type VersionService from 'vault/services/version';
 import type ClusterModel from 'vault/models/cluster';
+import type { AuthTabData } from 'vault/vault/auth/form';


Is the double 'vault/vault' intentional?

Yep - it's just where the type declarations live https://github.com/hashicorp/vault/blob/main/ui/app/components/secret-engine/configure-ssh.ts#L12

Monkeychip · 2025-05-05T15:39:21Z

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

@@ -29,32 +28,24 @@ import type { HTMLElementEvent } from 'vault/forms';
 * dynamically renders the corresponding form.
 *
 *
+ * @param {object} authTabData - auth methods to render as tabs, contains mount data for any mounts with listing_visibility="unauth"


great description!

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

Monkeychip · 2025-05-05T16:02:59Z

ui/tests/acceptance/oidc-provider-test.js

@@ -155,9 +155,12 @@ module('Acceptance | oidc provider', function (hooks) {
        'Once you log in, you will be redirected back to your application. If you require login credentials, contact your administrator.',
        'Has updated text for client authorization flow'
      );
-    await fillIn(AUTH_FORM.method, authMethodPath);
+
+    await fillIn(GENERAL.selectByAttr('auth-method'), 'userpass');


Thank you for the cleanup!

Monkeychip

Biggest comment is on the use of setTimeout. However, this is side-branch and I don't consider it blocking but more of a recommendation. Really great description on the PR—that makes any future questions/debugging so much easier. Thank you for taking the time to be detailed there.

* UI: Move `wrapped_token` login functionality to route (#30465) * move token unwrap functionality to page component * update mfa test * remove wrapped_token logic from page component * more cleanup to relocate unwrap logic * move wrapped_token to route * move unwrap tests to acceptance * move mfa form back * add some padding * update mfa-form tests * get param from params * wait for auth form on back * run rests * UI: Add MFA support for SSO methods (#30489) * initial implementation of mfa validation for sso methods * update typescript interfaces * add stopgap changes to auth service * switch order backend is defined * update login form for tests even though it will be deleted * attempt to stabilize wrapped_query test * =update login form test why not * Update ui/app/components/auth/form/saml.ts Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com> --------- Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com> * Move CSP error to page component (#30492) * initial implementation of mfa validation for sso methods * update typescript interfaces * add stopgap changes to auth service * switch order backend is defined * update login form for tests even though it will be deleted * attempt to stabilize wrapped_query test * =update login form test why not * move csp error to page component * move csp error to page component * Move fetching unauthenticated mounts to the route (#30509) * rename namespace arg to namespaceQueryParam * move fetch mounts to route * add margin to sign in button spacing * update selectors for oidc provider test * add todo delete comments * fix arg typo in test * change method name * fix args handling tab click * remove tests that no longer relate to components functionality * add tests for preselectedAuthType functionality * move typescript interfaces, fix selector * add await * oops * move format method down, make private * move tab formatting to the route * move to page object * fix token unwrap aborting transition * not sure what that is doing there.. * add comments * rename to presetAuthType * use did-insert instead * UI: Implement `Auth::FormTemplate` (#30521) * replace Auth::LoginForm with Auth::FormTemplate * first round of test updates * return null if mounts object is empty * add comment and test for empty sys/internal/mounts data * more test updates * delete listing_visibility test, delete login-form component test * update divs to Hds::Card::Container * add overflow class * remove unused getters * move requesting stored auth type to page component * fix typo * Update ui/app/components/auth/form/oidc-jwt.ts make comment make more sense * small cleanup items, update imports * Delete old auth components (#30527) * delete old components * update codeowners * Update `with` query param functionality (#30537) * update path input to type=hidden * add test coverage * update page test * update auth route * delete login form * update ent test * consolidate logic in getter * add more comments * more comments.. * rename selector * refresh model as well * redirect for invalid query params * move unwrap to redirect * only redirect on invalid query params * add tests for query param * test selector updates * remove todos, update relevant ones with initials * add changelog --------- Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com>

* UI: Move `wrapped_token` login functionality to route (hashicorp#30465) * move token unwrap functionality to page component * update mfa test * remove wrapped_token logic from page component * more cleanup to relocate unwrap logic * move wrapped_token to route * move unwrap tests to acceptance * move mfa form back * add some padding * update mfa-form tests * get param from params * wait for auth form on back * run rests * UI: Add MFA support for SSO methods (hashicorp#30489) * initial implementation of mfa validation for sso methods * update typescript interfaces * add stopgap changes to auth service * switch order backend is defined * update login form for tests even though it will be deleted * attempt to stabilize wrapped_query test * =update login form test why not * Update ui/app/components/auth/form/saml.ts Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com> --------- Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com> * Move CSP error to page component (hashicorp#30492) * initial implementation of mfa validation for sso methods * update typescript interfaces * add stopgap changes to auth service * switch order backend is defined * update login form for tests even though it will be deleted * attempt to stabilize wrapped_query test * =update login form test why not * move csp error to page component * move csp error to page component * Move fetching unauthenticated mounts to the route (hashicorp#30509) * rename namespace arg to namespaceQueryParam * move fetch mounts to route * add margin to sign in button spacing * update selectors for oidc provider test * add todo delete comments * fix arg typo in test * change method name * fix args handling tab click * remove tests that no longer relate to components functionality * add tests for preselectedAuthType functionality * move typescript interfaces, fix selector * add await * oops * move format method down, make private * move tab formatting to the route * move to page object * fix token unwrap aborting transition * not sure what that is doing there.. * add comments * rename to presetAuthType * use did-insert instead * UI: Implement `Auth::FormTemplate` (hashicorp#30521) * replace Auth::LoginForm with Auth::FormTemplate * first round of test updates * return null if mounts object is empty * add comment and test for empty sys/internal/mounts data * more test updates * delete listing_visibility test, delete login-form component test * update divs to Hds::Card::Container * add overflow class * remove unused getters * move requesting stored auth type to page component * fix typo * Update ui/app/components/auth/form/oidc-jwt.ts make comment make more sense * small cleanup items, update imports * Delete old auth components (hashicorp#30527) * delete old components * update codeowners * Update `with` query param functionality (hashicorp#30537) * update path input to type=hidden * add test coverage * update page test * update auth route * delete login form * update ent test * consolidate logic in getter * add more comments * more comments.. * rename selector * refresh model as well * redirect for invalid query params * move unwrap to redirect * only redirect on invalid query params * add tests for query param * test selector updates * remove todos, update relevant ones with initials * add changelog --------- Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com>

hellobontempo added 2 commits May 2, 2025 15:30

rename namespace arg to namespaceQueryParam

18fcf96

move fetch mounts to route

a477f5c

hellobontempo requested a review from a team as a code owner May 3, 2025 00:16

hellobontempo added the pr/no-changelog label May 3, 2025

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

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

hellobontempo added 8 commits May 3, 2025 17:20

add margin to sign in button spacing

0aea79b

update selectors for oidc provider test

e8e5aee

add todo delete comments

0850be6

fix arg typo in test

4c3133d

change method name

b0021ca

fix args handling tab click

9cd824d

remove tests that no longer relate to components functionality

b742d74

add tests for preselectedAuthType functionality

634090e

hellobontempo commented May 4, 2025

View reviewed changes

hellobontempo added 4 commits May 3, 2025 18:17

move typescript interfaces, fix selector

e4e821f

add await

8c4f894

oops

a8db706

move format method down, make private

2172845

hellobontempo commented May 4, 2025

View reviewed changes

hellobontempo added 4 commits May 3, 2025 19:27

move tab formatting to the route

790361d

move to page object

f06424f

fix token unwrap aborting transition

0c1cce8

not sure what that is doing there..

b91a348

hellobontempo commented May 5, 2025

View reviewed changes

add comments

c2db495

hellobontempo commented May 5, 2025

View reviewed changes

rename to presetAuthType

7f24d3f

Monkeychip reviewed May 5, 2025

View reviewed changes

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

Monkeychip reviewed May 5, 2025

View reviewed changes

Monkeychip approved these changes May 5, 2025

View reviewed changes

use did-insert instead

42e903b

hellobontempo merged commit e77f206 into VAULT-35470/wire-up-accessible-auth-components May 5, 2025
25 checks passed

hellobontempo deleted the fetch-mounts-in-route branch May 5, 2025 17:05

Move fetching unauthenticated mounts to the route #30509

Move fetching unauthenticated mounts to the route #30509

Uh oh!

Conversation

hellobontempo commented May 3, 2025

Description

TODO only if you're a HashiCorp employee

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Monkeychip left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 3, 2025 •

edited

Loading

github-actions bot commented May 3, 2025 •

edited

Loading

hellobontempo May 4, 2025 •

edited

Loading

hellobontempo May 5, 2025 •

edited

Loading