Store Credentials

By Eiji Kitamura

Developer Advocate in Tokyo

By Meggin Kearney

Meggin is a Tech Writer

Store and update user credentials is easy with the navigator.credentials.store() API.

Store a user's credential

After a user successfully signs up, signs in, or changes a password, store or update the user's credential.

Store username and password details

Once the user has signed in, and you've verified their credentials, create a new PasswordCredential object and pass it to navigator.credentials.store() to save it.

// After a successful sign-in, sign-up or password change,
// Instantiate a `PasswordCredential` object
var c = new PasswordCredential({
  id:       id,
  password: password,
  name:     name,
  iconrURL: iconUrl
});

// Store the credential
navigator.credentials.store(c)
.then(function() {
  // done
});

When the Chrome browser obtains credential information, a notification pops up asking to store a credential (or federation provider)

Store username and password from a form

In addition to manually creating the PasswordCredential, you can simply pass a well annotated form element, to PasswordCredential.

For example:

<form id="form" method="post">
  <input type="text" name="id" autocomplete="username" />
  <input type="password" name="password" autocomplete="current-password" />
  <input type="hidden" name="csrf_token" value="*****" />
</form>

Then create a new PasswordCredential object by passing a reference to the form element:

var form = document.querySelector('#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
  // continuation
});

Any additional form fields will be automatically added to the PasswordCredential as part of the .additionalData parameter.

Store a credential for a federated account

To store federated account details, instantiate a new FederatedCredential, object with the user's identifier and the provider's identifier. Then call navigator.credentials.store() to store the credential.

For example:

// After a successful federation, instantiate a FederatedCredential
var cred = new FederatedCredential({
  id:       id,                           // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name:     name,                         // name in IdP
  iconURL:  iconUrl                       // Profile image url
});

// Store it
navigator.credentials.store(cred)
.then(function() {
  // continuation
});