import {encodeURLEncodedBase64, decodeURLEncodedBase64} from '../utils.js'; import {showElem, hideElem} from '../utils/dom.js'; const {appSubUrl, csrfToken} = window.config; export async function initUserAuthWebAuthn() { hideElem('#webauthn-error'); const elPrompt = document.querySelector('.user.signin.webauthn-prompt'); if (!elPrompt) { return; } if (!detectWebAuthnSupport()) { return; } const res = await fetch(`${appSubUrl}/user/webauthn/assertion`); if (res.status !== 200) { webAuthnError('unknown'); return; } const options = await res.json(); options.publicKey.challenge = decodeURLEncodedBase64(options.publicKey.challenge); for (const cred of options.publicKey.allowCredentials) { cred.id = decodeURLEncodedBase64(cred.id); } const credential = await navigator.credentials.get({ publicKey: options.publicKey }); try { await verifyAssertion(credential); } catch (err) { if (!options.publicKey.extensions?.appid) { webAuthnError('general', err.message); return; } delete options.publicKey.extensions.appid; const credential = await navigator.credentials.get({ publicKey: options.publicKey }); try { await verifyAssertion(credential); } catch (err) { webAuthnError('general', err.message); } } } async function verifyAssertion(assertedCredential) { // Move data into Arrays incase it is super long const authData = new Uint8Array(assertedCredential.response.authenticatorData); const clientDataJSON = new Uint8Array(assertedCredential.response.clientDataJSON); const rawId = new Uint8Array(assertedCredential.rawId); const sig = new Uint8Array(assertedCredential.response.signature); const userHandle = new Uint8Array(assertedCredential.response.userHandle); const res = await fetch(`${appSubUrl}/user/webauthn/assertion`, { method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8' }, body: JSON.stringify({ id: assertedCredential.id, rawId: encodeURLEncodedBase64(rawId), type: assertedCredential.type, clientExtensionResults: assertedCredential.getClientExtensionResults(), response: { authenticatorData: encodeURLEncodedBase64(authData), clientDataJSON: encodeURLEncodedBase64(clientDataJSON), signature: encodeURLEncodedBase64(sig), userHandle: encodeURLEncodedBase64(userHandle), }, }), }); if (res.status === 500) { webAuthnError('unknown'); return; } else if (res.status !== 200) { webAuthnError('unable-to-process'); return; } const reply = await res.json(); window.location.href = reply?.redirect ?? `${appSubUrl}/`; } async function webauthnRegistered(newCredential) { const attestationObject = new Uint8Array(newCredential.response.attestationObject); const clientDataJSON = new Uint8Array(newCredential.response.clientDataJSON); const rawId = new Uint8Array(newCredential.rawId); const res = await fetch(`${appSubUrl}/user/settings/security/webauthn/register`, { method: 'POST', headers: { 'X-Csrf-Token': csrfToken, 'Content-Type': 'application/json; charset=utf-8', }, body: JSON.stringify({ id: newCredential.id, rawId: encodeURLEncodedBase64(rawId), type: newCredential.type, response: { attestationObject: encodeURLEncodedBase64(attestationObject), clientDataJSON: encodeURLEncodedBase64(clientDataJSON), }, }), }); if (res.status === 409) { webAuthnError('duplicated'); return; } else if (res.status !== 201) { webAuthnError('unknown'); return; } window.location.reload(); } function webAuthnError(errorType, message) { const elErrorMsg = document.getElementById(`webauthn-error-msg`); if (errorType === 'general') { elErrorMsg.textContent = message || 'unknown error'; } else { const elTypedError = document.querySelector(`#webauthn-error [data-webauthn-error-msg=${errorType}]`); if (elTypedError) { elErrorMsg.textContent = `${elTypedError.textContent}${message ? ` ${message}` : ''}`; } else { elErrorMsg.textContent = `unknown error type: ${errorType}${message ? ` ${message}` : ''}`; } } showElem('#webauthn-error'); } function detectWebAuthnSupport() { if (!window.isSecureContext) { document.getElementById('register-button').disabled = true; document.getElementById('login-button').disabled = true; webAuthnError('insecure'); return false; } if (typeof window.PublicKeyCredential !== 'function') { document.getElementById('register-button').disabled = true; document.getElementById('login-button').disabled = true; webAuthnError('browser'); return false; } return true; } export function initUserAuthWebAuthnRegister() { const elRegister = document.getElementById('register-webauthn'); if (!elRegister) { return; } hideElem('#webauthn-error'); elRegister.addEventListener('click', (e) => { e.preventDefault(); if (!detectWebAuthnSupport()) { return; } webAuthnRegisterRequest(); }); } async function webAuthnRegisterRequest() { const elNickname = document.getElementById('nickname'); const body = new FormData(); body.append('name', elNickname.value); const res = await fetch(`${appSubUrl}/user/settings/security/webauthn/request_register`, { method: 'POST', headers: { 'X-Csrf-Token': csrfToken, }, body, }); if (res.status === 409) { webAuthnError('duplicated'); return; } else if (res.status !== 200) { webAuthnError('unknown'); return; } const options = await res.json(); elNickname.closest('div.field').classList.remove('error'); options.publicKey.challenge = decodeURLEncodedBase64(options.publicKey.challenge); options.publicKey.user.id = decodeURLEncodedBase64(options.publicKey.user.id); if (options.publicKey.excludeCredentials) { for (const cred of options.publicKey.excludeCredentials) { cred.id = decodeURLEncodedBase64(cred.id); } } let credential; try { credential = await navigator.credentials.create({ publicKey: options.publicKey }); } catch (err) { webAuthnError('unknown', err); return; } webauthnRegistered(credential); }