feat: implement passkey registration flow

pkg/blocks/cards/profile.templ

@@ -1,19 +1,19 @@
 package cards
 
-type SonrProfileData struct {
+// Helper function to shorten address
-	Address       string
+func shortenAddress(address string) string {
-	Handle        string
+	if len(address) <= 20 {
-	Name          string
+		return address
-	ChainID       string
+	}
-	CreationBlock string
+	return address[:16] + "..." + address[len(address)-4:]
 }
 
 templ SonrProfile(addr string, name string, handle string, creationBlock string) {
 	<div class="profile-card min-w-[320px]">
-		<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-purple-800 to-purple-400 p-4 py-5 px-5 rounded-xl">
+		<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-700 to-cyan-300 p-4 py-5 px-5 rounded-xl">
 			<div class="flex justify-between">
 				<div>
-					<h3>sonr-testnet-1</h3>
+					<h2>sonr-testnet-1</h2>
 					<p class="text-2xl font-bold">{ handle }</p>
 				</div>
 				<div class="flex items-center opacity-60">
@@ -36,11 +36,3 @@ templ SonrProfile(addr string, name string, handle string, creationBlock string)
 		</div>
 	</div>
 }
-
-// Helper function to shorten address
-func shortenAddress(address string) string {
-	if len(address) <= 20 {
-		return address
-	}
-	return address[:16] + "..." + address[len(address)-4:]
-}

pkg/blocks/cards/profile_templ.go

@@ -16,6 +16,14 @@ type SonrProfileData struct {
 	CreationBlock string
 }
 
+// Helper function to shorten address
+func shortenAddress(address string) string {
+	if len(address) <= 20 {
+		return address
+	}
+	return address[:16] + "..." + address[len(address)-4:]
+}
+
 func SonrProfile(addr string, name string, handle string, creationBlock string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -37,14 +45,14 @@ func SonrProfile(addr string, name string, handle string, creationBlock string)
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"profile-card min-w-[320px]\"><div class=\"text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-purple-800 to-purple-400 p-4 py-5 px-5 rounded-xl\"><div class=\"flex justify-between\"><div><h3>sonr-testnet-1</h3><p class=\"text-2xl font-bold\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"profile-card min-w-[320px]\"><div class=\"text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-700 to-cyan-300 p-4 py-5 px-5 rounded-xl\"><div class=\"flex justify-between\"><div><h2>sonr-testnet-1</h2><p class=\"text-2xl font-bold\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(handle)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 17, Col: 43}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 25, Col: 43}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -57,7 +65,7 @@ func SonrProfile(addr string, name string, handle string, creationBlock string)
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(shortenAddress(addr))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 24, Col: 58}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 32, Col: 58}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -70,7 +78,7 @@ func SonrProfile(addr string, name string, handle string, creationBlock string)
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(creationBlock)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 29, Col: 55}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 37, Col: 55}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -83,7 +91,7 @@ func SonrProfile(addr string, name string, handle string, creationBlock string)
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 33, Col: 32}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 41, Col: 32}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -97,12 +105,4 @@ func SonrProfile(addr string, name string, handle string, creationBlock string)
 	})
 }
 
-// Helper function to shorten address
-func shortenAddress(address string) string {
-	if len(address) <= 20 {
-		return address
-	}
-	return address[:16] + "..." + address[len(address)-4:]
-}
-
 var _ = templruntime.GeneratedTemplate

pkg/blocks/forms/register_passkey.templ

@@ -12,7 +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" />
+		<input type="hidden" name="credential" id="credential-data" required/>
 		<sl-card class="card-form gap-4 max-w-lg">
 			<div slot="header">
 				<div class="w-full py-1">

pkg/blocks/forms/register_passkey_templ.go

@@ -61,7 +61,7 @@ func RegisterPasskey(action, method string, data RegisterPasskeyData) templ.Comp
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><sl-card class=\"card-form gap-4 max-w-lg\"><div slot=\"header\"><div class=\"w-full py-1\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><input type=\"hidden\" name=\"credential\" id=\"credential-data\" required> <sl-card class=\"card-form gap-4 max-w-lg\"><div slot=\"header\"><div class=\"w-full py-1\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -133,8 +133,8 @@ func passkeyDropzone(addr string, userHandle string, challenge string) templ.Com
 
 func createPasskey(userId string, userHandle string, challenge string) templ.ComponentScript {
 	return templ.ComponentScript{
-		Name: `__templ_createPasskey_9b69`,
+		Name: `__templ_createPasskey_6e79`,
-		Function: `function __templ_createPasskey_9b69(userId, userHandle, challenge){const publicKey = {
+		Function: `function __templ_createPasskey_6e79(userId, userHandle, challenge){const publicKey = {
   challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)),
   rp: {
     name: "Sonr.ID",
@@ -170,16 +170,25 @@ func createPasskey(userId string, userHandle string, challenge string) templ.Com
 navigator.credentials
   .create({ publicKey })
   .then((newCredentialInfo) => {
-  	console.log(newCredentialInfo);
+    // Convert credential to base64 string
-    // Send new credential info to server for verification and registration.
+    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);
     // No acceptable authenticator or user refused consent. Handle appropriately.
   });
 }`,
-		Call:       templ.SafeScript(`__templ_createPasskey_9b69`, userId, userHandle, challenge),
+		Call:       templ.SafeScript(`__templ_createPasskey_6e79`, userId, userHandle, challenge),
-		CallInline: templ.SafeScriptInline(`__templ_createPasskey_9b69`, userId, userHandle, challenge),
+		CallInline: templ.SafeScriptInline(`__templ_createPasskey_6e79`, userId, userHandle, challenge),
 	}
 }
 

pkg/gateway/handlers/register_handler.go

@@ -40,6 +40,7 @@ func HandleRegisterStart(c echo.Context) error {
 }
 
 func HandleRegisterFinish(c echo.Context) error {
-	// cred := c.FormValue("credential")
+	cred := c.FormValue("credential")
+	fmt.Println(cred)
 	return response.TemplEcho(c, register.LoadingVaultView())
 }