Web3Auth wallet connection - Plain javascript

[pat-mw]

Hi there!

I'm building a proof-of-concept NFT integration for an events community (https://farrago.club)
I would like to use Web3Auth wallet in order to onboard our audience in the most seamless way possible.

I plan on using thirdweb dashboard and contracts in tandem with their Python backend SDK in order to handle the Dapp functionality.
My web-app builder is Anvil (https://anvil.works) which is a really solid framework for developing applications mostly in Python.

I previously had the Web3Auth wallet working using Moralis v1 SDK and their plain Javascript implementation. However, recently Moralis has deprecated this SDK and also taken down my server in-favour for their React.js and Next.js implementations.

---

Anvil allows vanilla javascript to be used in extension to the python-based client-side framework.
However, the web3auth docs outlined here: https://web3auth.io/docs/sdk/web/modal seem to be written also with React/Next.js in mind - with npm being used as the package manager.

I need a way to use web3auth and get the user's wallet address and email address by using vanilla javascript, ideally with <script src="..."></script> imports.

I have tried to install the dependencies outlined above from CDN providers but to no avail. (I am kind of a noob with javascript so this isn't helping)

Any guidance would be massively appreciated!!

Thanks in advance.

[shahbaz17]

Hey @pat-mw

Please check out https://github.com/Web3Auth/web3auth-web/tree/master/demo/getting-started/eth to see how it's implemented in JS.

[pat-mw]

Hi @shahbaz17 thanks for the prompt response.
I've given this a try using the exact script you've mentioned index.html and I get the following error
404 - {"success":false,"message":"Invalid public key"} from the endpoint Url: https://broadcast-server.tor.us/store/get?key=...

[pat-mw]

I've double checked and definitely added the correct client key at:

        web3AuthInstance = new web3authSdk.Web3Auth({
          chainConfig: { chainNamespace: "eip155" },
          uiConfig: {
            theme: "dark",
            defaultLanguage: "en",
          },
          clientId: "YOUR_CLIENT_ID_HERE", // get your clientId from https://developer.web3auth.io
        });

[pat-mw]

Not sure which ''public key'' the error message is referring to here

[pat-mw]

However, the error message is being thrown from the following request url: https://broadcast-server.tor.us/store/get?key=04ba72f14e22f19972d24f4c0b13fd9c6e7f8e9a32f64d8cc152b05fda0cbc9693adb4efc68486f4f5ecb783cfdefbeed275e6f757ed0a875167adb528bb617a88

I can confirm that the code after ?key= does NOT match my Client ID. -- not sure if this is what I should expect, but when replacing the key= with my client_id manually I get the following error (This might not actually help but I tried it anyway):

[shahbaz17]

Hey @pat-mw

Can you share the code where you're importing the @web3auth/modal?

Also, are you doing https://github.com/Web3Auth/web3auth-web/blob/master/demo/getting-started/eth/index.html#L44 ?
const web3authSdk = window.Modal;

[pat-mw]

Hey @shahbaz17 sorry for the delay and thanks for helping out.
The code I'm using is an exact copy of the index.html file in the link you sent.

The imports look like this:

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1/dist/web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@web3auth/modal"></script>

And indeed I am using const web3authSdk = window.Modal;

I tried making the function init() get called on the 'log in' button press, rather than having it inline, but this didn't change anything it just helped me narrow down the error message I reported yesterday.

Other than that I have not modified the code: everything is as in index.html - with my clientId replacing the YOUR_CLIENT_ID_HERE and also the domain whitelisted in the web3auth dashboard.

Any ideas?
Best,
Pat

[pat-mw]

The only other thing I think it could be would be the chain id. My web3auth plug and play project is currently on 'test net' and I'm assuming the example index.html file is referring to the ethereum mainnet.

Do you have a list of chain id's so that I can swap to Mumbai? I'll give that a go.

[pat-mw]

Ok @shahbaz17 confirmed that I think the issue was the chain config.
I have replaced web3auth instantiation with one similar to this: https://web3auth.io/docs/connect-blockchain/polygon#testnet
and now I can see the modal appear.

However another small issue I'm having is regarding the web3auth modal - it appears behind the elements on the rest of the page so I cannot seem to click/interact with it:

I've tried the solution regarding the css properties described here reown-com/appkit#165 but no luck so far.

I suppose this is now irrelevant to the OP but If you have any ideas would highly appreciate it!

[shahbaz17]

Hey @pat-mw

This shouldn’t be happening. Can you share the code snippet for the same? Also, can you confirm if any other CSS is not conflicting with this?

[pat-mw]

Hi @shahbaz17 I managed to get this working thank you.
However, Last night web3auth suddenly stopped working and is throwing me errors.
Could you please help me out by checking out the thread?
https://github.com/orgs/Web3Auth/discussions/940

[khanmubasshir]

@shahbaz17
Actually I need to use "OpenloginAdapter" for plain html/JS so I am following the default integration builder code (https://web3auth.io/docs/integration-builder?lang=HTML&chain=ETH&evmFramework=WEB3&customAuth=GOOGLE&mfa=DEFAULT&whitelabel=NO&useModal=YES&web3AuthNetwork=TESTNET&rnMode=EXPO&stepIndex=1).

But getting error in console, first was getting web3Auth is not a function so I just added before it like "window.Modal.web3Auth"
Now getting error "Uncaught (in promise) TypeError: OpenloginAdapter is not a constructor".
Can you please help me to sort it ??