64 lines
2.3 KiB
JavaScript
64 lines
2.3 KiB
JavaScript
// CCN — passkeys: signing in or joining, and adding one from the account screen. Without it, or without WebAuthn, the demo sign-in remains.
|
|
|
|
const form = document.querySelector("[data-passkey-form]");
|
|
const supported = window.PublicKeyCredential
|
|
&& PublicKeyCredential.parseCreationOptionsFromJSON
|
|
&& PublicKeyCredential.parseRequestOptionsFromJSON;
|
|
|
|
if (form && supported) {
|
|
const button = form.querySelector("[data-passkey]");
|
|
const status = form.querySelector("[data-passkey-status]");
|
|
|
|
const post = async (path, body) => {
|
|
const response = await fetch(path, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(body),
|
|
});
|
|
const answer = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(answer.error ?? "Something went wrong. Try again.");
|
|
}
|
|
|
|
return answer;
|
|
};
|
|
|
|
button.hidden = false;
|
|
button.addEventListener("click", async () => {
|
|
button.disabled = true;
|
|
status.textContent = "";
|
|
|
|
try {
|
|
// On the account screen the button adds a passkey to the account signed in; on the sign-in screen it signs in or joins.
|
|
const adding = button.dataset.passkey === "add";
|
|
const start = adding ? { add: true } : { email: form.querySelector("[name=email]").value };
|
|
const { mode, options } = await post("/sign-in/passkey/options", start);
|
|
let credential;
|
|
|
|
if (mode === "create") {
|
|
// A discoverable passkey, so the next sign-in needs no email.
|
|
options.authenticatorSelection = { residentKey: "required", userVerification: "preferred" };
|
|
credential = await navigator.credentials.create({
|
|
publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(options),
|
|
});
|
|
} else {
|
|
credential = await navigator.credentials.get({
|
|
publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(options),
|
|
});
|
|
}
|
|
|
|
const { location } = await post("/sign-in/passkey/finish", {
|
|
credential: credential.toJSON(),
|
|
return: form.querySelector("[name=return]")?.value,
|
|
});
|
|
|
|
window.location.assign(location);
|
|
} catch (error) {
|
|
// Dismissing the browser's prompt is not an error worth a message.
|
|
status.textContent = error.name === "NotAllowedError" ? "" : error.message;
|
|
button.disabled = false;
|
|
}
|
|
});
|
|
}
|