BasicOIDC/templates/login/webauthn_input.html

{% extends "base_login_page.html" %}
{% block content %}

<p style="color:red" id="err_target"></p>

<div>
    <p>Please insert now one of your registered security key, and accept authentication request.</p>
</div>

<div style="margin: 10px 0px;">
    <input type="button" value="Try again" class="btn btn-primary" onclick="launch_procedure()"/>
</div>

<div style="margin-top: 10px;">
    <a href="/2fa_auth?force_display=true&redirect={{ _p.redirect_uri.get_encoded() }}">Sign in using another factor</a><br/>
    <a href="/logout">Sign out</a>
</div>

<script src="/assets/js/base64_lib.js"></script>
<script>
    const REDIRECT_URI = decodeURIComponent("{{ _p.redirect_uri.get_encoded() }}");
    const OPAQUE_STATE = "{{ opaque_state }}";
    const AUTH_CHALLENGE = JSON.parse(decodeURIComponent("{{ challenge_json }}"));
    // Decode data
    AUTH_CHALLENGE.publicKey.challenge = base64NoPaddingToUint8Array(
        AUTH_CHALLENGE.publicKey.challenge
    );
    for (let cred of AUTH_CHALLENGE.publicKey.allowCredentials) {
        cred.id = base64NoPaddingToUint8Array(cred.id);
	}


    function set_error(err) {
        const err_target = document.getElementById("err_target");
        err_target.innerHTML = err;
    }


    async function launch_procedure() {
        try {
            set_error("");

            const result = await navigator.credentials.get(AUTH_CHALLENGE);

            const creds = {
                id: result.id,
                rawId: ArrayBufferToBase64(result.rawId),
                type: result.type,
                response: {
                    authenticatorData: ArrayBufferToBase64(
                        result.response.authenticatorData
                    ),
                    clientDataJSON: ArrayBufferToBase64(
                        result.response.clientDataJSON
                    ),
                    signature: ArrayBufferToBase64(result.response.signature),
                    userHandle: result.response.userHandle,
                },
		    };

            const res = await fetch("/login/api/auth_webauthn", {
                method: "post",
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    opaque_state: OPAQUE_STATE,
                    credential: creds,
                })
            });

            let text = await res.text();
            set_error(text);

            if (res.status == 200)
                location.href = REDIRECT_URI;

            else if(text === "")
                set_error("Failed to authenticate you!");

        } catch(e) {
            console.error(e);
            set_error(e);
        }
    }

    window.addEventListener("load", () => launch_procedure())
</script>

{% endblock content %}