Web3Auth wallet connection - Plain javascript

[Legacy] GitHub Discussions
1

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.



Originally posted by: pat-mw

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/815
2

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.



Originally posted by: shahbaz17
3

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=...

image



Originally posted by: pat-mw
4

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.



Originally posted by: pat-mw
5

@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 ??



Originally posted by: khanmubasshir