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:
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).
Manual workaround works: Using getIdentityToken() inside a useEffect triggered by Wagmi’s connection status does return the token.
Next Steps & Suggestions
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.
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.
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
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.