The Credential Management API

Nov 8, 2016 — Updated Sep 20, 2018

Eiji Kitamura

Twitter GitHub Homepage

Meggin Kearney

Twitter

The Credential Management API is a standards-based browser API that provides a programmatic interface between the site and the browser for seamless sign-in across devices.

The Credential Management API:

• Removes friction from sign-in flows - Users can be automatically signed back into a site even if their session has expired or they saved credentials on another device.
• Allows one tap sign in with account chooser - Users can choose an account in a native account chooser.
• Stores credentials - Your application can store either a username and password combination or even federated account details. These credentials can be synced across devices by the browser.

Want to see it in action? Try the Credential Management API Demo and take a look at the code.

Check Credential Management API browser support #

Before using the Credential Management API, first check if PasswordCredential or FederatedCredential is supported.

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}

Sign in user #

To sign in the user, retrieve the credentials from the browser's password manager and use them to log in the user.

For example:

1. When a user lands on your site and they are not signed in, call navigator.credentials.get().
2. Use the retrieved credentials to sign in the user.
3. Update the UI to indicate the user has been signed in.

Learn more in Sign In Users.

Save or update user credentials #

If the user signed in with a federated identity provider such as Google Sign-In, Facebook, GitHub:

1. After the user successfully signs in or creates an account, create the FederatedCredential with the user's email address as the ID and specify the identity provider with FederatedCredentials.provider.
2. Save the credential object using navigator.credentials.store().

Learn more in Sign In Users.

If the user signed in with a username and password:

1. After the user successfully signs in or creates an account, create the PasswordCredential with the user ID and the password.
2. Save the credential object using navigator.credentials.store().

Learn more in Save Credentials from Forms.

Sign out #

When the user signs out, call navigator.credentials.preventSilentAccess() to prevent the user from being automatically signed back in.

Disabling auto-sign-in also enables users to switch between accounts easily, for example, between work and personal accounts, or between accounts on shared devices, without having to re-enter their sign-in information.

Learn more in Sign out.

Feedback #