isomorphic code for native node.js and browser crypto

Question

There is the isomorphic-webcrypto that pretends doing that but doesn't : it builds separate build for each target.

There is the noble-crypto way to do it, but it's based on if-else conditions and fails if I want an isomorphic mjs code.

Finally, there is the eval require way way to pass-through bundler, but node fails to use it in mjs.

In brief :

const crypto = require("crypto"); // work only in node.js but not in mjs file.
const crypto = eval(`require("crypto")`); // pass-thru bundler, then work only in node.js but not in mjs file.
window.crypto; // work only in browser
import * as crypto from "crypto"; // could work from both but must be at top level of a module, so it can't be a conditional import.

I would like to use native crypto in node.js and in browser, in an isomorphic way, to be able to use native import mjs in node and browser transparently.

How can I do this?

Answer 1

Alright. Ready for something ugly? :-) Behold, my latest hackjob… IsomorphicCyrpto.js:

export default
  globalThis.crypto ||
  (await import('node:crypto')).default.webcrypto
;

This works in Node.js v16 in module mode ("type": "module" in package.json, or equivalent CLI args), and will probably work with your bundler too… but who knows. ;-) Anyone using this code snippet should test thoroughly on whatever platforms they want to use it on.

In a nutshell:

• We use globalThis, which represents global under Node.js, window for most browser contexts, and could perhaps even be a Worker context.
• We first check to see if crypto is a thing. If it is, we're probably on a browser, and can just use that directly.
• If crypto is not a thing, we're probably on Node.js and we need to import the module.
• Because this is done dynamically, we need a dynamic import() rather than a true import.
• import() is async and returns a Promise. But hey, it's all good, because top-level await is a thing in Node.js now!

To then use the module:

import crypto from './lib/IsomorphicCrypto.js';
console.log( crypto.randomUUID() );

Uggggly, but works for now. Hopefully, someone comes up with a better solution, or Node.js and browser contexts converge on naming in the future.

Answer 2

In Node version 20 & up there is a global crypto object that provides the webcrypto API that you needed to manually import in earlier versions:

globalThis.crypto === require('node:crypto').webcrypto

So the code:

globalThis.crypto.randomUUID()

Would work the same in the browser & in Node with no imports and no special tooling.