Yii2, Webauthn Framework (Part 2)

Webauthn.js

const { startRegistration } = SimpleWebAuthnBrowser;
const elemBegin = document.getElementById('webauthn_add');
const elemSuccess = document.getElementById('webauthn_success');
const elemError = document.getElementById('webauthn_error');

elemBegin.addEventListener('click', async () => {
    elemSuccess.innerHTML = '';
    elemError.innerHTML = '';
    elemSuccess.parentElement.hidden = true;
    elemError.parentElement.hidden = true;

    const resp = await fetch('index.php?r=user%2Fcreate-credential-options');

    let attResp;
    try {
        attResp = await startRegistration(await resp.json());
    } catch (error) {
        if (error.name === 'InvalidStateError') {
            elemError.innerText = 'Error: Authenticator was probably already registered by user';
        } else {
            elemError.innerText = error;
        }
        elemError.parentElement.hidden = false;
        throw error;
    }
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    attResp.fido_name = document.getElementById('fido_name').value;
    const verificationResp = await fetch('index.php?r=user%2Fcreate-credential', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': csrfToken
        },
        body: JSON.stringify(attResp),
    });

    const verificationJSON = await verificationResp.json();

    if (verificationJSON && verificationJSON.verified) {
        elemSuccess.innerHTML = 'Success!';
        elemSuccess.parentElement.hidden = false;
    } else {
        elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
            verificationJSON,
        )}</pre>`;
        elemError.parentElement.hidden = false;
    }
});

const { startAuthentication } = SimpleWebAuthnBrowser;
const elemBegin_v = document.getElementById('webauthn_verify');

elemBegin_v.addEventListener('click', async () => {
    elemSuccess.innerHTML = '';
    elemError.innerHTML = '';
    elemSuccess.parentElement.hidden = true;
    elemError.parentElement.hidden = true;

    const resp = await fetch('index.php?r=user%2Frequest-assertion-options');

    let asseResp;
    try {
        asseResp = await startAuthentication(await resp.json());
    } catch (error) {
        elemError.innerText = error;
        elemError.parentElement.hidden = false;
        throw error;
    }
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const verificationResp = await fetch('index.php?r=user%2Fverify-assertion', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': csrfToken
        },
        body: JSON.stringify(asseResp),
    });

    const verificationJSON = await verificationResp.json();

    if (verificationJSON && verificationJSON.verified) {
        elemSuccess.innerHTML = 'Success!';
        elemSuccess.parentElement.hidden = false;

    } else {
        elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
            verificationJSON,
        )}</pre>`;
        elemError.parentElement.hidden = false;
    }
});