feat: add auto complete ui for AM-33773 #571

cameronwhitworthforgerock · 2026-01-06T10:05:39Z

JIRA Ticket

Ticket

Description

Change enables support for autofill conditional UI in Javascript SDK.

Relates to https://pingidentity.atlassian.net/browse/OPENAM-23288

changeset-bot · 2026-01-06T10:05:44Z

⚠️ No Changeset found

Latest commit: a31207f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

ryanbas21

We need to ensure that because this is a newer browser feature we are backwards compatible with browsers that may not support this feature.

So graceful degradation of conditional ui should occur where the browser doesn't break the user and we can at least continue the flow as needed.

Any details regarding this would be helpful because i'm fairly new to this feature

This is specific to authentication right? Is this testable with virtual authenticators? If we can pre-populate a user with a passkey in AM, i think we should be able to create an e2e for this?

If not, can we add an e2e test that at least can be run manually (doesn't need actual assertions, but it would be helpful for us to document how to do this work in code)

Also, please add a changeset to this PR, it should be a new feature, with a description of the feature being added so we can release correctly.

ryanbas21 · 2026-01-07T15:59:06Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+        credentialRequestOptions.mediation = 'conditional' as CredentialMediationRequirement;
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn('Conditional UI was requested, but is not supported by this browser.');


we need to use logger for this, in case a user does not want console log's to happen. the logger module will call console logs if enabled.

Done, shout if this is correct/incorrect please.

Comment resolved.

Removed console.warn

FRLogger itself handles the console log, so you can remove the duplicate console.warn statement.

ryanbas21 · 2026-01-08T16:34:33Z

packages/javascript-sdk/src/fr-webauthn/interfaces.ts

 }

 interface WebAuthnAuthenticationMetadata {
+  _action?: string;


Can we have a better type than a string for this? seems like we can have 'webauthn_authentication', I assume the alternative is 'webauthn_registration'?

Done, see below

You mention that this change is done, but I still see string as the value for _action. Am I missing something?

If you check the file changes rather than these comments, you should see the change. For reason beyond me, github has decided to move this comment to Outdated so it can only be observed here.
Hope that makes sense.

ryanbas21 · 2026-01-08T16:36:16Z

packages/javascript-sdk/src/fr-webauthn/interfaces.ts

  userVerification: UserVerificationType;
+  conditionalWebAuthn?: boolean;
+  extensions?: Record<string, unknown>;
+  _type?: string;


What are the possible _type's that we can get? Ideally we'd like to be more strict than string where possible. In the test data I see WebAuthn but what other options are there?

What role does _type play in this data if any as it relates to the sdk?

Change made to literal string WebAuthn
Note for Kian: This means that the passed _type must be exactly that. If for whatever reason we want to pass in anything, then change it back to string. If we want to change it to discrete values then change it to 'X|Y|Z'

I see that _type is still string. Did you forget to push these changes?

ryanbas21 · 2026-01-08T16:38:56Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+
+    // Check if the browser supports conditional mediation
+    if (typeof PublicKeyCredential.isConditionalMediationAvailable === 'function') {
+      return await PublicKeyCredential.isConditionalMediationAvailable();


This method looks like it can throw so we may need to handle the error in case it does.

[Exceptions](https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/isConditionalMediationAvailable_static#exceptions) The returned [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) may be rejected with the following values: SecurityError [DOMException](https://developer.mozilla.org/en-US/docs/Web/API/DOMException) The RP domain is not valid.

Otherwise we may leave the auth state in a failure and unrecoverable error.

ryanbas21 · 2026-01-08T16:46:17Z

packages/javascript-sdk/src/fr-webauthn/fr-webauthn.mock.data.ts

+            _action: 'webauthn_authentication',
+            challenge: 'JEisuqkVMhI490jM0/iEgrRz+j94OoGc7gdY4gYicSk=',
+            allowCredentials: '',
+            _allowCredentials: [],


So AM now sends both of these values? we need to take precedence on the array I assume because it can list the possible passkeys?

Is this AM being backwards compatible with the older allowCredentials?

They are effectively identical as AM supports both for as you mentioned backwards compatibility. If you feel like this answers your question, give me a should and I can resolve this thread.

Commend addressed

ryanbas21 · 2026-01-08T16:55:47Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+ *
+ *   // For conditional UI to work in the browser, add autocomplete="webauthn"
+ *   // to your username input field:
+ *   // <input type="text" name="username" autocomplete="webauthn" />


What happens if this isn't provided and the promise is hanging?

I've got a fix in based on code I've seen elsewhere in the code base. Feel free to correct me if I've mssed up.

Kian note:
There is a current question in my fix if after timeout we shout throw an exception or just return false. Either way we should make it so the admin can specify a timeout time (have a default just incase).
Throwing errors seems to be what we do in the SDK

Yes, we throw in cases where the continuation is not possible, but in this case, we can consider this progressive enhancement, yeah? In other words, "conditional UI" isn't necessary for the basic function of WebAuthn, so we don't need to throw.

@cerebrl it's possible that we haven't really "started" webauthn though. This flow can be activated before a username or password has entered, so the fallback to "webauthn" is unlikely because usually you need to progress to that point.

Right?

ryanbas21 · 2026-01-08T17:01:45Z

packages/javascript-sdk/src/fr-webauthn/index.ts

   */
  public static async getAuthenticationCredential(
    options: PublicKeyCredentialRequestOptions,
+    useConditionalUI = false,


as per the hanging promise comment, we may need to use an abort signal here to allow developers to abort the promise if the passkey option isn't there?

I may be not following this correctly, so please correct me where I'm wrong, but if a developer is using autofill ui, but fails to add the html correctly, can't we end up in a hanging promise state?

Also abort signal may be the right path, we would have to figure out how to do it.

cerebrl · 2026-01-12T16:20:38Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+    try{
+      return withTimeout(PublicKeyCredential.isConditionalMediationAvailable(), ONE_SECOND)
+    } catch {
+      throw new Error('Error determining conditional mediation support');


Should we throw here, or just return false? If this feature isn't supported, we can just fall back to "normal" behavior, yeah?

Definitely feels like there is no "right" answer. I think we (Liskov) will discuss this as a team and then go forward with that, if that sounds good to oyu.

Talking to @george-bafaloukas-forgerock it may be worth keeping the ticket open to test when all other matters have been resolved, then we can fully test and make sure nothing it broken.

cerebrl · 2026-01-12T16:22:27Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+ *
+ *   // For conditional UI to work in the browser, add autocomplete="webauthn"
+ *   // to your username input field:
+ *   // <input type="text" name="username" autocomplete="webauthn" />


Yes, we throw in cases where the continuation is not possible, but in this case, we can consider this progressive enhancement, yeah? In other words, "conditional UI" isn't necessary for the basic function of WebAuthn, so we don't need to throw.

cerebrl · 2026-01-12T16:39:23Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+        credentialRequestOptions.mediation = 'conditional' as CredentialMediationRequirement;
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn('Conditional UI was requested, but is not supported by this browser.');


FRLogger itself handles the console log, so you can remove the duplicate console.warn statement.

cerebrl · 2026-01-12T16:45:41Z

packages/javascript-sdk/src/fr-webauthn/interfaces.ts

 }

 interface WebAuthnAuthenticationMetadata {
+  _action?: string;


You mention that this change is done, but I still see string as the value for _action. Am I missing something?

cerebrl · 2026-01-12T16:47:19Z

packages/javascript-sdk/src/fr-webauthn/interfaces.ts

  userVerification: UserVerificationType;
+  conditionalWebAuthn?: boolean;
+  extensions?: Record<string, unknown>;
+  _type?: string;


I see that _type is still string. Did you forget to push these changes?

ryanbas21 · 2026-01-13T00:14:38Z

Also please add a changeset. @cameronwhitworthforgerock

KMForgeRock · 2026-01-13T11:34:54Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+
+    // Add conditional mediation if requested and supported
+    if (useConditionalUI) {
+      const isConditionalSupported = await this.isConditionalUISupported();


This won't hang as the timeout was added above.

KMForgeRock · 2026-01-13T11:38:46Z

packages/javascript-sdk/src/fr-webauthn/index.ts

+      }
+    }
+
+    const credential = await navigator.credentials.get(credentialRequestOptions);


This is for under discussion about hanging

Talking to @george-bafaloukas-forgerock this should already be handled by the browser as it is a variable in credentialRequestOptions

I've double checked and timeout is passed in.

feat: add auto complete ui for AM-33773

af0560c

george-bafaloukas-forgerock requested review from ancheetah, cerebrl, george-bafaloukas-forgerock and ryanbas21 January 7, 2026 15:49

ryanbas21 requested changes Jan 8, 2026

View reviewed changes

KMForgeRock added 2 commits January 9, 2026 15:32

Added logging and more error handling

8919aa8

Removed console log and constrained type

59e7242

cerebrl requested changes Jan 12, 2026

View reviewed changes

KMForgeRock reviewed Jan 13, 2026

View reviewed changes

fix: removed error throw in favour of passing false

a31207f

feat: add auto complete ui for AM-33773 #571

Are you sure you want to change the base?

feat: add auto complete ui for AM-33773 #571

Uh oh!

Conversation

cameronwhitworthforgerock commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

JIRA Ticket

Description

Uh oh!

changeset-bot bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

ryanbas21 left a comment • 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!

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!

KMForgeRock Jan 9, 2026 • 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!

Choose a reason for hiding this comment

Uh oh!

KMForgeRock Jan 14, 2026 • 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!

cameronwhitworthforgerock commented Jan 6, 2026 •

edited

Loading

changeset-bot bot commented Jan 6, 2026 •

edited

Loading

ryanbas21 left a comment •

edited

Loading

KMForgeRock Jan 9, 2026 •

edited

Loading

KMForgeRock Jan 14, 2026 •

edited

Loading