Add React Native Support

[mbirnhak]

I was able to get this library working with React Native by assigning global.crypto to React Native Quick Crypto (with a few modifications). I then made some changes to the JOSE library to make it compatible, specifically so it could generate a JWE using alg: ECDH-ES and enc: A128CBC-HS256.

This code was needed in my index.js file to properly set up my global crypto:

function convertToHexString(jwk, keyField) {
    const keyValue = jwk[keyField];
    const cleanBase64 = keyValue.replace(/\.$/, '').replace(/-/g, '+').replace(/_/g, '/');
    const padding = '='.repeat((4 - (cleanBase64.length % 4)) % 4);
    const base64 = cleanBase64 + padding;
    const keyHexString = atob(base64).split('').map((c) => {
        const hex = c.charCodeAt(0).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    }).join('');
    return keyHexString;
}

// Need to specify for JOSE library to work. Certain methods are not implemented yet by QuickCrypto
function setupCrypto() {
    console.log('SETUP: Starting crypto setup');
    try {
        const QuickCryptoModule = require('react-native-quick-crypto');
        const QuickCrypto = QuickCryptoModule.default;
        const Crypto = require('expo-crypto');
        const p256Module = require('@noble/curves/p256');
        const p256 = p256Module.p256;

        subtleImplementation = QuickCrypto.subtle;
        // Then override only the specific methods needed

        /** 
         * @param {object} algorithm Contains the public key and algorithm name
         * @param {CryptoKey} privateKey The private key
         * @param {number} length The length of the derived key in bits. It is 256 since we are using P-256
         * @returns {Promise<ArrayBuffer>} The derived key as an ArrayBuffer
         * @throws {Error} If there is an error in the derivation process
         * @description Custom implementation of deriveBits, because QuickCrypto does not support it for ECDH yet.
        */
        subtleImplementation.deriveBits = async (algorithm, privateKey, length) => {
            try {
                const exportedPublicKey = await QuickCrypto.subtle.exportKey('jwk', algorithm.public);
                const exportedPrivatKey = await QuickCrypto.subtle.exportKey('jwk', privateKey);

                const privateKeyHex = convertToHexString(exportedPrivatKey, 'd');
                const publicKeyHexX = convertToHexString(exportedPublicKey, 'x');
                const publicKeyHexY = convertToHexString(exportedPublicKey, 'y');
                const publicKeyHex = "04" + publicKeyHexX + publicKeyHexY;
                console.log("My priv: ", privateKeyHex);
                console.log("My priv X: ", exportedPrivatKey.x);
                console.log("My priv Y: ", exportedPrivatKey.y);
                console.log("Their x: ", publicKeyHexX);
                console.log("Their y: ", publicKeyHexY);
                console.log('Public Key from JWK: ', publicKeyHex)
                const sharedSecret = p256.getSharedSecret(privateKeyHex, publicKeyHex, false);
                const xCoordinateOnly = new Uint8Array(sharedSecret.subarray(1, 1 + 32));
                // Convert uint8Array to ArrayBuffer
                const sharedSecretBuffer = xCoordinateOnly.buffer.slice(
                    xCoordinateOnly.byteOffset,
                    xCoordinateOnly.byteOffset + xCoordinateOnly.byteLength
                );
                console.log("sharedSecretBuffer length: ", sharedSecretBuffer.byteLength)
                console.log("sharedSecret: ", sharedSecret)
                console.log("xCoordinateOnly: ", xCoordinateOnly)
                return sharedSecretBuffer;
            } catch (error) {
                console.error('SETUP: Error in deriveBits', error);
                throw error;
            }
        }

        subtleImplementation.deriveKey = async (...args) => {
            throw new Error("deriveKey not implemented");
        };

        subtleImplementation.unwrapKey = async (...args) => {
            throw new Error("unwrapKey not implemented");
        };

        subtleImplementation.wrapKey = async (...args) => {
            throw new Error("wrapKey not implemented");
        };

        global.crypto = {
            ...QuickCrypto,
            subtle: subtleImplementation,
            getRandomValues: ((array) => QuickCrypto.getRandomValues(array)),
            randomUUID: () => Crypto.randomUUID(),
            createHmac: QuickCrypto.createHmac
        };

        console.log('SETUP: Crypto setup complete');
    } catch (error) {
        console.error('SETUP: Error setting up crypto', error);
    }
}

setupCrypto()
require('expo-router/entry')

Then, I needed to modify the JOSE library which can be done by using the following patch-package file:

diff --git a/node_modules/jose/dist/webapi/lib/encrypt.js b/node_modules/jose/dist/webapi/lib/encrypt.js
index b0e96a7..82e7a28 100644
--- a/node_modules/jose/dist/webapi/lib/encrypt.js
+++ b/node_modules/jose/dist/webapi/lib/encrypt.js
@@ -12,16 +12,25 @@ async function cbcEncrypt(enc, plaintext, cek, iv, aad) {
     }
     const keySize = parseInt(enc.slice(1, 4), 10);
     const encKey = await crypto.subtle.importKey('raw', cek.subarray(keySize >> 3), 'AES-CBC', false, ['encrypt']);
-    const macKey = await crypto.subtle.importKey('raw', cek.subarray(0, keySize >> 3), {
-        hash: `SHA-${keySize << 1}`,
-        name: 'HMAC',
-    }, false, ['sign']);
+    // const macKey = await crypto.subtle.importKey('raw', cek.subarray(0, keySize >> 3), {
+    //     hash: `SHA-${keySize << 1}`,
+    //     name: 'HMAC',
+    // }, false, ['sign']);
+    // const tag = new Uint8Array((await crypto.subtle.sign('HMAC', macKey, macData)).slice(0, keySize >> 3));
+
+    // THe createHmac function takes a Uint8Array as the key, not a CryptoKey
+    // And the subtle.sign function is not implemented in QuickCrypto for HMAC yet
+    const macKey = cek.subarray(0, keySize >> 3);
+    const hash = `sha${keySize << 1}`;
     const ciphertext = new Uint8Array(await crypto.subtle.encrypt({
         iv,
         name: 'AES-CBC',
     }, encKey, plaintext));
     const macData = concat(aad, iv, ciphertext, uint64be(aad.length << 3));
-    const tag = new Uint8Array((await crypto.subtle.sign('HMAC', macKey, macData)).slice(0, keySize >> 3));
+    const tag = new Uint8Array((crypto.createHmac(hash, macKey)
+        .update(macData)
+        .digest())
+        .slice(0, keySize >> 3));
     return { ciphertext, tag, iv };
 }
 async function gcmEncrypt(enc, plaintext, cek, iv, aad) {
diff --git a/node_modules/jose/dist/webapi/lib/encrypt_key_management.js b/node_modules/jose/dist/webapi/lib/encrypt_key_management.js
index def432d..7b19726 100644
--- a/node_modules/jose/dist/webapi/lib/encrypt_key_management.js
+++ b/node_modules/jose/dist/webapi/lib/encrypt_key_management.js
@@ -35,10 +35,13 @@ export default async (alg, enc, key, providedCek, providedParameters = {}) => {
                 ephemeralKey = (await crypto.subtle.generateKey(key.algorithm, true, ['deriveBits'])).privateKey;
             }
             const { x, y, crv, kty } = await exportJWK(ephemeralKey);
+            // Remove trailing '.' from x and y which is added by React Native Quick Crypto
+            const x_clean = x.replace(/\.$/, '');
+            const y_clean = y.replace(/\.$/, '');
             const sharedSecret = await ecdhes.deriveKey(key, ephemeralKey, alg === 'ECDH-ES' ? enc : alg, alg === 'ECDH-ES' ? cekLength(enc) : parseInt(alg.slice(-5, -2), 10), apu, apv);
-            parameters = { epk: { x, crv, kty } };
+            parameters = { epk: { x: x_clean, crv, kty } };
             if (kty === 'EC')
-                parameters.epk.y = y;
+                parameters.epk.y = y_clean;
             if (apu)
                 parameters.apu = b64u(apu);
             if (apv)
diff --git a/node_modules/jose/dist/webapi/lib/is_key_like.js b/node_modules/jose/dist/webapi/lib/is_key_like.js
index d9ff4f2..45dec63 100644
--- a/node_modules/jose/dist/webapi/lib/is_key_like.js
+++ b/node_modules/jose/dist/webapi/lib/is_key_like.js
@@ -4,7 +4,24 @@ export function assertCryptoKey(key) {
     }
 }
 export function isCryptoKey(key) {
-    return key?.[Symbol.toStringTag] === 'CryptoKey';
+    // Check for JOSE CryptoKey (standard Web Crypto API)
+    if (key?.[Symbol.toStringTag] === 'CryptoKey') {
+        return true;
+    }
+
+    // Check for React Native Quick Crypto CryptoKey
+    // RN Quick Crypto CryptoKey has different characteristics
+    if (key && typeof key === 'object') {
+        // React Native Quick Crypto CryptoKey typically has these properties
+        if ('type' in key && 'extractable' in key && 'algorithm' in key && 'usages' in key) {
+            // Additional check for RN Quick Crypto specific implementation
+            if (key.constructor?.name === 'CryptoKey' || key.hasOwnProperty('_handle')) {
+                return true;
+            }
+        }
+    }
+
+    return false;
 }
 export function isKeyObject(key) {
     return key?.[Symbol.toStringTag] === 'KeyObject';

[panva]

+    // Check for React Native Quick Crypto CryptoKey
+    // RN Quick Crypto CryptoKey has different characteristics
+    if (key && typeof key === 'object') {
+        // React Native Quick Crypto CryptoKey typically has these properties
+        if ('type' in key && 'extractable' in key && 'algorithm' in key && 'usages' in key) {
+            // Additional check for RN Quick Crypto specific implementation
+            if (key.constructor?.name === 'CryptoKey' || key.hasOwnProperty('_handle')) {
+                return true;
+            }
+        }
+    }

This should be as simple as adding the proper symbol to the library's CryptoKey instances in react-native-quick-crypto as all web platforms do for their native objects

+            // Remove trailing '.' from x and y which is added by React Native Quick Crypto
+            const x_clean = x.replace(/\.$/, '');
+            const y_clean = y.replace(/\.$/, '');
             const sharedSecret = await ecdhes.deriveKey(key, ephemeralKey, alg === 'ECDH-ES' ? enc : alg, alg === 'ECDH-ES' ? cekLength(enc) : parseInt(alg.slice(-5, -2), 10), apu, apv);
-            parameters = { epk: { x, crv, kty } };
+            parameters = { epk: { x: x_clean, crv, kty } };
             if (kty === 'EC')
-                parameters.epk.y = y;
+                parameters.epk.y = y_clean;

This seems to be something you need to fix in your subtleImplementation.deriveBits implementation, or react-native-quick-crypto needs to add proper support for the deriveBits operation.

-    const tag = new Uint8Array((await crypto.subtle.sign('HMAC', macKey, macData)).slice(0, keySize >> 3));
+    const tag = new Uint8Array((crypto.createHmac(hash, macKey)
+        .update(macData)
+        .digest())
+        .slice(0, keySize >> 3));

This needs to be fixed by react-native-quick-crypto by adding support for the WebCryptoAPI HMAC algorithm, crypto.createHmac is not a WebCryptoAPI method, it's a node:crypto method and as such cannot be used anymore by jose@6.

The rest likewise appears to be just polyfilling the necessary globals and as such, not something jose can do.