From 893631eb4cb01516a0076f041847e5c800da1c91 Mon Sep 17 00:00:00 2001
From: "Prad Nukala (aider)" <prad@sonr.io>
Date: Mon, 9 Dec 2024 14:45:02 -0500
Subject: [PATCH] feat: Add hidden input to store passkey credential data for
 form submission

---
 pkg/blocks/forms/register_passkey.templ | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/pkg/blocks/forms/register_passkey.templ b/pkg/blocks/forms/register_passkey.templ
index f66434ce0..6e5ac1002 100644
--- a/pkg/blocks/forms/register_passkey.templ
+++ b/pkg/blocks/forms/register_passkey.templ
@@ -12,6 +12,7 @@ type RegisterPasskeyData struct {
 
 templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
 	<form action={ templ.SafeURL(action) } method={ method }>
+		<input type="hidden" name="credential" id="credential-data" />
 		<sl-card class="card-form gap-4 max-w-lg">
 			<div slot="header">
 				<div class="w-full py-1">
@@ -85,8 +86,17 @@ const publicKey = {
 navigator.credentials
   .create({ publicKey })
   .then((newCredentialInfo) => {
-  	console.log(newCredentialInfo);
-    // Send new credential info to server for verification and registration.
+    // Convert credential to base64 string
+    const credentialJSON = JSON.stringify({
+      id: newCredentialInfo.id,
+      rawId: Array.from(new Uint8Array(newCredentialInfo.rawId)),
+      response: {
+        attestationObject: Array.from(new Uint8Array(newCredentialInfo.response.attestationObject)),
+        clientDataJSON: Array.from(new Uint8Array(newCredentialInfo.response.clientDataJSON))
+      },
+      type: newCredentialInfo.type
+    });
+    document.getElementById('credential-data').value = btoa(credentialJSON);
   })
   .catch((err) => {
   console.error(err);