web3auth integration

[futurehelp]

Overview of the issue

When I try and import web3auth, I receive the following errors:

ERROR in ./node_modules/@metamask/utils/dist/chunk-NQMRFZHB.mjs 8:51
Module parse failed: Unexpected token (8:51)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { pattern } from "superstruct";
| var base64 = (struct, options = {}) => {

const paddingRequired = options.paddingRequired ?? false;
| const characterSet = options.characterSet ?? "base64";
| let letters;

ERROR in ./node_modules/ethereum-cryptography/node_modules/@noble/curves/abstract/weierstrass.js 920:61
Module parse failed: Unexpected token (920:61)
File was processed with these loaders:

• ./node_modules/source-map-loader/index.js
  You may need an additional loader to handle the result of these loaders.
  | const u1 = modN(h * is); // u1 = hs^-1 mod n
  | const u2 = modN(r * is); // u2 = rs^-1 mod n

    const R = Point.BASE.multiplyAndAddUnsafe(P, u1, u2)?.toAffine(); // R = u1⋅G + u2⋅P

| if (!R)
| return false;
ℹ ｢wdm｣: Failed to compile.

ERROR in /web-app/node_modules/@toruslabs/base-controllers/dist/types/interfaces.d.ts(32,43):
TS2693: 'boolean' only refers to a type, but is being used as a value here.
ERROR in /web-app/node_modules/@toruslabs/base-controllers/dist/types/interfaces.d.ts(33,5):
TS2304: Cannot find name 'configure'.
ERROR in /web-app/node_modules/@toruslabs/base-controllers/dist/types/interfaces.d.ts(33,15):
TS2304: Cannot find name 'config'.

Motivation for or Use Case

Anyone who is trying to implement web3auth with JHipster will run into this same issue. This is a huge blocker for anyone wanting to integrate web3auth key management into their current JHipster project.

Reproduce the error

I am running: npm run webpack:dev

Related issues

Suggest a Fix

JHipster Version(s)

"jhipsterVersion": "6.9.1",

JHipster configuration

{
"generator-jhipster": {
"promptValues": {
"nativeLanguage": "en"
},
"jhipsterVersion": "6.9.1",
"applicationType": "monolith",
"baseName": "my_app",
"useSass": true,
"clientPackageManager": "npm",
"clientFramework": "react",
"clientTheme": "none",
"clientThemeVariant": "",
"authenticationType": "jwt",
"cacheProvider": "no",
"databaseType": "sql",
"devDatabaseType": "sql",
"prodDatabaseType": "sql",
"creationTimestamp": 1655190950198,
"testFrameworks": [],
"jhiPrefix": "jhi",
"entitySuffix": "",
"dtoSuffix": "DTO",
"otherModules": [],
"enableTranslation": true,
"nativeLanguage": "en",
"languages": ["en"],
"blueprints": [],
"skipServer": true
}
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

Chrome and Safari

• Checking this box is mandatory (this is just to show you read everything)

[atomfrede]

Are you really using jhipster 6.9.1? Please try it again with v8 or at least v7.

[futurehelp]

I just updated to 8.1.0 and I still receive the same message. It happens when I try to load the web3auth object:

import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
import Web3 from "web3";

// IMP START - SDK Initialization
// IMP START - Dashboard Registration
const clientId =
"clientId-hash"; // get from https://dashboard.web3auth.io
// IMP END - Dashboard Registration

const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1", // Please use 0x1 for Mainnet
rpcTarget: "https://rpc.ankr.com/eth",
displayName: "Ethereum Mainnet",
blockExplorer: "https://etherscan.io/",
ticker: "ETH",
tickerName: "Ethereum",
};

const web3auth = new Web3Auth({
clientId,
chainConfig,
web3AuthNetwork: "sapphire_mainnet",
});
// IMP END - SDK Initialization

[mraible]

You might try using Auth0 and using their Web3 integrations.

https://auth0.com/developers/lab/web3

[futurehelp]

Unfortunately that won't work. I need to use web3auth for key management. I have never had an issue loading it in React apps using Vite or NextJS. There has to be an easy solution for this or why even use JHipster?

[atomfrede]

Can you create a sample project and share it here?

[mshima]

The lib you are trying to import looks to be ESM.
You can:

• try to enable ESM support in webpack
• migrate react to vite
• switch to vue frontend that uses vite at monoliths.
• switch to angular that provides esm stack with webpack.

In any case this is not a feature provided by JHipster so I will close the issue.