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

• [x] 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.