Skip to content
Learn Measure Blog Case studies About
On this page
  • Feedback

The Credential Management API

Nov 8, 2016 — Updated Sep 20, 2018
Eiji Kitamura
Eiji Kitamura
TwitterGitHubHomepage
Meggin Kearney
Meggin Kearney
Twitter
On this page
  • Feedback

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.

Important

Using the Credential Management API requires the page be served from a secure origin.

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.
}

Warning

Feature detection by checking navigator.credentials may break your website on browsers supporting WebAuthn(PublicKeyCredential) but not all credential types (PasswordCredential and FederatedCredential) defined by the Credential Management API. Learn more.

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 #

Last updated: Sep 20, 2018 — Improve article
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.