🛡 Web3Auth - plugin by NovaBloq

[ezdev]

Web3Auth

A user-friendly and non-custodial approach to managing assets and identity.

It streamlines the onboarding of both mainstream and crypto native users under a minute by providing experiences that they’re most comfortable with.

Features:

• Login via social apps such as Google, Facebook, Twitter, etc.
• Login via Web3 wallets such as Torus, MetaMask or WalletConnect
• Set prefferred network to connect the web3 wallet
• Detect connection type
• Get user info (email, name, avatar, wallet address etc.)
• Sign a message

Instructions

How to generate the Client Id token:

1. Go to https://dashboard.web3auth.io/ and create an account
2. Create a project in Plug and play section
3. Add your site to Whitelisted URLs
4. Copy the Client ID token

Where to get the RPC Url?
https://rpc.info/

How to find the chain ID?
https://chainlist.org/

What is Chain Namespace?
It signifies the type of chain you want to initialize web3auth with.
Eip155 option is for EVM compatible chain (Ethereum, Polygon etc.)

---

Demo: https://web3plugins.bubbleapps.io/version-test/web3auth
Marketplace: Web3Auth Plugin | Bubble

---

NovaBloq Bubble Contributor page

[toby2]

Looks nice - Can you specify what information you can retrieve specifically for the users for social and web3 logins.

Aka can you read the wallet’s content for NFTs?

[ezdev]

@toby2

Can you specify what information you can retrieve specifically for the users for social and web3 logins.

You can see it on the demo page.
For socials:
Connection type, Email, Name, Avatar image.

For Web3:
Connection type, Wallet address and sign message feature that returns the signature.

@toby2

Aka can you read the wallet’s content for NFTs?

There are other plugins that can do it, this is a plugin for securely authenticate users providing best experience for them.

[kaisendon]

Much awaited plugin thank you! I’ve just bought it and am setting it up, taking guidance from the demo workflows.

However when my “Login Web3Auth A” event is triggered, I get the correct popup but the blue circle turns and never loads the login buttons. I’ve alr created my clientID in web3auth, and added my project url to the whitelist. Chain ID, RPC url, chain namespace values are default (Ethereum mainnet infura).

Could you help me here pls? What should I do with my clientID, where should I paste it? Is my URL formatted incorrectly in the whitelist?

Thanks!!

[ezdev]

@kaisendon

What should I do with my clientID

Paste it in the Client ID field in the installed plugins tab.

[kaisendon]

Ah, thanks it works now

Another thing - the demo site Torus login doesn’t seem to work; when I click the Torus button it goes to a never ending blue circle again. Could you have a look at this please?

[mamuzaIT]

looks good at demo, tested with web3 account and wallet connect

[kaisendon]

Hi, any update on the non-working Torus button? I’ve observed this consistently across different computers (all Chrome). Are you seeing this as well on your end too? Thanks

[ezdev]

@kaisendon

Hi, any update on the non-working Torus button?

Hi, thanks for the feedback, looking into it. I can confirm that it randomly happens.

[kaisendon]

Thanks ezdev. Another observation I’ve discovered if you could look into as well: a Web3Auth element in the page body (index), doesn’t seem to access the same connection instance of a Web3Auth element created a resusable element (eg. header).

This is unlike your “Metamask Login” plugin, in which an element created in index can access the connection status of an element created in the header. You can easily output the connected wallet’s address in the body, using the connected instance in the header.

Am I doing something wrong? What’s the correct way to display a connected user’s name in the page body, if I am using the Web3Auth element in the header?

Thanks for your help!

[ezdev]

@kaisendon this is a security limitation that we don’t have control to change. Try to use only 1 element.

[kaisendon]

Ah I see…hmm. Using only 1 element in the header though, the connection instance can’t be accessed in the page body. Is there another recommended way to use this plugin? Thanks for your guidance.

[ezdev]

@kaisendon

the connection instance can’t be accessed in the page body

If your issue is accessing the data (wallet address, email, or is connected status), save them in separate custom states of the header element, then they will be accessible from anywhere on other pages.

[kaisendon]

Ok great, I will work on using that method. Thanks!

[kaisendon]

hi, any luck debugging this? I just tried your demo page , the turning blue circle still appears but there seems to be a Torus login window behind it now. Unfortunately it doesn’t progress past this point and clicking the window behind doesn’t bring it forward