Use WebCrypto instead for performance & bundle size improvements about otpauth HOT 3 CLOSED

What I initially stated in the linked issue still applies, I prefer not to use the Web Crypto API if it means breaking compatibility, since jsSHA, while not native, is a widely used SHA implementation that works well.

But there is room for improvement here, the first thing would be to study the feasibility of creating an alternative build that uses the Web Crypto API (although it would not be trivial as this build would have to expose a slightly different API since it would have to use asynchronous methods) and the second thing would be to have a build that does not bundle jsSHA to avoid it being included multiple times in case another dependency imports it.

Right now this is not a priority for me, but I leave this issue open to review it in the future, a PR would also be welcome.

from otpauth.

@hectorm I had started some progress here, but I wasn't quite sure how to produce a WebCrypto build & a jsSHA build to maintain the browser compatbility required to upstream the changes.

If this is a good start, you could possibly finish it or provide the insight needed to continue.

from otpauth.

After a benchmark with jsSHA, @noble/hashes and your SubtleCrypto fork, I noticed that the latter is much slower (possibly due to the overhead of the async function), so I don't think I will use the Web Crypto API for the time being.

Although thanks to this I'm thinking about switching to @noble/hashes as it would reduce the minified bundle size from 30 KB to 24 KB (without compression). The idea of providing a variant that doesn't bundle the HMAC library to avoid duplication still stands, but that's outside the scope of this issue, so I'll close this one and create another.

Bun 1.1.10:

Deno 1.43.5:

Chromium 125:

Firefox 126:

import { Bench } from "tinybench";
import * as otpauth from "otpauth";
import * as otpauthNoble from "otpauthNoble";
import * as otpauthSubtle from "otpauthSubtle";

(async () => {
  const bench = new Bench({
    time: 10000,
    warmupTime: 1000,
  });

  const totp = new otpauth.TOTP({ secret: "NB2W45DFOIZA" });
  bench.add("totpValidate", () => {
    totp.validate({ token: "000000", window: 1000 });
  });

  const totpNoble = new otpauthNoble.TOTP({ secret: "NB2W45DFOIZA" });
  bench.add("totpNobleValidate", () => {
    totpNoble.validate({ token: "000000", window: 1000 });
  });

  const totpSubtle = new otpauthSubtle.TOTP({ secret: "NB2W45DFOIZA" });
  bench.add("totpSubtleValidate", async () => {
    await totpSubtle.validate({ token: "000000", window: 1000 });
  });

  await bench.warmup();
  await bench.run();
  console.table(bench.table());
})();

from otpauth.