PasswordCredential

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The PasswordCredential constructor creates a new PasswordCredential object. In supporting browsers, an instance of this class may be passed the credential from the init object for global fetch.

Syntax

var myCredential = new PasswordCredential(passwordCredentialData)
var myCredential = new PasswordCredential(HTMLFormElement)

Parameters

Either of the following:

passwordCredentialData 
A PasswordCredentialData dictionary containing the following fields:
  • iconURL: (Optional) the URL of a user's avatar image.
  • id: The ID of the user signing in.
  • name: (Optional) The name of the user signing in.
  • password: The password of the user signing in.
htmlFormElement
A reference to an HTMLFormElement with appropriate input fields. The form should, at the very least, contain an id and password. It could also require a CSRF token.

Examples

This example shows how to set up an HTMLFormElement to caputure data which we'll use to create a PasswordCredential object.

Starting with the form element.

<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, a reference to this form element, using it to create a PasswordCredential object, and storing it in the browser's password system.

var form = document.querySelector('#form');
var creds = new PasswordCredential(form);
// Store the credentials.
navigator.credentials.store(creds)
  .then(function(creds) {
  // Do something with the credentials if you need to.
});

Specifications

Specification Status Comment
Credential Management Level 1 Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Non-standard
Chrome Full support 51Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 51Chrome Android Full support 51Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

Document Tags and Contributors

Contributors to this page: fscholz, jpmedley, david_ross
Last updated by: fscholz,