PasswordCredential: PasswordCredential() constructor
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
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
new PasswordCredential(data)
new PasswordCredential(form)
Parameters
Either of the following:
data
-
An object with the following properties:
iconURL
Optional-
A string representing the URL of an icon or avatar to be associated with the credential.
id
-
A string representing a unique ID for the credential.
name
Optional-
A string representing the credential username.
origin
-
A string representing the credential's origin.
PasswordCredential
objects are origin-bound, which means that they will only be usable on the specified origin they were intended to be used on. password
-
A string representing the credential password.
form
-
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.
Exceptions
TypeError
-
Thrown if one of the
id
,origin
orpassword
option is empty.
Examples
This example shows how to set up an HTMLFormElement
to capture data
which we'll use to create a PasswordCredential
object.
Starting with the form element.
<form id="form" method="post">
<label for="id">Username:</label>
<input type="text" name="id" autocomplete="username" />
<label for="password">Password:</label>
<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.
const form = document.querySelector("#form");
const creds = new PasswordCredential(form);
// Store the credentials.
navigator.credentials.store(creds).then((creds) => {
// Do something with the credentials if you need to.
});
Specifications
Specification |
---|
Credential Management Level 1 # dom-passwordcredential-passwordcredential |
Credential Management Level 1 # dom-passwordcredential-passwordcredential-data |
Browser compatibility
BCD tables only load in the browser