go/sonr
1
0
Fork 0
mirror of https://github.com/sonr-io/sonr.git synced 2026-08-03 01:41:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement passkey registration flow

Browse Source
This commit is contained in:
Prad Nukala
2024-12-09 16:23:18 -05:00
parent 27d4dfcdfd
commit 0e8b92e53d
11 changed files with 182 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/blocks/forms/create_profile.templ
+20 -2
View File
@@ -1,9 +1,22 @@
package forms
import "github.com/onsonr/sonr/pkg/blocks/layout"
import (
"fmt"
"github.com/onsonr/sonr/pkg/blocks/layout"
)
type CreateProfileData struct {
TurnstileSiteKey string
FirstNumber int
LastNumber int
}
func (d CreateProfileData) IsHumanLabel() string {
return fmt.Sprintf("What is %d + %d?", d.FirstNumber, d.LastNumber)
}
// ProfileForm is a standard form styled like a card
templ CreateProfile(action string, method string) {
templ CreateProfile(action string, method string, data CreateProfileData) {
<form action={ templ.SafeURL(action) } method={ method }>
<sl-card class="card-form gap-4 max-w-lg">
<div slot="header">
@@ -21,6 +34,8 @@ templ CreateProfile(action string, method string) {
<sl-icon name="at-sign" library="sonr"></sl-icon>
</div>
</sl-input>
@layout.Spacer()
<sl-range name="is_human" label={ data.IsHumanLabel() } help-text="Prove you are a human." min="0" max="9" step="1"></sl-range>
<div slot="footer">
<sl-button href="/" outline>
<sl-icon slot="prefix" name="arrow-left" library="sonr"></sl-icon>
@@ -41,3 +56,6 @@ templ CreateProfile(action string, method string) {
</sl-card>
</form>
}
templ isHumanSlider(targetSum string) {
}
pkg/blocks/forms/create_profile_templ.go
+63 -4
View File
@@ -8,10 +8,23 @@ package forms
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import "github.com/onsonr/sonr/pkg/blocks/layout"
import (
"fmt"
"github.com/onsonr/sonr/pkg/blocks/layout"
)
type CreateProfileData struct {
TurnstileSiteKey string
FirstNumber int
LastNumber int
}
func (d CreateProfileData) IsHumanLabel() string {
return fmt.Sprintf("What is %d + %d?", d.FirstNumber, d.LastNumber)
}
// ProfileForm is a standard form styled like a card
func CreateProfile(action string, method string) templ.Component {
func CreateProfile(action string, method string, data CreateProfileData) 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
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -48,7 +61,7 @@ func CreateProfile(action string, method string) templ.Component {
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(method)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/create_profile.templ`, Line: 7, Col: 55}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/create_profile.templ`, Line: 20, Col: 55}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@@ -84,7 +97,28 @@ func CreateProfile(action string, method string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-input name=\"handle\" placeholder=\"thoughtdiff\" type=\"text\" label=\"Handle\" minlength=\"4\" maxlength=\"12\" required><div slot=\"prefix\"><sl-icon name=\"at-sign\" library=\"sonr\"></sl-icon></div></sl-input><div slot=\"footer\"><sl-button href=\"/\" outline><sl-icon slot=\"prefix\" name=\"arrow-left\" library=\"sonr\"></sl-icon> Cancel</sl-button> <sl-button type=\"submit\">Next <sl-icon slot=\"suffix\" name=\"arrow-right\" library=\"sonr\"></sl-icon></sl-button></div><style>\n \t\t.card-form [slot='footer'] {\n \t\tdisplay: flex;\n \t\tjustify-content: space-between;\n \t\talign-items: center;\n \t\t}\n\t\t</style></sl-card></form>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-input name=\"handle\" placeholder=\"thoughtdiff\" type=\"text\" label=\"Handle\" minlength=\"4\" maxlength=\"12\" required><div slot=\"prefix\"><sl-icon name=\"at-sign\" library=\"sonr\"></sl-icon></div></sl-input>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = layout.Spacer().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-range name=\"is_human\" label=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(data.IsHumanLabel())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/create_profile.templ`, Line: 38, Col: 56}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" help-text=\"Prove you are a human.\" min=\"0\" max=\"9\" step=\"1\"></sl-range><div slot=\"footer\"><sl-button href=\"/\" outline><sl-icon slot=\"prefix\" name=\"arrow-left\" library=\"sonr\"></sl-icon> Cancel</sl-button> <sl-button type=\"submit\">Next <sl-icon slot=\"suffix\" name=\"arrow-right\" library=\"sonr\"></sl-icon></sl-button></div><style>\n \t\t.card-form [slot='footer'] {\n \t\tdisplay: flex;\n \t\tjustify-content: space-between;\n \t\talign-items: center;\n \t\t}\n\t\t</style></sl-card></form>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -92,4 +126,29 @@ func CreateProfile(action string, method string) templ.Component {
})
}
func isHumanSlider(targetSum 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
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var6 := templ.GetChildren(ctx)
if templ_7745c5c3_Var6 == nil {
templ_7745c5c3_Var6 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
return templ_7745c5c3_Err
})
}
var _ = templruntime.GeneratedTemplate
pkg/blocks/forms/register_passkey.templ
+8 -10
View File
@@ -13,22 +13,20 @@ templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
<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">
<div class="w-full py-2">
@sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
</div>
</div>
@passkeyDropzone(data.Address, data.Handle, data.Challenge)
<div slot="footer">
<sl-button type="submit" pill style="width: 100%;" variant="primary">
<sl-icon slot="prefix" name="shield-fill-check"></sl-icon>
Register Vault
<sl-icon slot="suffix" name="arrow-outbound" library="sonr"></sl-icon>
<div slot="footer" class="space-y-2">
@passkeyDropzone(data.Address, data.Handle, data.Challenge)
<sl-button href="/" style="width: 100%;" outline>
<sl-icon slot="prefix" name="x-lg"></sl-icon>
Cancel
</sl-button>
</div>
<style>
.card-form [slot='footer'] {
display: flex;
justify-content: space-between;
justify-content: space-evenly;
align-items: center;
}
</style>
@@ -37,7 +35,7 @@ templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
}
templ passkeyDropzone(addr string, userHandle string, challenge string) {
<sl-button pill style="width: 100%;" onclick={ createPasskey(addr, userHandle, challenge) }>
<sl-button style="width: 100%;" onclick={ createPasskey(addr, userHandle, challenge) }>
<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 24px;" class="text-neutral-500"></sl-icon>
Register Passkey
</sl-button>
pkg/blocks/forms/register_passkey_templ.go
+56 -19
View File
@@ -59,7 +59,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("\" id=\"passkey-form\"><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\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"passkey-form\"><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-2\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -67,7 +67,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("</div></div>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div slot=\"footer\" class=\"space-y-2\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -75,7 +75,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("<div slot=\"footer\"><sl-button type=\"submit\" pill style=\"width: 100%;\" variant=\"primary\"><sl-icon slot=\"prefix\" name=\"shield-fill-check\"></sl-icon> Register Vault <sl-icon slot=\"suffix\" name=\"arrow-outbound\" library=\"sonr\"></sl-icon></sl-button></div><style>\n \t\t.card-form [slot='footer'] {\n \t\tdisplay: flex;\n \t\tjustify-content: space-between;\n \t\talign-items: center;\n \t\t}\n\t\t</style></sl-card></form>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-button href=\"/\" style=\"width: 100%;\" outline><sl-icon slot=\"prefix\" name=\"x-lg\"></sl-icon> Cancel</sl-button></div><style>\n \t\t.card-form [slot='footer'] {\n \t\tjustify-content: space-evenly;\n \t\talign-items: center;\n \t\t}\n\t\t</style></sl-card></form>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -108,7 +108,7 @@ func passkeyDropzone(addr string, userHandle string, challenge string) templ.Com
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-button pill style=\"width: 100%;\" onclick=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-button style=\"width: 100%;\" onclick=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -127,8 +127,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_d562`,
Function: `function __templ_createPasskey_d562(userId, userHandle, challenge){const publicKey = {
Name: `__templ_createPasskey_fc87`,
Function: `function __templ_createPasskey_fc87(userId, userHandle, challenge){const publicKey = {
challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)),
rp: {
name: "Sonr.ID",
@@ -161,21 +161,58 @@ func createPasskey(userId string, userHandle string, challenge string) templ.Com
},
},
};
// Helper function to convert ArrayBuffer to Base64URL string
function arrayBufferToBase64URL(buffer) {
const bytes = new Uint8Array(buffer);
let str = '';
bytes.forEach(byte => { str += String.fromCharCode(byte) });
return btoa(str)
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
}
navigator.credentials
.create({ publicKey })
.then((newCredentialInfo) => {
const credentialJSON = JSON.stringify(newCredentialInfo);
document.getElementById('credential-data').value = btoa(credentialJSON);
document.getElementById('passkey-form').submit();
)
if (!(newCredentialInfo instanceof PublicKeyCredential)) {
throw new Error('Received credential is not a PublicKeyCredential');
}
const response = newCredentialInfo.response;
if (!(response instanceof AuthenticatorAttestationResponse)) {
throw new Error('Response is not an AuthenticatorAttestationResponse');
}
// Convert the credential data to a cross-platform compatible format
const credentialJSON = {
id: newCredentialInfo.id,
rawId: arrayBufferToBase64URL(newCredentialInfo.rawId),
type: newCredentialInfo.type,
authenticatorAttachment: newCredentialInfo.authenticatorAttachment || null,
transports: Array.isArray(response.getTransports) ? response.getTransports() : [],
clientExtensionResults: newCredentialInfo.getClientExtensionResults(),
response: {
attestationObject: arrayBufferToBase64URL(response.attestationObject),
clientDataJSON: arrayBufferToBase64URL(response.clientDataJSON)
}
};
// Set the form value with the stringified credential data
const credentialInput = document.getElementById('credential-data');
credentialInput.value = JSON.stringify(credentialJSON);
// Submit the form
const form = document.getElementById('passkey-form');
form.submit();
})
.catch((err) => {
console.error(err);
alert('Failed to create passkey. Please try again.');
console.error('Passkey creation failed:', err);
alert(` + "`" + `Failed to create passkey: ${err.message || 'Unknown error'}` + "`" + `);
});
}
}`,
Call: templ.SafeScript(`__templ_createPasskey_d562`, userId, userHandle, challenge),
CallInline: templ.SafeScriptInline(`__templ_createPasskey_d562`, userId, userHandle, challenge),
Call: templ.SafeScript(`__templ_createPasskey_fc87`, userId, userHandle, challenge),
CallInline: templ.SafeScriptInline(`__templ_createPasskey_fc87`, userId, userHandle, challenge),
}
}
@@ -207,7 +244,7 @@ func sonrProfile(addr string, name string, handle string, creationBlock string)
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(handle)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 100, Col: 43}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 135, Col: 43}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@@ -220,7 +257,7 @@ func sonrProfile(addr string, name string, handle string, creationBlock string)
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(shortenAddress(addr))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 107, Col: 58}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 142, Col: 58}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@@ -233,7 +270,7 @@ func sonrProfile(addr string, name string, handle string, creationBlock string)
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(creationBlock)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 112, Col: 55}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 147, Col: 55}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@@ -246,7 +283,7 @@ func sonrProfile(addr string, name string, handle string, creationBlock string)
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 116, Col: 32}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/forms/register_passkey.templ`, Line: 151, Col: 32}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {