PasswordCredentialInit
ThePasswordCredentialInit dictionary represents the object passed toCredentialsContainer.create() as the value of thepassword option, when creating a password credential.
Initialization from a form
Instead of passing this dictionary directly, a website can pass anHTMLFormElement, and the implementation ofcreate() will populate the credential's data from the values of the form's submittable elements, based on the value of the element'sautocomplete attribute.
autocomplete value | Credential property targeted |
|---|---|
"username" | id |
"name" or"nickname" | name |
"new-password" or"current-password" | password |
"photo" | iconURL |
If the form contains both"new-password" and"current-password" elements, the value for"new-password" will be used.
Theorigin property is set to the origin of the document theHTMLFormElement is contained within.
Instance properties
iconURLOptionalA string representing the URL of an icon or avatar to be associated with the credential.
idA string representing the username portion of the username/password combination.
nameOptionalA string representing a human-understandable name associated with the credential, intended to help the user select this credential in a user interface.
originA string representing the credential's origin.
PasswordCredentialobjects are origin-bound, which means that they will only be usable on the specified origin they were intended to be used on.passwordA string representing the credential password.
Examples
Creating a password credential from an object literal
This example constructs an object literal to initialize a password credential.
const credInit = { id: "serpent1234", // "username" in a typical username/password pair name: "Serpentina", // display name for credential origin: "https://example.org", password: "the last visible dog",};const makeCredential = document.querySelector("#make-credential");makeCredential.addEventListener("click", async () => { const cred = await navigator.credentials.create({ password: credInit, }); console.log(cred.name); // Serpentina console.log(cred.id); // serpent1234 console.log(cred.password); // the last visible dog});Creating a password credential from a form
This example uses a form to initialize a password credential.
HTML
The HTML declares a<form> containing three submittable elements, representing the user ID, user's display name, and password.
<form> <div> <label for="displayname">Enter your display name: </label> <input type="text" name="displayname" autocomplete="name" /> </div> <div> <label for="username">Enter your username: </label> <input type="text" name="username" autocomplete="username" /> </div> <div> <label for="password">Enter your password: </label> <input type="password" name="password" autocomplete="new-password" /> </div></form><button>Make credential</button><pre></pre>form { display: table;}div { display: table-row;}label,input { display: table-cell; margin-bottom: 10px;}label { padding-right: 10px;}#log { height: 60px; padding: 0.5rem; border: 1px solid black;}JavaScript
The JavaScript passes the form intocreate(), and logs some of the values of the resulting credential.
The promise returned bycreate() will reject if the form does not contain values for the mandatory credential properties.
const makeCredential = document.querySelector("#make-credential");const formCreds = document.querySelector("form");makeCredential.addEventListener("click", async () => { try { const credential = await navigator.credentials.create({ password: formCreds, }); log( `New credential:\ndisplay name: ${credential.name}, username: ${credential.id}, password: ${credential.password}`, ); } catch (e) { if (e.name === "TypeError") { log("Error creating credential\nMake sure you filled in all the fields"); } }});const logElement = document.querySelector("#log");function log(text) { logElement.innerText = text;}Result
Specifications
| Specification |
|---|
| Credential Management Level 1 # typedefdef-passwordcredentialinit |