web3Auth hooks not working after page refresh

Help - Plug n Play PnP Web SDKs
1

When asking for help in this category, please make sure to provide the following details:

  • SDK Version(package.json): ^10.0.2
  • Platform: Next.js
  • Browser Console Screenshots:

Following the QuickStart guide and Next.js guide, I realized the hooks to get idToken do not work.

import { useWeb3Auth, useIdentityToken, useWeb3AuthUser } from "@web3auth/modal/react";

export default function App() { 
  const { initError, isConnected } = useWeb3Auth(); // isConnected is true immediately after page refresh
  const { token, getIdentityToken } = useIdentityToken();
  const { userInfo } = useWeb3AuthUser();
...
}

On a page refresh, both token and userInfo returns undefined. At no point does it return a valid value (even after waiting 10s and all hooks stop running). However, when I get the token after wagmi is connected with the following code:

  const { address, isConnected: isWagmiConnected } = useAccount();

  useEffect(() => {
    async function getToken() {
      const _token = await getIdentityToken();
      console.log("Payments.tsx, useEffect, _token:", _token);
    }
    getToken();
  }, [isWagmiConnected]);

Then I successfully get the idToken. I think the web3Auth hooks need to be better optimized. Specifically, the hooks need to run again after initialization, thus providing the updated values (which takes around ~5s), which is what the Wagmi useAccount hook successfully does (I get the updated isConnected and address value ~5s after a page refresh).

2

Thanks for sharing the details, Brian! Here’s a summary of your issue for the support team:

Issue Summary

  • SDK: Web3Auth Plug and Play (PnP) Web SDK
  • SDK Version: ^10.0.2
  • Platform: Next.js
  • Problem:
    • Using the hooks useWeb3Auth, useIdentityToken, and useWeb3AuthUser as per the QuickStart and Next.js guide.
    • On page refresh, both token and userInfo from their respective hooks return undefined and never resolve to valid values, even after waiting.
    • However, manually calling getIdentityToken() after Wagmi’s isConnected is true does successfully retrieve the idToken.
    • isConnected from useWeb3Auth is true immediately after page refresh, but the hooks still return undefined.

Additional Details Provided

  • Code Snippet:
    import { useWeb3Auth, useIdentityToken, useWeb3AuthUser } from "@web3auth/modal/react";

export default function App() { 
  const { initError, isConnected } = useWeb3Auth();
  const { token, getIdentityToken } = useIdentityToken();
  const { userInfo } = useWeb3AuthUser();
  // ...
}
  • Manual workaround works: Using getIdentityToken() inside a useEffect triggered by Wagmi’s connection status does return the token.

Next Steps & Suggestions

  1. Potential Cause:
    It seems like the Web3Auth React hooks might not be updating their state correctly after initialization in Next.js, possibly due to hydration or timing issues. This could be related to how Next.js handles SSR/CSR or how the hooks are initialized in your app.

  2. Proposed Solution:

    • Ensure you’re wrapping your app with the required Web3Auth provider at the top level (e.g., _app.js or _app.tsx).
    • Double-check that the initialization of Web3Auth is complete before using the hooks.
    • Consider using the Web3AuthProvider and ensure your hooks are used within its context.

  3. Reference Docs:

To help the support team further, could you also confirm:

  • Are you using SSR or just CSR in your Next.js app?
  • Are there any customizations to the provider setup?
  • If possible, please share your _app.js or provider setup code snippet.

If you have any browser console screenshots or additional error messages, please attach them as well!

Thank you for your detailed report—this will help the team investigate and get back to you quickly.

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

3

How do I do this if hooks cannot be in a conditional statement?

4

Hey @jonwayhuang
i just tried it with an example
getIdentityToken hooks do work well.
pushed my changes to a branch for you to test and compare

Please see the branch, it’s test-idtoken-nextjs

5

I cloned the repo and switched to the test-idToken-nextjs branch.

Your example only works if you wait ~3s after web3Auth initializes. The way you set up your example to get userInfo or idToken requires a human interaction (a click) after this initialization. If you console.log() “token” or “userInfo” below your hooks, you will always get “undefined” after every render cycle on the initial mount. So, as it stands now, there is still no way to get token or userInfo on initial mount (you need a human interaction click, which you demonstrate in your example, or possibly a setTimeout), as these values are not updated in the hook lifecycle. I think what the web3Auth team needs to do is to edit your hooks such that after web3auth initializes, execute a setState to update the userInfo or token value.

6

Hello @jonwayhuang ,

Please try our latest patch fix, version 10.0.4, which should resolve most of these issues. Additionally, if the provider and account details are unavailable, it is an issue from the Wagmi side, and unfortunately, we are unable to resolve it on our end.

7

It still does not work. The test is very simple:

import { useIdentityToken, useWeb3AuthUser } from "@web3auth/modal/react";

export default function App() { 
  const { token } = useIdentityToken();
  const { userInfo } = useWeb3AuthUser();
  console.log(token);
  console.log(userInfo);
...
}

token is null after every render cycle during first mount.
userInfo is undefined after every render cycle during first mount.

If you won’t fix it, maybe you guys should just get rid of these exported values.

Finally, on the topic of hook values during initialization, I also think status in const { status } = useWeb3Auth() can be improved. Currently, if you do a hard refresh, status will show connected > connecting > connected. It would be better if it showed not ready > connecting > connected so us developers can more properly show different UI states.

Finally, these are Web3Auth hooks and should not depend on Wagmi. So, it should be fixable by the Web3Auth Team. But, I don’t know the inner workings, so maybe it is a Wagmi issue, as you say.

8

we’re looking into this. will update you soon.