WebAuthn conditional UI doesn't show up on Chrome

Question

This is my first post on StackOverflow so I apologise in advance if I cannot make myself very clear or if my post is missing some informations.

I am trying to implement a full passkey login experience with WebAuthn. It currently works on Safari, but when I try to test it on chrome, only the registration process works. So I am able to create a passkey, but when I try to login, the conditional UI doesn't show up on chrome, although it does without any problem on Safari.

Here is the js code that should trigger the conditional UI :

if (window.PublicKeyCredential && PublicKeyCredential.isConditionalMediationAvailable) {
                try {
                    // Is a conditional UI available in this browser?
                    const cma = await PublicKeyCredential.isConditionalMediationAvailable();
                    if (cma) {
                        const user = await authenticate();
                        if (user) {
                            loading.start();  
                            location.href = '/home';
                        } else {
                            throw new Error('User not found.');
                        }
                    }
                } catch (e) {
                    loading.stop();
                    if (e.name !== 'NotAllowedError') {
                      console.error(e);
                      alert(e.message);
                    } else {
                        console.log("User cancelled the operation")
                    }
                }
            }

With the following html (the autocomplete attribute contains the webauthn tag as it is supposed to) :

<form id="ac-login-form" method="POST" action="/auth/username" class="signin-form center"> 
   <div class="form-group"> 
      <input type="text" id="username" class="form-control" placeholder="Username" 
             aria-labelledby="username-label" name="username" 
             autocomplete="username webauthn" required autofocus/> 
   </div> 
   <div class="form-group"> 
      <input type="submit" class="form-control btn btn-primary submit px-3" value="sign in"/> 
   </div> 
</form> 

After thoroughly looking through the documentation I was able to find, I still don't know where the problem might be coming from, as I don't see any missing element and the same code works fine on safari.

If additional informations could help : I am running an https server on localhost, with a backend in js using node.js. I don't think that the problem comes from here since, as previously mentioned, this process works fine on Safari and the registration process also works on Chrome.

Thank you very much in advance for your help.

PS : I am using what I believe to be the latest version of chrome : Version 118.0.5993.70

Answer 1

Update: It looks like there has been a fix in chrome as it now works without any change added to the code