Amplify API to support passkey Conditional UI (`mediation: conditional`) on login
Is this related to a new or existing framework?
Angular
Is this related to a new or existing API?
Authentication
Is this related to another service?
No response
Describe the feature you'd like to request
We use associateWebAuthnCredential to register passkeys for users. After registration, we want the login page to show a passkey autofill popup on the email input field (Conditional UI) so the user can sign in by simply selecting their passkey without typing their email first.
Describe the solution you'd like
We need on page/component load:
- Automatically fetches the WebAuthn challenge from Cognito
- Calls
navigator.credentials.get()withmediation: 'conditional'so the browser attaches the passkey picker to the email input - When the user selects a passkey, completes the sign-in and returns tokens same as a normal
signInresult
Something like:
await startPasskeyConditionalSignIn(); // call on component loadDescribe alternatives you've considered
We tried calling navigator.credentials.get({ mediation: 'conditional' }) manually on component load with a locally-generated challenge:
const challenge = crypto.getRandomValues(new Uint8Array(32));
const abortController = new AbortController();
navigator.credentials.get({
publicKey: {
challenge,
allowCredentials: [], // empty = show all passkeys for this RP
rpId: 'localhost',
userVerification: 'required',
timeout: 60000,
},
signal: abortController.signal,
mediation: 'conditional',
})
.then((assertion) => {
const response = (assertion as PublicKeyCredential).response as AuthenticatorAssertionResponse;
const userId = new TextDecoder().decode(response?.userHandle ?? new ArrayBuffer(0));
// use userId / email to proceed with signIn
})The autofill popup appears and the user selects a passkey, but since the challenge was not issued by Cognito, it cannot be verified. When we then call signIn() with the resolved username, Amplify internally starts a new InitiateAuth → WEB_AUTHN cycle and shows the browser passkey prompt a second time, requiring the user to authenticate twice.
Additional context
- Currently
signInwithpreferredChallenge: 'WEB_AUTHN'requires ausernamebut with Conditional UI the username is only known after the user picks a passkey from the browser autofill - Internally, Amplify calls
navigator.credentials.get({ publicKey: ... })withoutmediation: 'conditional', which triggers a modal popup instead of the inline autofill UI - There is no hook or override point between "fetch challenge from Cognito" and "call
navigator.credentials.get()" in the current implementation
Is this something that you'd be interested in working on?
- I may be able to implement this feature request
- ⚠️ This feature might incur a breaking change
Source: aws-amplify/amplify-js