The Credential Management API gained additional features that will be supported by Google Chrome version 60 and onwards. This repository includes polyfills for these features, so that developers can use the new API features while supporting old and new browser versions.

Simply include cm-api-shim.js in your project, for example in the following way:

<script src="./cm-api-shim.js"></script>

You can install the library locally by running bower install cm-api-shim.

The following features will be supported through the use of this library:

navigator.credentials.requireUserMediation has been renamed to navigator.credentials.preventSilentAccess. Through the use of this library developers can simply use preventSilentAccess, which will dispatch to requireUserMediation for older browsers.

The boolean unmediated flag argument to navigator.credentials.get has been replaced by a mediation enum, which takes the values 'silent', 'optional' and 'required'. mediation: 'silent' and mediation: 'optional' directly map to unmediated: true and unmediated: false. As before, medation: 'optional' is the default value if nothing else is specified.

Note: mediation: 'required' is a completely novel option that can not be polyfilled in older browsers. In this case the polyfill falls back to mediation: 'optional' and warns the developers about doing so via a console message.

It is now possible to create Credential objects asynchronously using navigator.credentials.create. This returns a Promise which will resolve to a Credential object if successful.

Currently, both password and federated are supported as keys, which will try to create a PasswordCredential or FederatedCredential.

Example Use:

let cred = await navigator.credentials.create({password: {
  id: "Foo",
  password: "Bar",
}});

While the Credential Management API provides access to the password property of PasswordCredential for recent browser versions, this can not be polyfilled and is not supported for older browsers.

For this use case it is suggested to detect whether access to passwords is possible or not and dispatch accordingly.

Example Code:

let cred = await navigator.credentials.get({password: true});
if (cred.password !== undefined) {
  let body = {id: cred.id, password: cred.password};
  fetch('my_endpoint.html', {body : body}).then(result => {
      // Handle server response.
  });
} else {
  fetch('my_endpoint.html', {credentials: cred}).then(result => {
      // Handle server response.
  });
}