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

@sphereon/isomorphic-argon2

v1.0.1

Published

Argon2 hash library for Browser, NodeJs and React-Native

Downloads

615

Readme

CI NPM Version

Isomorphic Argon2 hash generator

Argon2 is a password-hashing function, which was the winner of the Password Hashing Competition.

This is an isomorphic library which can be run in the browser, NodeJS and React-Native.

For browser and NodeJS it is using the argon2-browser package and for React-Native it is using the @sphereon/react-native-argon2 package.

NodeJS and Browser notice

When using this package in the browser or a Node environment, you can ignore the warning about the missing peer dependency for @sphereon/react-native-argon2 and react-native. Obviously these are not needed for non react-native projects.

React Native notice

Next to NodeJS and Browser support, this package also works with react-native. You do need to install the following package using your package manager. This has to do with auto-linking not being available for transitive dependencies. We need some native Argon2 Android/IOS modules on React Native because WASM isn't available. As such you will have to install the dependency directly into your app. See this ticket for a discussion about this issue.

npm: npm install @sphereon/react-native-argon2

yarn: yarn add @sphereon/react-native-argon2

Examples

Although NodeJS and React-Native have different entry points in the package, using them in your code is exactly the same

NodeJS and React-Native

import { Argon2, Argon2Mode } from '@sphereon/isomorphic-argon2';

await Argon2.hash('test input', 'my salt value here', {
  hashLength: 32,
  memory: 1024,
  parallelism: 1,
  mode: Argon2Mode.Argon2id,
  iterations: 1,
}).then((hash) => console.log(`${hash.hex}\n${hash.encoded}`));

// output:
// e5db767555a025f007b3b9f4176ef51ef7bd3aea1dcb99b8c382ca68bdf959cc
// $argon2id$v=19$m=1024,t=1,p=1$c2FsdHNhbHNhbHNhbHRzYWxzYWx0$5dt2dVWgJfAHs7n0F271Hve9Ouody5m4w4LKaL35Wcw

Browser

A bundle, you can use in your browser, is shipped as part of this package. It is called isomorphic-argon2.browser.js. The example HTML file below contains a reference to the browser bundle (isomorphic-argon2.browser.js). The actual example code is in the browser.demo.js file below.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Isomorphic-Argon2 Browser Demo</title>
  </head>
  <body>
    <h1>Isomorphic-Argon2 Browser Demo</h1>
    <script src="isomorphic-argon2.browser.js"></script>
    <pre>Output should appear here. If not, please check DevTools in your browser.</pre>
    <script src="browser.demo.js"></script>
  </body>
</html>

The browser.demo.js file looks like this:

Argon2.hash('test', 'my salt value here', {
  hashLength: 32,
  memory: 1024,
  parallelism: 1,
  mode: Argon2Mode.Argon2id,
  iterations: 1,
}).then((hash) => {
  document.querySelector('pre').innerText = 'Seems like it worked:\n' + `Encoded: ${hash.encoded}\n` + `Hex: ${hash.hex}\n`;
});

The output in your browser would be something like:

Isomorphic-Argon2 Browser Demo

Seems like it worked: Encoded: $argon2id$v=19$m=1024,t=1,p=1$c2FsdHNhbHNhbHNhbHRzYWxzYWx0$5dt2dVWgJfAHs7n0F271Hve9Ouody5m4w4LKaL35Wcw Hex: e5db767555a025f007b3b9f4176ef51ef7bd3aea1dcb99b8c382ca68bdf959cc

Build

yarn build

Test

The test command runs:

  • eslint
  • prettier
  • jest
  • karma
yarn test

Utility scripts

There are several other utility scripts that help with development.

  • yarn fix - runs eslint --fix as well as prettier to fix code style.