feat: implement passkey registration flow

pkg/blocks/form/form.templ

@@ -1,9 +1,6 @@
 package form
 
-import (
-	"github.com/go-webauthn/webauthn/protocol"
-	"github.com/onsonr/sonr/pkg/blocks/layout"
-)
+import "github.com/onsonr/sonr/pkg/blocks/layout"
 
 // Form is a standard form styled like a card
 templ Form(action string, method string, submit templ.Component, progress string, enableCancel bool) {
@@ -54,30 +51,60 @@ templ CodeInput(id string) {
 	<sl-input id={ id } placeholder="●" type="text" maxlength="1" pill class="w-min"></sl-input>
 }
 
-script createPasskey(options protocol.PublicKeyCredentialCreationOptions) {
-	navigator.credentials.create(options).then(function(credential) {
-		// Dispatch event with credential data
-		window.dispatchEvent(new CustomEvent('credentialCreated', {
-			detail: credential
-		}));
-	}).catch(function(err) {
-		window.dispatchEvent(new CustomEvent('credentialError', {
-			detail: err.message
-		}));
-	});
+script createPasskey(userId string, userHandle string, userName string, challenge string) {
+const publicKey = {
+  challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)),
+  rp: {
+    name: "Sonr.ID",
+  },
+  user: {
+    // Assuming that userId is ASCII-only
+    id: Uint8Array.from(userId, (c) => c.charCodeAt(0)),
+    name: userName,
+    displayName: userHandle,
+  },
+  pubKeyCredParams: [
+    {
+      type: "public-key",
+      alg: -7, // "ES256"
+    },
+    {
+      type: "public-key",
+      alg: -257, // "RS256"
+    },
+  ],
+  authenticatorSelection: {
+    userVerification: "required",
+    residentKey: "required",
+    authenticatorAttachment: "platform",
+  },
+  timeout: 60000, // 1 minute
+  extensions: {
+    payment: {
+      isPayment: true,
+    },
+  },
+};
+navigator.credentials
+  .create({ publicKey })
+  .then((newCredentialInfo) => {
+  	console.log(newCredentialInfo);
+    // Send new credential info to server for verification and registration.
+  })
+  .catch((err) => {
+  console.error(err);
+    // No acceptable authenticator or user refused consent. Handle appropriately.
+  });
 }
 
 // Hidden input and button which calls a JavaScript function to generate a passkey
-templ PasskeyInput(options protocol.PublicKeyCredentialCreationOptions) {
+templ PasskeyInput(userId string, userHandle string, userName string, challenge string) {
 	@CredentialsScripts()
-	<form>
-		<input type="hidden" name="passkey"/>
-		<sl-button pill style="width: 100%;" onclick="createPasskey(this)">
-			<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 20px;"></sl-icon>
-			Create PassKey
-			<sl-icon slot="suffix" name="arrow-right" library="sonr" style="font-size: 20px;"></sl-icon>
-		</sl-button>
-	</form>
+	<sl-button pill style="width: 100%;" onclick={ createPasskey(userId, userHandle, userName, challenge) }>
+		<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 20px;"></sl-icon>
+		Create PassKey
+		<sl-icon slot="suffix" name="arrow-right" library="sonr" style="font-size: 20px;"></sl-icon>
+	</sl-button>
 }
 
 templ TurnstileWidget(sitekey string) {