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().

Either of the following:

passwordCredentialData

An object with the following properties:

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.

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