Pad SDK browser Import Keys

packages/encoding/src/__tests__/index-test.ts

@@ -69,3 +69,27 @@ test("uint8ArrayFromHexString", async function () {
   ]);
   expect(uint8ArrayFromHexString(hexString)).toEqual(expectedUint8Array); // Hex string => Uint8Array
 });
+
+// Test array padding for uint8ArrayFromHexString
+// Convert hex string to uint8 array and pads it with zeroes to a particular length if its less
+test("uint8ArrayFromHexString Test padding", async function () {
+
+  // TOO SHORT - test a hex string with less bytes than the "length" parameter provided 
+  const hexString =
+    "5234d08dfa2c815f3097b8ba848a28172e85bec78886e8e201afccb166fc"; // length is 30 bytes, so must be padded with 2 0's at the beginning
+  const expectedUint8Array = new Uint8Array([
+    0, 0, 82, 52, 208, 141, 250, 44, 129, 95, 48, 151, 184, 186, 132, 138, 40, 23, 46,
+    133, 190, 199, 136, 134, 232, 226, 1, 175, 204, 177, 102, 252,
+  ]);
+  expect(uint8ArrayFromHexString(hexString, 32)).toEqual(expectedUint8Array); // Hex string => Uint8Array
+
+
+  // TOO LONG - test a hex string with less bytes than the "length" parameter provided 
+  const hexString2 =
+    "5234d08dfa2c815f3097b8ba848a28172e85bec78886e8e201afccb166fcfafbfcfd"; // length is 34 bytes, so no additional padding will be added
+  const expectedUint8Array2 = new Uint8Array([
+    0, 0, 82, 52, 208, 141, 250, 44, 129, 95, 48, 151, 184, 186, 132, 138, 40, 23, 46,
+    133, 190, 199, 136, 134, 232, 226, 1, 175, 204, 177, 102, 252, 250, 251, 252, 253,
+  ]);
+  expect(uint8ArrayFromHexString(hexString, 32)).toEqual(expectedUint8Array); // Hex string => Uint8Array
+});

packages/encoding/src/index.ts

@@ -18,16 +18,20 @@ export function uint8ArrayToHexString(input: Uint8Array): string {
   );
 }
 
-export const uint8ArrayFromHexString = (hexString: string): Uint8Array => {
+export const uint8ArrayFromHexString = (hexString: string, length?: number): Uint8Array => {
   const hexRegex = /^[0-9A-Fa-f]+$/;
   if (!hexString || hexString.length % 2 != 0 || !hexRegex.test(hexString)) {
     throw new Error(
       `cannot create uint8array from invalid hex string: "${hexString}"`
     );
   }
-  return new Uint8Array(
-    hexString!.match(/../g)!.map((h: string) => parseInt(h, 16))
-  );
+  var buffer = new Uint8Array(hexString!.match(/../g)!.map((h: string) => parseInt(h, 16)));
+  if (length === undefined || buffer.length >= length) {
+    return buffer
+  }
+  var paddedBuffer = new Uint8Array(length);
+  paddedBuffer.set(buffer, length - buffer.length);
+  return paddedBuffer;
 };
 
 // Pure JS implementation of btoa. This is adapted from the following:

packages/sdk-browser/src/utils.ts

@@ -28,11 +28,30 @@ export const createEmbeddedAPIKey = async (
     aead: AeadId.Aes256Gcm,
   });
 
+  // Function to extract x and y components from a hex string public key
+  function getXYComponentsFromHexString(publicKeyHex: string) {
+    publicKeyHex = publicKeyHex.replace(/^0x/, '');
+    if (!publicKeyHex.startsWith('04')) {
+      throw new Error("Public key is not in uncompressed format");
+    }
+    const x = publicKeyHex.slice(2, 66);
+    const y = publicKeyHex.slice(66, 130);
+    return { x, y };
+  }
+
   // 3: import the targetPublicKey (i.e. passed in from the iframe)
   const targetKeyBytes = uint8ArrayFromHexString(targetPublicKey);
+  const { x, y } = getXYComponentsFromHexString(targetPublicKey);
+
   const targetKey = await crypto.subtle.importKey(
-    "raw",
-    targetKeyBytes,
+    "jwk",
+    {
+      kty: "EC",
+      crv: "P-256",
+      x: base64UrlEncode(uint8ArrayFromHexString(x, 32)),
+      y: base64UrlEncode(uint8ArrayFromHexString(y, 32)),
+      ext: true
+    },
     {
       name: "ECDH",
       namedCurve: "P-256",