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

fix: Improve cross-browser passkey credential handling and encoding

Browse Source
This commit is contained in:
Prad Nukala (aider)
2024-12-09 15:21:18 -05:00
parent bbb093b171
commit 38096db2dd
1 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/blocks/forms/register_passkey.templ
+39 -12
View File
@@ -77,27 +77,54 @@ const publicKey = {
},
},
};
// 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) => {
// Convert credential to base64 string
// Convert the credential data to a proper format
const credentialJSON = JSON.stringify({
id: base64URLEncode(newCredentialInfo.rawId),
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,
authenticatorAttachment: newCredentialInfo.authenticatorAttachment || null,
transports: Array.isArray(response.getTransports) ? response.getTransports() : [],
clientExtensionResults: newCredentialInfo.getClientExtensionResults(),
response: {
attestationObject: base64URLEncode(newCredentialInfo.response.attestationObject),
clientDataJSON: base64URLEncode(newCredentialInfo.response.clientDataJSON)
attestationObject: arrayBufferToBase64URL(response.attestationObject),
clientDataJSON: arrayBufferToBase64URL(response.clientDataJSON)
}
});
document.getElementById('credential-data').value = btoa(credentialJSON);
document.getElementById('passkey-form').submit();
};
// 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'}`);
});
}