const WEBAUTHN_TIMEOUT = 60 * 1000; interface KittyboxWebauthnPreRegistrationData { challenge: string, rp: PublicKeyCredentialRpEntity, user: { cred_id: string, name: string, displayName: string } } async function webauthn_create_credential() { const response = await fetch("/.kittybox/webauthn/pre_register"); const { challenge, rp, user }: KittyboxWebauthnPreRegistrationData = await response.json(); return await navigator.credentials.create({ publicKey: { challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), rp: rp, user: { id: Uint8Array.from(user.cred_id, (c) => c.charCodeAt(0)), name: user.name, displayName: user.displayName }, pubKeyCredParams: [{alg: -7, type: "public-key"}], authenticatorSelection: {}, timeout: WEBAUTHN_TIMEOUT, attestation: "none" } }); } interface KittyboxWebauthnCredential { id: string, type: "public-key" } interface KittyboxWebauthnPreAuthenticationData { challenge: string, credentials: KittyboxWebauthnCredential[] } async function webauthn_authenticate() { const response = await fetch("/.kittybox/webauthn/pre_auth"); const { challenge, credentials } = await response.json() as unknown as KittyboxWebauthnPreAuthenticationData; try { return await navigator.credentials.get({ publicKey: { challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), allowCredentials: credentials.map(cred => ({ id: Uint8Array.from(cred.id, c => c.charCodeAt(0)), type: cred.type })), timeout: WEBAUTHN_TIMEOUT } }) } catch (e) { console.error("WebAuthn authentication failed:", e); alert("Using your authenticator failed. (Check the DevTools for details)"); throw e; } } export async function submit_handler(e: SubmitEvent) { e.preventDefault(); if (e.target != null && e.target instanceof HTMLFormElement) { const form = e.target as HTMLFormElement; let scopes: Array; if (form.elements.namedItem("scope") === undefined) { scopes = [] } else if (form.elements.namedItem("scope") instanceof Node) { scopes = ([form.elements.namedItem("scope")] as Array) .filter((e: HTMLInputElement) => e.checked) .map((e: HTMLInputElement) => e.value); } else { scopes = (Array.from(form.elements.namedItem("scope") as RadioNodeList) as Array) .filter((e: HTMLInputElement) => e.checked) .map((e: HTMLInputElement) => e.value); } const authorization_request = { response_type: (form.elements.namedItem("response_type") as HTMLInputElement).value, client_id: (form.elements.namedItem("client_id") as HTMLInputElement).value, redirect_uri: (form.elements.namedItem("redirect_uri") as HTMLInputElement).value, state: (form.elements.namedItem("state") as HTMLInputElement).value, code_challenge: (form.elements.namedItem("code_challenge") as HTMLInputElement).value, code_challenge_method: (form.elements.namedItem("code_challenge_method") as HTMLInputElement).value, // I would love to leave that as a list, but such is the form of // IndieAuth. application/x-www-form-urlencoded doesn't have // lists, so scopes are space-separated instead. It is annoying. scope: scopes.length > 0 ? scopes.join(" ") : undefined, }; let credential = null; switch ((form.elements.namedItem("auth_method") as HTMLInputElement).value) { case "password": credential = (form.elements.namedItem("user_password") as HTMLInputElement).value; if (credential.length == 0) { alert("Please enter a password.") return } break; case "webauthn": // credential = await webauthn_authenticate(); alert("WebAuthn isn't implemented yet!") return break default: alert("Please choose an authentication method.") return } console.log("Authorization request:", authorization_request); console.log("Authentication method:", credential); const body = JSON.stringify({ request: authorization_request, authorization_method: credential }); console.log(body); const response = await fetch(form.action, { method: form.method, body: body, headers: { "Content-Type": "application/json" } }); if (response.ok) { let location = response.headers.get("Location"); if (location != null) { window.location.href = location } else { throw "Error: didn't return a location" } } } else { return } }