npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@solar-republic/argon2-browser

v1.18.0-beta.1

Published

Argon2 library compiled for browser runtime

Downloads

3

Readme

Argon2 in browser Build

Argon2 is a password-hashing function, the winner of Password Hashing Competition. Here Argon2 library is compiled for browser runtime.

Live demo

More about Argon2

Usage

The numbers

| | Time, ms (lower is better) | |-------------------|----------------------------| | Chrome WASM | 225 | | Chrome WASM+SIMD | 119 | | Firefox WASM | 195 | | Firefox WASM+SIMD | 135 | | Safari WASM | 174 | | Native -O3 SSE | 15 | | Native -O3 | 42 | | Native -O1 | 55 | | Native -O0 | 395 |

Test Environment

Environment used to get the numbers above:

Algorithm parameters (-d -t 100 -m 10 -p 1):

  • iterations: 100
  • memory: 1MiB (1024 KiB)
  • hash length: 32
  • parallelism: 1
  • argon2d

Environment:

  • MacBook pro 2020, Intel Core i7, 2.3GHz (x64), macOS 10.14.6 (18G95)
  • Chrome 85.0.4183.83 (Official Build)
  • Firefox 80.0.1
  • Safari 13.1.2 (15609.3.5.1.3)
  • native argon2 compiled from https://github.com/P-H-C/phc-winner-argon2 @440ceb9

Code size

ll -h dist

| File | Code size, kB | |-------------|---------------| | argon2.js | 14 | | argon2.wasm | 25 |

Is Argon2 modified?

No, it's used a submodule from upstream.

SIMD

SIMD is not quite here in WebAssembly, however for those who would like to give it a try, we already provide a working build with SIMD. At the moment it works only in Chrome, to be able to use it, you need to either add this origin trial to your website, or enable the SIMD feature in Chrome flags.

More about WebAssembly SIMD support in V8: https://v8.dev/features/simd

On Firefox you need to enable javascript.options.wasm_simd option in about:config.

To use the SIMD version, load argon2-simd.wasm instead of argon2.wasm.

JS Library

The library can be installed from npm:

npm install argon2-browser

Then add this script to your HTML or use your favorite bundler:

<script src="node_modules/argon2-browser/lib/argon2.js"></script>

Alternatively, you can use the bundled version, this way you can include just one script:

<script src="node_modules/argon2-browser/dist/argon2-bundled.js"></script>

Calculate the hash:

argon2.hash({ pass: 'password', salt: 'somesalt' })
    .then(h => console.log(h.hash, h.hashHex, h.encoded))
    .catch(e => console.error(e.message, e.code))

Verify the encoded hash (if you need it):

argon2.verify({ pass: 'password', encoded: 'enc-hash' })
    .then(() => console.log('OK'))
    .catch(e => console.error(e.message, e.code))

Other parameters:

argon2.hash({
    // required
    pass: 'password',
    salt: 'salt',
    // optional
    time: 1, // the number of iterations
    mem: 1024, // used memory, in KiB
    hashLen: 24, // desired hash length
    parallelism: 1, // desired parallelism (it won't be computed in parallel, however)
    secret: new Uint8Array([...]), // optional secret data
    ad: new Uint8Array([...]), // optional associated data
    type: argon2.ArgonType.Argon2d, // Argon2d, Argon2i, Argon2id
})
// result
.then(res => {
    res.hash // hash as Uint8Array
    res.hashHex // hash as hex-string
    res.encoded // encoded hash, as required by argon2
})
// or error
.catch(err => {
    err.message // error message as string, if available
    err.code // numeric error code
})
argon2.verify({
    // required
    pass: 'password',
    encoded: 'enc-hash',
    // optional
    secret: new Uint8Array([...]), // optional secret data
    ad: new Uint8Array([...]), // optional associated data
    type: argon2.ArgonType.Argon2d, // Argon2d, Argon2i, Argon2id. default: guess
})
// result
.then(res => {
    res.hash // hash as Uint8Array
    res.hashHex // hash as hex-string
    res.encoded // encoded hash, as required by argon2
})
// or error
.catch(err => {
    err.message // error message as string, if available
    err.code // numeric error code
})

Usage

You can use this module in several ways:

  1. write the WASM loader manually, for example, if you need more control over memory (example);
  2. bundle it with WebPack or another bundler (example);
  3. in vanilla js: example;
  4. in node.js: example (see a note below).

Bundlers

Node.js support

Of course you can use generated WASM in node.js, but it's not sensible: you will get much better speed by compiling it as a native node.js addon, which is not that hard. Wait, it's already done, just install this package.

Is it used anywhere?

It is! KeeWeb (web-based password manager) is using it as a password hashing function implementation. Check out the source code, if you're interested.

Building

You can build everything with

./build.sh

Prerequisites:

  • emscripten with WebAssembly support (howto)
  • CMake

License

MIT