Then I tried going with the quick-start guide, which worked out, though I am not sure how to configure / set it up to use the Providers apart from the wallet because with the providers it errors out. Of course it needs configuration which I am unable to find through the docs…
Tried to play with it a little and changed the client-id to my own, which I got from the dashboard, and got a new error:
Hey 0xOZ, sorry you’re running into trouble with Vue! It sounds like you were able to get the Quick Start demo running, but configuring extra providers (beyond the default wallet) is causing errors when you swap in your dashboard Client ID.
Below are some steps and docs you might find helpful:
Check Allowed Origins in Your Dashboard:
• Make sure the domain/URL you’re running on is added under “Allowed Origins” for your Client ID in the Web3Auth Developer Dashboard. If it’s missing, you’ll often see errors when switching over from the demo Client ID to your own.
Reference Vue + Web3Auth Examples:
• If you haven’t already, check our official Vue sample here: https://github.com/Web3Auth/web3auth-web/tree/master/examples/vue-app
• This example has a working setup for Vue and shows how to initialize Web3Auth in main.js (or a similar entry point).
Enabling and Configuring Other Login Providers:
• To add login providers, you can pass your provider-specific configurations (e.g., Google, Reddit, etc.) when you initialize Web3Auth. Our docs on customizing login providers are here: 404 Page Not Found | Documentation | Web3Auth
Quickstart + Detailed Docs:
• For the overall setup from scratch, our Quickstart guide is a good place to confirm you have everything in place: 404 Page Not Found | Documentation | Web3Auth
• From there, explore “Integration Guides” for any specialized provider config or advanced options.
If you still get errors, a quick look at your main.js (or wherever you’re initializing Web3Auth) with the relevant code snippet would help us pinpoint config issues. If you have console logs or screenshots showing the exact error after switching to your own Client ID, feel free to share those too.
Hope this points you in the right direction! Let us know if you have any more details, and we’ll do our best to help. Happy coding!
Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.
Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours
Replying to the bot:
1: I added my localhost’s Origin to the dashboard
2: I tried that with the updated path, which is detailed in the question.
3: Using the defaults from the repo.
4: That’s what I am going with and getting issues
I had web3AuthNetwork set to use mainnet instead of the devnet. I switched to SAPPHIRE_DEVNET, though, and now I can’t get anything to work. The wallet connect never connects; it keeps thinking that the wallet is not installed, and login providers are not shown in devnet
To summarize this error can be fixed if I access the app through localhost:3001 instead of using the private IP and access it from another local machine.
It might be solved if I choose to go with HTTPS but how can I go around that for this setup? I still need to stick to http
Summary of all my bugs and how to avoid them for the quickstart guide setup:
configure the clientId and web3AuthNetwork in the web3AuthConect.tsx or the respective file depending on your setup choice
when building or running the dev, make sure you are accessing it at localhost: or 127.0.0.1: if not, you must host the server on an https webapp somewhere.
if you add extra packages like react and react-dom for any reason, you will start having some extra bugs, so avoid that unless you know how to go around them
