sonr/internal/js/credentials.templ

package js

templ Credentials() {
}

script CreateCredential(formId string) {
    // Base64 encoding and decoding functions
  function arrayBufferToBase64(buffer) {
    return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)))
      .replace(/\+/g, "-")
      .replace(/\//g, "_")
      .replace(/=/g, "");
  }

  function base64ToArrayBuffer(base64) {
    const binary = atob(base64.replace(/-/g, "+").replace(/_/g, "/"));
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) {
      bytes[i] = binary.charCodeAt(i);
    }
    return bytes.buffer;
  }

  // Check if the form is valid
  const form = document.getElementById(formId);
  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }

  // Get user information from the form
  const name = document.getElementById('name').value;
  const handle = document.getElementById('handle').value;

  let credential = navigator.credentials.create({
    publicKey: {
      challenge: new Uint8Array([117, 61, 252, 231, 191, 241]),
      rp: { name: "ACME Corporation" },
      user: {
        id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
        name: handle,
        displayName: name
      },
      pubKeyCredParams: [{ type: "public-key", alg: -7 }]
    }
  }).then(credential => {
    // Prepare the credential data
    let credentialData = {
      id: credential.id,
      type: credential.type,
      rawId: arrayBufferToBase64(credential.rawId),
      response: {
        clientDataJSON: arrayBufferToBase64(credential.response.clientDataJSON),
        attestationObject: arrayBufferToBase64(credential.response.attestationObject)            
      },
      clientExtensionResults: credential.getClientExtensionResults()
    };

    // Set the serialized credential data as the form value
    document.getElementById('credentialData').value = JSON.stringify(credentialData);

    // Submit the form
    form.submit();
  }).catch(error => {
    console.error('Error creating credential:', error);
    // Handle the error (e.g., show an error message to the user)
  });
}