Passkey registration fails with 1Password/.NET 10: registerPasskey payload missing clientExtensionResults #10643

2 Answer(s)

• 

  0

  kfrancis@clinicalsupportsystems.com created 5 months ago

  This seems to work, as a patch, for the moment (fixes registration and login):

  (function ($) {
      if (!$ || window.__abpPasskeyCompatibilityPatch) {
          return;
      }
  
      const registerPasskeyPath = "/api/account/registerPasskey";
      const originalAjax = $.ajax;
      const originalFormDataAppend = window.FormData && window.FormData.prototype.append;
      const originalFormDataSet = window.FormData && window.FormData.prototype.set;
      const originalFormSubmit = window.HTMLFormElement && window.HTMLFormElement.prototype.submit;
      const originalFormRequestSubmit = window.HTMLFormElement && window.HTMLFormElement.prototype.requestSubmit;
      const originalXhrOpen = window.XMLHttpRequest && window.XMLHttpRequest.prototype.open;
      const originalXhrSend = window.XMLHttpRequest && window.XMLHttpRequest.prototype.send;
  
      /**
       * Patches the credential JSON to ensure it contains the clientExtensionResults property, which is expected by ABP's passkey registration endpoint.
       * @param {any} credentialJson - The credential JSON string to patch.
       * @returns {any} - The patched credential JSON string, or the original value if it was not a string or could not be parsed.
       */
      function patchCredentialJson(credentialJson) {
          if (!credentialJson || typeof credentialJson !== "string") {
              return credentialJson;
          }
  
          const credential = JSON.parse(credentialJson);
          if (!Object.prototype.hasOwnProperty.call(credential, "clientExtensionResults")) {
              credential.clientExtensionResults = {};
          }
  
          return JSON.stringify(credential);
      }
  
      /**
       * Patches the value of a form field if it is the "credential" field, ensuring that the credential JSON contains the clientExtensionResults property.
       * @param {any} name - The name of the form field.
       * @param {any} value - The value of the form field.
       * @returns {any} - The patched value if the field is "credential" and the value is a string, or the original value otherwise.
       */
      function patchCredentialFormValue(name, value) {
          if (name === "credential" && typeof value === "string") {
              try {
                  return patchCredentialJson(value);
              } catch {
                  return value;
              }
          }
  
          return value;
      }
  
      /**
       * Patches a FormData object by ensuring that if it contains a "credential" field, the value of that field is patched to include the clientExtensionResults property in the credential JSON.
       * @param {any} formData - The FormData object to patch.
       * @returns {any} - The patched FormData object, or the original value if it was not a FormData object or did not contain a "credential" field with a string value.
       */
      function patchFormData(formData) {
          if (!formData || typeof formData.get !== "function" || typeof formData.set !== "function") {
              return formData;
          }
  
          const credential = formData.get("credential");
          if (typeof credential === "string") {
              formData.set("credential", patchCredentialJson(credential));
          }
  
          return formData;
      }
  
      /**
       * Patches all credential input fields within the specified root element, ensuring that the credential JSON contains the clientExtensionResults property.
       * @param {any} root - The root element to search for credential input fields. If not provided, the entire document is used.
       */
      function patchCredentialInputs(root) {
          const scope = root && typeof root.querySelectorAll === "function"
              ? root
              : document;
  
          const inputs = scope.querySelectorAll(
              "input[name='LoginInput.CredentialJson'], input#credentialJson"
          );
  
          inputs.forEach(function (input) {
              if (typeof input.value !== "string" || !input.value) {
                  return;
              }
  
              try {
                  input.value = patchCredentialJson(input.value);
              } catch {
                  // Let the existing passkey error handling display the failure.
              }
          });
      }
  
      /**
       * Patches the request data to ensure that if it contains a "credential" field, the value of that field is patched to include the clientExtensionResults property in the credential JSON.
       * @param {any} data - The request data to patch.
       * @returns {any} - The patched request data, or the original value if it was not a recognized type or did not contain a "credential" field with a string value.
       */
      function patchRequestData(data) {
          if (!data) {
              return data;
          }
  
          if (window.FormData && data instanceof window.FormData) {
              return patchFormData(data);
          }
  
          if (typeof data === "string") {
              const parameters = new URLSearchParams(data);
              const credential = parameters.get("credential");
  
              if (!credential) {
                  return data;
              }
  
              parameters.set("credential", patchCredentialJson(credential));
              return parameters.toString();
          }
  
          if (typeof data === "object" && typeof data.credential === "string") {
              data.credential = patchCredentialJson(data.credential);
          }
  
          return data;
      }
  
      document.addEventListener("submit", function (event) {
          patchCredentialInputs(event.target);
      }, true);
  
      if (originalFormSubmit) {
          window.HTMLFormElement.prototype.submit = function () {
              patchCredentialInputs(this);
              return originalFormSubmit.apply(this, arguments);
          };
      }
  
      if (originalFormRequestSubmit) {
          window.HTMLFormElement.prototype.requestSubmit = function () {
              patchCredentialInputs(this);
              return originalFormRequestSubmit.apply(this, arguments);
          };
      }
  
      if (originalFormDataAppend) {
          window.FormData.prototype.append = function (name, value, fileName) {
              const patchedValue = patchCredentialFormValue(name, value);
  
              return arguments.length > 2
                  ? originalFormDataAppend.call(this, name, patchedValue, fileName)
                  : originalFormDataAppend.call(this, name, patchedValue);
          };
      }
  
      if (originalFormDataSet) {
          window.FormData.prototype.set = function (name, value, fileName) {
              const patchedValue = patchCredentialFormValue(name, value);
  
              return arguments.length > 2
                  ? originalFormDataSet.call(this, name, patchedValue, fileName)
                  : originalFormDataSet.call(this, name, patchedValue);
          };
      }
  
      if (originalXhrOpen && originalXhrSend) {
          window.XMLHttpRequest.prototype.open = function (method, url) {
              this.__abpPasskeyCompatibilityPatchUrl = url;
              return originalXhrOpen.apply(this, arguments);
          };
  
          window.XMLHttpRequest.prototype.send = function (body) {
              if (
                  this.__abpPasskeyCompatibilityPatchUrl &&
                  this.__abpPasskeyCompatibilityPatchUrl.indexOf(registerPasskeyPath) !== -1 &&
                  window.FormData &&
                  body instanceof window.FormData
              ) {
                  try {
                      patchFormData(body);
                  } catch {
                      // Let the existing passkey error handling display the failure.
                  }
              }
  
              return originalXhrSend.call(this, body);
          };
      }
  
      /**
       * Patches the AJAX request data to ensure that if it contains a "credential" field, the value of that field is patched to include the clientExtensionResults property in the credential JSON.
       * @param {any} url - The URL of the AJAX request.
       * @param {any} options - The options for the AJAX request.
       * @returns {any} - The patched AJAX request options, or the original value if it was not a recognized type or did not contain a "credential" field with a string value.
       */
      $.ajax = function (url, options) {
          const ajaxOptions = typeof url === "object"
              ? url
              : options || {};
  
          const requestUrl = typeof url === "object"
              ? ajaxOptions.url
              : url;
  
          if (requestUrl && requestUrl.indexOf(registerPasskeyPath) !== -1) {
              try {
                  ajaxOptions.data = patchRequestData(ajaxOptions.data);
              } catch {
                  // Let the existing passkey error handling display the failure.
              }
          }
  
          return typeof url === "object"
              ? originalAjax.call(this, ajaxOptions)
              : originalAjax.call(this, url, ajaxOptions);
      };
  
      window.__abpPasskeyCompatibilityPatch = true;
  })(window.jQuery);
  
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 5 months ago

  Support Team Fullstack Developer

  Hi,

  Your analysis is correct, and this is a known issue upstream in ASP.NET Core - not something specific to ABP. ABP's passkey scripts (addPasskey.js, Login.js, and the profile passkey Default.js) follow the same plain JSON.stringify(credential) pattern as the official Blazor passkey template. That works for native PublicKeyCredential instances but breaks when 1Password (or other password managers) intercept navigator.credentials.create() and return an object whose toJSON() doesn't emit clientExtensionResults - which is required on Microsoft.AspNetCore.Identity.PublicKeyCredential<TResponse> in .NET 10:

  https://github.com/dotnet/aspnetcore/blob/release/10.0/src/Identity/Core/src/Passkeys/PublicKeyCredential.cs#L33

  The ASP.NET Core team is tracking it here:

  • https://github.com/dotnet/aspnetcore/issues/62916 - "Passkeys - Illegal invocation with 1Password"
  • https://github.com/dotnet/aspnetcore/pull/62917 - community fallback PR (closed, not merged into the template)
  • https://github.com/dotnet/aspnetcore/issues/63078 - tracked as a docs-only fix

  Their position is that password managers should fix PublicKeyCredential.prototype.toJSON themselves, so they declined to add the workaround to the Blazor template and documented it instead:

  https://learn.microsoft.com/aspnet/core/security/authentication/passkeys#mitigate-publickeycredentialtojson-error-typeerror-illegal-invocation

  The official guidance is to replace JSON.stringify(credential) with a manual object that explicitly populates each field (including clientExtensionResults from credential.getClientExtensionResults()), plus a convertToBase64 helper that base64url-encodes the binary fields.

  Your jQuery patch is a fine workaround for now - it covers form submit, FormData, XHR, and $.ajax, so both registration and login work.

  We'll apply Microsoft's documented fallback to the three ABP scripts in the next release so 1Password works out of the box. You can drop your patch once you upgrade.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel