A programmatic bridge to the browser's password manager

The Credential Management API is a standards-based interface that connects your site to the browser's credential storage. It aims to simplify sign-in by letting the browser handle the retrieval and storage of user credentials, which can smooth over flows like session expiry or switching devices.

For users, the practical benefits are:

  • Automatic sign-in when a session has expired or credentials were saved on another device.
  • A native account chooser for one-tap sign-in.
  • Credential storage that can sync across devices via the browser.

Feature detection

Browser support is broad but not universal. Before using the API, check that the relevant constructor is available:

if (window.PasswordCredential || window.FederatedCredential) {
  // Feature is supported
}

Feature detection ensures your code degrades gracefully in browsers that lack support for either PasswordCredential or FederatedCredential.

Core operations

Signing in

To sign a user in, you retrieve credentials from the browser's password manager and use them to log the user in. The pattern is:

  1. Call navigator.credentials.get() when a user who is not signed in lands on your site.
  2. Use the returned credential object to authenticate the user.
  3. Update the UI to reflect the signed-in state.

This step eliminates the need for the user to manually type their login details again.

Saving credentials

After a successful authentication, your application should persist the credentials for future sessions. The approach differs based on the sign-in method.

Federated sign-in:

  1. Create a FederatedCredential using the user's email address as the ID and set the identity provider with FederatedCredentials.provider.
  2. Pass the credential object to navigator.credentials.store().

Username/password sign-in:

  1. Construct a PasswordCredential with the user ID and password.
  2. Store it with navigator.credentials.store().

Both operations hand the credential details to the browser for storage.

Signing out

The sign-out process needs a specific call to prevent automatic re-authentication. When a user signs out, invoke navigator.credentials.preventSilentAccess(). This stops the browser from automatically signing the user back in on their next visit.

Disabling this silent access has a practical side effect: it allows users to switch between accounts, such as work and personal profiles or on shared devices, without needing to manually sign out and re-enter credentials each time. It ensures the user gets to choose which account to use at the next sign-in rather than being automatically logged into the same one.