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:
- When a user lands on your site and they are not signed in,
call
navigator.credentials.get()
. - Use the retrieved credentials to sign in the user.
- 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:
- 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 withFederatedCredentials.provider
. - Save the credential object using
navigator.credentials.store()
.
Learn more in Sign In Users.
If the user signed in with a username and password:
- After the user successfully signs in or creates an account, create the
PasswordCredential
with the user ID and the password. - 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.