feat: introduce loadSumoVersion for react-native-web

README.md

@@ -61,11 +61,11 @@ import {
   crypto_kdf_derive_from_key,
   crypto_kdf_KEYBYTES,
   crypto_kdf_keygen,
-  crypto_pwhash,
-  crypto_pwhash_ALG_DEFAULT,
-  crypto_pwhash_MEMLIMIT_INTERACTIVE,
-  crypto_pwhash_OPSLIMIT_INTERACTIVE,
-  crypto_pwhash_SALTBYTES,
+  crypto_pwhash, // only with loadSumoVersion with react-native-web
+  crypto_pwhash_ALG_DEFAULT, // only with loadSumoVersion with react-native-web
+  crypto_pwhash_MEMLIMIT_INTERACTIVE, // only with loadSumoVersion with react-native-web
+  crypto_pwhash_OPSLIMIT_INTERACTIVE, // only with loadSumoVersion with react-native-web
+  crypto_pwhash_SALTBYTES, // only with loadSumoVersion with react-native-web
   crypto_generichash,
   crypto_generichash_BYTES,
   crypto_generichash_BYTES_MIN,
@@ -88,11 +88,25 @@ import {
   to_base64,
   to_hex,
   to_string,
+  ready, // only needed for react-native-web
+  loadSumoVersion, // only relevant for react-native-web
 } from 'react-native-libsodium';
 
 // ...
 ```
 
+## React Native Web
+
+For the web platform the constants and functions from the `libsodium-wrappers` package is exposed. This also means you need to wait for the `ready` Promise to be resolved before using any constant or function.
+
+Certain constants and functions e.g. `crypto_pwhash` are only available in the `libsodium-wrappers-sumo` package. To load this package instead for web you can call `loadSumoVersion` right after importing the package.
+
+```ts
+import { loadSumoVersion, ready } from 'react-native-libsodium';
+
+loadSumoVersion();
+```
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

example/src/App.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
-import sodium, { ready } from 'react-native-libsodium';
+import sodium, { loadSumoVersion, ready } from 'react-native-libsodium';
 import { TestResults } from './components/TestResults';
 import { VisualImageTest } from './components/VisualImageTest';
 
+loadSumoVersion();
+
 function LibsodiumTests() {
   if (sodium.crypto_secretbox_KEYBYTES !== 32) {
     throw new Error('export default not working');

example/src/tests/crypto_pwhash_test.ts

@@ -8,6 +8,7 @@ import {
   randombytes_buf,
 } from 'react-native-libsodium';
 import { isEqualUint8Array } from '../utils/isEqualUint8Array';
+import { expect, test } from '../utils/testRunner';
 
 test('crypto_pwhash', () => {
   const password = 'password123';

example/web/webpack.config.js

@@ -14,6 +14,8 @@ const babelLoaderConfiguration = {
     path.resolve(appDirectory, 'index.js'),
     path.resolve(appDirectory, 'src'),
     path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
+    // make sure the lib src files are also compiled
+    path.resolve(appDirectory, '../src'),
   ],
   use: {
     loader: 'babel-loader',

package.json

@@ -166,6 +166,8 @@
   },
   "dependencies": {
     "@types/libsodium-wrappers": "^0.7.13",
-    "libsodium-wrappers": "^0.7.13"
+    "@types/libsodium-wrappers-sumo": "^0.7.8",
+    "libsodium-wrappers": "^0.7.13",
+    "libsodium-wrappers-sumo": "^0.7.13"
   }
 }

src/lib.native.ts

@@ -695,6 +695,9 @@ export function crypto_aead_xchacha20poly1305_ietf_decrypt(
 // add no-op ready to match the libsodium-wrappers API
 export const ready: Promise<void> = new Promise((resolve) => resolve());
 
+// add no-op ready to match the react-nativ-libsodium API for web
+export const loadSumoVersion = () => undefined;
+
 export default {
   crypto_auth,
   crypto_auth_verify,