edudepetris · September 7, 2025 05:31
diff --git a/credential-management-api.html b/credential-management-api.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Credentials API</title>
 </head>

 <body>
  <form>
    <div>
      <label for="userid">Enter your user ID: </label>
      <input type="text" name="userid" id="userid" autocomplete="username" />
    </div>
    <div>
      <label for="username">Enter your username: </label>
      <input type="text" name="username" id="username" autocomplete="name" />
    </div>
    <div>
      <label for="password">Enter your password: </label>
      <input type="password" name="password" id="password" autocomplete="new-password" />
    </div>
  </form>

  <button id="make-credential">1. Make credential</button>
  <button id="store-credential">2. Store credential</button>

  <pre id="log"></pre>

  <section>
    <h1>Use Credentials API</h1>
    <button id="get-credential">3. Get credential</button>
  </section>

  <script>

    // https://developer.mozilla.org/en-US/docs/Web/API/PasswordCredentialInit
    // This code will create a Password Credential
    const makeCredential = document.querySelector("#make-credential");
    const storeCredential = document.querySelector("#store-credential");
    const getCredential = document.querySelector("#get-credential");
    const formCreds = document.querySelector("form");
    let credential;

    makeCredential.addEventListener("click", async () => {
      try {
        credential = await navigator.credentials.create({
          password: formCreds,
        });
        log(
          `New credential:\nname: ${credential.name}, password: ${credential.password}`,
        );
      } catch (e) {
        if (e.name === "TypeError") {
          log("Error creating credential\nMake sure you filled in all the fields");
        }
      }
    });

    storeCredential.addEventListener("click", async () => {
      if (!credential) {
        log("No credential to store. Please create one first.");
        return;
      }

      try {
        await navigator.credentials.store(credential);
        log("Credential stored in the user agent's credential manager.");
      } catch (e) {
        if (e.name === "TypeError") {
          log("Error creating credential\nMake sure you filled in all the fields");
        }
      }
    });

    getCredential.addEventListener("click", async () => {
      try {
        const cred = await navigator.credentials.get({
          password: true,
          mediation: "optional", // "silent" or "required"
        });
        if (cred) {
          log(
            `Retrieved credential:\nname: ${cred.name}, password: ${cred.password}`,
          );
        } else {
          log("No credential retrieved.");
        }
      } catch (e) {
        log(`Error retrieving credential: ${e}`);
      }
    });

    // Helper functions
    const logElement = document.querySelector("#log");

    function log(text) {
      logElement.innerText = text;
    }
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Credentials API</title>
	</head>

	<body>
	<form>
	<div>
	<label for="userid">Enter your user ID: </label>
	<input type="text" name="userid" id="userid" autocomplete="username" />
	</div>
	<div>
	<label for="username">Enter your username: </label>
	<input type="text" name="username" id="username" autocomplete="name" />
	</div>
	<div>
	<label for="password">Enter your password: </label>
	<input type="password" name="password" id="password" autocomplete="new-password" />
	</div>
	</form>

	<button id="make-credential">1. Make credential</button>
	<button id="store-credential">2. Store credential</button>

	<pre id="log"></pre>

	<section>
	<h1>Use Credentials API</h1>
	<button id="get-credential">3. Get credential</button>
	</section>

	<script>

	// https://developer.mozilla.org/en-US/docs/Web/API/PasswordCredentialInit
	// This code will create a Password Credential
	const makeCredential = document.querySelector("#make-credential");
	const storeCredential = document.querySelector("#store-credential");
	const getCredential = document.querySelector("#get-credential");
	const formCreds = document.querySelector("form");
	let credential;

	makeCredential.addEventListener("click", async () => {
	try {
	credential = await navigator.credentials.create({
	password: formCreds,
	});
	log(
	`New credential:\nname: ${credential.name}, password: ${credential.password}`,
	);
	} catch (e) {
	if (e.name === "TypeError") {
	log("Error creating credential\nMake sure you filled in all the fields");
	}
	}
	});

	storeCredential.addEventListener("click", async () => {
	if (!credential) {
	log("No credential to store. Please create one first.");
	return;
	}

	try {
	await navigator.credentials.store(credential);
	log("Credential stored in the user agent's credential manager.");
	} catch (e) {
	if (e.name === "TypeError") {
	log("Error creating credential\nMake sure you filled in all the fields");
	}
	}
	});

	getCredential.addEventListener("click", async () => {
	try {
	const cred = await navigator.credentials.get({
	password: true,
	mediation: "optional", // "silent" or "required"
	});
	if (cred) {
	log(
	`Retrieved credential:\nname: ${cred.name}, password: ${cred.password}`,
	);
	} else {
	log("No credential retrieved.");
	}
	} catch (e) {
	log(`Error retrieving credential: ${e}`);
	}
	});

	// Helper functions
	const logElement = document.querySelector("#log");

	function log(text) {
	logElement.innerText = text;
	}
	</script>
	</body>

	</html>