Extract Web3Auth user information while using wagmi and rainbowkit

Help - Plug n Play PnP Web SDKs
,
1

Currently, I am developing a website using Wagmi and Rainbow Kit as a wallet connector. As part of the development, I need to implement social login functionality. To accomplish this, I have attempted to use the "@web3auth/web3auth-wagmi-connector" and "@web3auth/modal" libraries. I have followed the example code provided in the official documentation, which demonstrates injecting the web3Auth connector into Rainbow Kit. However, I have encountered a problem in extracting data from web3auth, specifically with the getUserInfo() function that is intended to retrieve information about the logged-in user, such as their email and name.

It is possible that I made a mistake during the implementation of the code. I am wondering if there are any playgrounds or example code available that I can refer to in order to successfully implement this functionality. Any assistance or guidance you can provide would be greatly appreciated.

Thank you for your attention and support.

2

@arsyana Thanks for reaching out.

Can you please share your SDK version, Platform, Console logs(if any), Implementation code so our team can have a look?

3

I have followed the repository (https://github.com/Web3Auth/web3auth-wagmi-connector/tree/master/demos/rainbowkit-modal-with-plugin/src) exactly as it is.

However, I have not found any documentation on how to use the built-in functions (such as getUserInfo()) from the web3Auth instance while implementing RainbowKit (and wagmi).

By the way, here are the related packages that I used in the project:

  • @web3auth/base": "^6.1.1
  • @web3auth/ethereum-provider": “^6.1.1”
  • @web3auth/modal": "^6.1.1
  • @web3auth/openlogin-adapter": “^6.1.1”
  • @web3auth/web3auth-wagmi-connector": “^4.0.0”
  • viem: “^1.1.5”
  • wagmi: “^1.2.0”
  • @rainbow-me/rainbowkit: “^1.0.2”

I am new to implementing this functionality and would like to learn how to properly implement it.

Thank you.

4

Hey @arsyana

Unfortunately, while using the wagmi connector, it is not possible to use any of the Web3Auth functionalities like getUserInfo() or any other feature like authenticateUser() etc. This because we’re bound by the wagmi library’s hooks interface and they don’t allow exposing any external functions.

Hence, if you’re looking to use these functions, we recommend using Web3Auth directly.

1 Like
5

Want to make sure, so we cannot get user information like email/name/even JWT(idToken) itself while using wagmi connector, right? and there’s no other “tricky” way to do it?

6

I am having the same problem when trying to integrate Web3Auth with Scaffold-ETH 2, which uses a custom Rainbowkit ConnectButton and wagmi. I wanted the connect button to display the user’s email when connected via Web3Auth, instead of the ETH address which would be displayed if the user chooses a wallet provider instead.

Is there some way to use Web3Auth directly, while still placing the Web3Auth connect button within the Rainbowkit connect modal? Or do I need separate buttons for connecting with Web3Auth and connecting with Rainbowkit/wagmi? That seems like it would complicate the UX.

7

I resolved this by making my Web3AuthConnectorInstance function return both the Wallet<Connector<any, any>> (as shown in the example code) and the Web3Auth object used to create the Web3AuthConnector.

See this PR to Scaffold-ETH 2 for the code I used to solve this.

2 Likes
8

Thanks for the solution. I followed your example, and it worked like a charm!

1 Like