Trying to run We3Auth.init() causes 404 error

[SmithVyne]

Hello there. I and my team have an issue with the current Web3Auth + OpenLogin SDK because it keeps failing whenever I try to run web3auth.init();

This is the App.js file:

import { Web3AuthCore } from "@web3auth/core";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from "@web3auth/base";

const web3auth = new Web3AuthCore({
  clientId: "MY CLIENT ID",
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x1",
    rpcTarget: "MY RPC NODE",
  }
});

const openloginAdapter = new OpenloginAdapter({}); //sso
web3auth.configureAdapter(openloginAdapter);

web3auth.init();

function App() {
  return (
    <div className="App">
      <button
        onClick={() =>
          web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
            loginProvider: "google",
          })
        }
      >
        Hey
      </button>
    </div>
  );
}

export default App;

Everytime I try this, I get the following response from the broadcast server:

{
  "success": false,
  "message": "Invalid public key"
}

Package.json file

{
  "name": "testing-web3auth",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@web3auth/base": "^3.0.4",
    "@web3auth/modal": "^3.0.4",
    "@web3auth/openlogin-adapter": "^3.2.0",
    "@web3auth/web3auth-wagmi-connector": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "web3": "^1.8.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^7.0.0",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0"
  }
}

craco.config.js

const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: function (config) {
      const fallback = config.resolve.fallback || {};
      Object.assign(fallback, {
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
        assert: require.resolve("assert"),
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        os: require.resolve("os-browserify"),
        url: require.resolve("url"),
      });
      config.resolve.fallback = fallback;
      config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
          process: "process/browser",
          Buffer: ["buffer", "Buffer"],
        }),
      ]);
      config.ignoreWarnings = [/Failed to parse source map/];
      config.module.rules.push({
        test: /\.(js|mjs|jsx)$/,
        enforce: "pre",
        loader: require.resolve("source-map-loader"),
        resolve: {
          fullySpecified: false,
        },
      });
      return config;
    },
  },
};

I have tried so many solutions, but they all seem to keep failing. What could be the possible cause?

[tanguyenvn]

• Got the following error when trying to follow your implementation
  
• Please check if you want to use @web3auth/modal or @web3auth/core
• If you're using @web3auth/core, you may follow this:

const web3auth = new Web3AuthCore({
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x1",
    rpcTarget: "MY RPC NODE",
  }
});

const openloginAdapter = new OpenloginAdapter({ adapterSettings: { network:"mainnet", clientId: "YOUR CLIENT ID" } }); //sso

[SmithVyne]

This is the response I now get:

I converted the code to this:

async function init() {
  const web3auth = new Web3AuthCore({
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: "0x1",
      rpcTarget: "https://mainnet.infura.io/v3/....... my Infura node",
    },
  });
  
  const openloginAdapter = new OpenloginAdapter({
    adapterSettings: {
      network: "mainnet",
      clientId:
        "bd2.......ee34r5",
    },
  }); //sso
  web3auth.configureAdapter(openloginAdapter);
  
  // web3auth.clearCache();
  web3auth.init();
}

init();

Still not working. Any other reasons this may be failing?

[tanguyenvn]

There is an error in console logs saying that the ClientID may not be valid. Are you sure that you're using the correct one?

[himanshuchawla009]

https://github.com/orgs/Web3Auth/discussions/760

Plz refer to this, you can ignore this warning.