templates/login/webauthn_input.html

@@ -1,20 +1,90 @@
 {% extends "base_login_page.html" %}
 {% block content %}
 
+<p style="color:red" id="err_target"></p>
 
 <div>
     <p>Please insert now your security key <i>{{ factor.name }}</i>, 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 %}