Update `with` query param functionality #30537

hellobontempo · 2025-05-06T21:50:18Z

Description

Previously, the with query param could refer to either the auth mount path or type (which could be the same, since the default mount path is the type). For backward compatibility, we handle both scenarios. This way if anyone has bookmarked a URL including the with query param, the login form should behavior similarly.

Selecting and auth method in the login form no longer updates the query param

New functionality

?with=<mount path>:
- if mount is tuned with listing_visibility="unauth", the login form will show the single mount view for that path, with a hidden input for the custom path (hides extra noise for the end user)
- if no mount data can be retrieved, show standard login form because we cannot glean the type from just the mount path
?with=<auth type> (backward compatibility):
- select the auth type tab, if it exists
- otherwise preselect dropdown with type

Screen.Recording.2025-05-07.at.10.25.46.AM.mov

hidden input renders with custom path value

old behavior

tab tied to query param

selecting new method in dropdown also tied to query param

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-06T21:54:06Z

Build Results:
All builds succeeded! ✅

github-actions · 2025-05-06T22:14:01Z

CI Results:
All Go tests succeeded! ✅

hellobontempo · 2025-05-07T18:18:06Z

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

-                @handleTabClick={{this.setAuthType}}
-                @selectedAuthMethod={{this.selectedAuthMethod}}
-              />
+            {{#if this.showCustomAuthOptions}}


does this naming make sense to folks? really struggled with how to make this intuitive...Could also be renderAlternativeLoginView 🫠 oof naming is hard

If there is any sort of login config (like listing visibility) or customization settings, then "Sign in with other methods" appears and houses the full dropdown of methods. Users can toggle between these views.

Works for me!

hellobontempo · 2025-05-07T18:39:17Z

ui/app/components/auth/tabs.hbs

@@ -24,18 +24,11 @@
            </Hds::Form::Select::Field>
          {{else}}
            {{#let (get mounts "0") as |mount|}}
-              {{#if (and (eq @selectedAuthMethod "token") mount.description)}}


Forgot designs didn't include readonly input 🙃

before:

hellobontempo · 2025-05-07T18:39:18Z

ui/app/components/auth/tabs.hbs

-                  {{/if}}
-                </Hds::Form::TextInput::Field>
-              {{/if}}
+              <Auth::SingleMount


hellobontempo · 2025-05-07T18:40:07Z

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

+    In older versions of Vault, the "with" query param could refer to either the auth mount path or the type
+    (which may be the same, since the default mount path *is* the type). 
+    For backward compatibility, we handle both scenarios.
+    → If `authMount` matches a visible auth mount, return its mount data (which includes the type).
+    → If it matches a supported auth type instead, return just the type to preselect it in the dropdown.
+  */


please let me know if this makes sense 🙏

Makes sense to me!

lane-wetmore · 2025-05-07T19:28:21Z

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

+    In older versions of Vault, the "with" query param could refer to either the auth mount path or the type
+    (which may be the same, since the default mount path *is* the type). 
+    For backward compatibility, we handle both scenarios.
+    → If `authMount` matches a visible auth mount, return its mount data (which includes the type).
+    → If it matches a supported auth type instead, return just the type to preselect it in the dropdown.
+  */


Makes sense to me!

hellobontempo · 2025-05-07T20:43:23Z

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

    if (model?.unwrapResponse) {
      // handles the transition
      return this.controllerFor('vault.cluster.auth').send('authSuccess', model.unwrapResponse);
    }


seemed like this made more senes to do in the redirect and will make even MORE sense when the redirects in authSuccess are relocated to the auth service.

zofskeez · 2025-05-07T21:36:48Z

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

-                @handleTabClick={{this.setAuthType}}
-                @selectedAuthMethod={{this.selectedAuthMethod}}
-              />
+            {{#if this.showCustomAuthOptions}}


Works for me!

* 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>

update path input to type=hidden

36d5213

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

hellobontempo requested a review from a team as a code owner May 6, 2025 21:50

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

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

hellobontempo added 5 commits May 7, 2025 10:02

add test coverage

56cc1ee

update page test

f5e426b

update auth route

9ab1c88

delete login form

f827f01

update ent test

22b92a5

hellobontempo commented May 7, 2025

View reviewed changes

hellobontempo added 3 commits May 7, 2025 11:27

consolidate logic in getter

7b4069c

add more comments

827c439

more comments..

3af9e9c

hellobontempo commented May 7, 2025

View reviewed changes

ui/app/components/auth/tabs.hbs

{{/if}}

</Hds::Form::TextInput::Field>

{{/if}}

<Auth::SingleMount

Copy link

Contributor Author

hellobontempo May 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

after

hellobontempo commented May 7, 2025

View reviewed changes

hellobontempo added 2 commits May 7, 2025 11:55

rename selector

82fc4c3

refresh model as well

b0ba5c9

lane-wetmore approved these changes May 7, 2025

View reviewed changes

hellobontempo added 2 commits May 7, 2025 12:56

redirect for invalid query params

85e0a8c

move unwrap to redirect

20cc47f

hellobontempo commented May 7, 2025

View reviewed changes

hellobontempo added 2 commits May 7, 2025 13:51

only redirect on invalid query params

91c10a5

add tests for query param

5501895

zofskeez approved these changes May 7, 2025

View reviewed changes

hellobontempo merged commit 3a6e8fe into VAULT-35470/wire-up-accessible-auth-components May 7, 2025
25 checks passed

hellobontempo deleted the update-with-query-param branch May 7, 2025 21:48

hellobontempo mentioned this pull request May 7, 2025

UI: Implement login form changes and auth refactor #30500

Merged

6 tasks

hellobontempo mentioned this pull request Jun 10, 2025

Docs: GUI custom login feature #30799

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update `with` query param functionality #30537

Update `with` query param functionality #30537

Uh oh!

hellobontempo commented May 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 6, 2025 •

edited

Loading

Uh oh!

hellobontempo May 7, 2025 •

edited

Loading

Uh oh!

zofskeez May 7, 2025

Uh oh!

hellobontempo May 7, 2025 •

edited

Loading

Uh oh!

hellobontempo May 7, 2025

Uh oh!

hellobontempo May 7, 2025

Uh oh!

lane-wetmore May 7, 2025

Uh oh!

lane-wetmore May 7, 2025

Uh oh!

hellobontempo May 7, 2025

Uh oh!

zofskeez May 7, 2025

Uh oh!

Uh oh!

Uh oh!

Update with query param functionality #30537

Update with query param functionality #30537

Uh oh!

Conversation

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

Uh oh!

Description

New functionality

?with=<mount path>:

?with=<auth type> (backward compatibility):

hidden input renders with custom path value

old behavior

tab tied to query param

selecting new method in dropdown also tied to query param

TODO only if you're a HashiCorp employee

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

hellobontempo May 7, 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!

zofskeez May 7, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

before:

Uh oh!

hellobontempo May 7, 2025

Choose a reason for hiding this comment

after

Uh oh!

hellobontempo May 7, 2025

Choose a reason for hiding this comment

Uh oh!

lane-wetmore May 7, 2025

Choose a reason for hiding this comment

Uh oh!

lane-wetmore May 7, 2025

Choose a reason for hiding this comment

Uh oh!

hellobontempo May 7, 2025

Choose a reason for hiding this comment

Uh oh!

zofskeez May 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Update `with` query param functionality #30537

Update `with` query param functionality #30537

hellobontempo commented May 6, 2025 •

edited

Loading

`?with=<mount path>`:

`?with=<auth type>` (backward compatibility):

github-actions bot commented May 6, 2025 •

edited

Loading

github-actions bot commented May 6, 2025 •

edited

Loading

hellobontempo May 7, 2025 •

edited

Loading

hellobontempo May 7, 2025 •

edited

Loading