Browser DOM Credential Management API password store not working - get returns null

Question

I would like to store a password for the user using the Credential Management API.

Trying to run the following code off of a local server results in null:

await (async function testStoredPassword({id, origin, password, iconURL, name}) {
  const opts = {id, origin, password, iconURL, name};
  const credential = await navigator.credentials.create({password: opts});
  if (credential === null) {
    return;
  }
  console.log({credential});
  await navigator.credentials.store(credential);
  const roundTripCredential = await navigator.credentials.get({
    password: true,
    mediation: 'optional',
  });
  console.log({roundTripCredential});
  return roundTripCredential;
})({
  id: "id1",
  origin: location.origin,
  password: "password1",
  iconURL: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Flat_tick_icon.svg/240px-Flat_tick_icon.svg.png",
  name: "name1"
});

More specifically, the console output is:

{credential: PasswordCredential}
{roundTripCredential: null}

I thought it might have to do with something faulty in my implementation, or maybe serving off localhost (although I read it should be OK) -- but online demos such as Credential Management API Demo and What web can do today? also seem to be behaving the same. Looking at the spec and a Google blog post it looks like it should work.

I am using Windows 11 and Chrome 120.

Answer 1

Apparently this happens when "Offer to save passwords" is off in chrome://password-manager/settings. Turning this setting on allows saving of passwords.

I should mention this was a bit counter-intuitive to me, as I would expect Chrome's "Offer to save passwords" to affect actively offering to save passwords the user entered freely; whereas the Credential Manager API can be used to store passwords without interacting with the user (e.g. using the new PasswordCredential() API).