getUserInfo using Wagmi

Help - Plug n Play PnP Web SDKs
1

I’m usiggin following packages:

“@web3auth/base”: “^8.12.4”,
“@web3auth/default-evm-adapter”: “^8.12.4”,
“@web3auth/ethereum-provider”: “^8.12.4”,
“@web3auth/modal”: “^8.12.7”,
“@web3auth/modal-react-hooks”: “^8.13.0”,
“@web3auth/wallet-services-plugin”: “^8.12.5”,
“@web3auth/wallet-services-plugin-react-hooks”: “^8.12.5”,
“@web3auth/web3auth-wagmi-connector”: “^6.0.0”,

And this is my web3auth setup

https://pastebin.com/r5PjU7TF

My wagmi setup:

And they both are wrapping the applicaiton.

Then i’m trying to access:

const { userInfo } = useWeb3Auth();

  console.log(userInfo);

but it throws error: WalletInitializationError: undefined, usage of useWeb3Auth not wrapped in Web3AuthContextProvider.

do i need to wrap it when using wagmi, is there any example of doing this?

2

Hi am3136,

Thanks for providing the details. It looks like you’re integrating Web3Auth with Wagmi and encountering an error related to the useWeb3Auth hook not being wrapped in the Web3AuthContextProvider.

Here’s a quick breakdown of the issue and a possible solution:

Issue:

You’re seeing the error:

WalletInitializationError: undefined, usage of useWeb3Auth not wrapped in Web3AuthContextProvider

This suggests that useWeb3Auth is being called outside of the Web3AuthContextProvider.

Proposed Solution:

Yes, you do need to wrap your components using Web3Auth-related hooks with the Web3AuthContextProvider. This ensures that the context required by these hooks is available.

Example:

Wrap your application with the Web3AuthContextProvider in your main component file (e.g., App.js or index.js).

Here’s an example of how you can structure it:

import { Web3AuthContextProvider } from "@web3auth/modal-react-hooks";
// Other imports...

const App = () => (
  <Web3AuthContextProvider>
    {/* Your wagmi setup goes here */}
    <YourComponent />
  </Web3AuthContextProvider>
);

export default App;

Make sure that in your component where you use the useWeb3Auth hook, it is within the hierarchy of the Web3AuthContextProvider.

If you still face issues, please ensure that all your setup and configuration are correct as shown in the links you provided. Double-check that none of the setup steps are skipped and all necessary providers are wrapping your application.

This response was generated by the Web3Auth Bot. A person from the Web3Auth team will review and give a detailed answer to your query shortly.

3

The userInfo function is not compatible with Wagmi. Additionally, our hooks package cannot be used with Wagmi. You need to use the wagmi connector in order to use Web3Auth inside the wagmi context: Wagmi Connector for Web3Auth PnP Web SDKs | Documentation | Web3Auth

4

@yashovardhan I did actually manage to get user info when user sign in with social:

useAsyncEffect(async () => {
if (!account.address) {
return;
}

const userInfo = await web3AuthInstance.getUserInfo();

}, [account.address]);

but i don’t see for example twitter handle to be returned is it possible to get it somehow?

5

In this case, you are not using wagmi instance as I see. The user info function basically is an extension of the information given to us by the social login, ie. twitter in this case. If you cannot see the handle, it is because twitter is not sending it to us. You can configure your own twitter OAuth using Auth0, Firebase etc. and configure what parameters are given by twitter to facilitate that.