Output JSON objects to consoles

1 files changed, 20 insertions, 1 deletions

diff --git a/example/public/index.html b/example/public/index.html
index af08a84..8fac721 100644
--- a/example/public/index.html
+++ b/example/public/index.html
@@ -42,6 +42,14 @@
     <script>
       const { supportsWebauthn, startAttestation, startAssertion } = SimpleWebAuthnBrowser;
 
+      function printDebug(elemDebug, title, output) {
+        if (elemDebug.innerHTML !== '') {
+          elemDebug.innerHTML += '\n';
+        }
+        elemDebug.innerHTML += `// ${title}\n`;
+        elemDebug.innerHTML += `${output}\n`;
+      }
+
       // Hide the Begin button if the browser is incapable of using WebAuthn
       if (!supportsWebauthn()) {
         document.querySelector('.controls').style.display = 'none';
@@ -54,16 +62,21 @@
         document.querySelector('#btnRegBegin').addEventListener('click', async () => {
           const elemSuccess = document.querySelector('#regSuccess');
           const elemError = document.querySelector('#regError');
+          const elemDebug = document.querySelector('#regDebug');
 
           // Reset success/error messages
           elemSuccess.innerHTML = '';
           elemError.innerHTML = '';
+          elemDebug.innerHTML = '';
 
           const resp = await fetch('/generate-attestation-options');
 
           let attResp;
           try {
-            attResp = await startAttestation(await resp.json());
+            const opts = await resp.json();
+            printDebug(elemDebug, 'Registration Options', JSON.stringify(opts, null, 2));
+            attResp = await startAttestation(opts);
+            printDebug(elemDebug, 'Registration Response', JSON.stringify(attResp, null, 2));
           } catch (error) {
             if (error.name === 'InvalidStateError') {
               elemError.innerText = 'Error: Authenticator was probably already registered by user';
@@ -83,6 +96,7 @@
           });
 
           const verificationJSON = await verificationResp.json();
+          printDebug(elemDebug, 'Server Response', JSON.stringify(verificationJSON, null, 2));
 
           if (verificationJSON && verificationJSON.verified) {
             elemSuccess.innerHTML = `Authenticator registered!`;
@@ -99,17 +113,21 @@
         document.querySelector('#btnAuthBegin').addEventListener('click', async () => {
           const elemSuccess = document.querySelector('#authSuccess');
           const elemError = document.querySelector('#authError');
+          const elemDebug = document.querySelector('#authDebug');
 
           // Reset success/error messages
           elemSuccess.innerHTML = '';
           elemError.innerHTML = '';
+          elemDebug.innerHTML = '';
 
           const resp = await fetch('/generate-assertion-options');
 
           let asseResp;
           try {
             const opts = await resp.json();
+            printDebug(elemDebug, 'Authentication Options', JSON.stringify(opts, null, 2));
             asseResp = await startAssertion(opts);
+            printDebug(elemDebug, 'Authentication Response', JSON.stringify(asseResp, null, 2));
           } catch (error) {
             elemError.innerText = error;
             throw new Error(error);
@@ -124,6 +142,7 @@
           });
 
           const verificationJSON = await verificationResp.json();
+          printDebug(elemDebug, 'Server Response', JSON.stringify(verificationJSON, null, 2));
 
           if (verificationJSON && verificationJSON.verified) {
             elemSuccess.innerHTML = `User authenticated!`;