Thanks for your detailed message and screenshots! Here’s a summary of your issue for the support team:
Issue Summary
- SDK Details: Web3Auth Plug and Play (PnP) Web SDK
- Framework: Next.js
- Routing:
- Works on mobile browsers with Next.js App Router
- Fails to connect on Next.js Page-based Router (throws “invalid url” error)
- Screenshots Provided: Yes (error messages and UI)
- Platform: Web (Mobile browser focus)
- Documentation Context: You are following the official Web3Auth React SDK integration guide.
Next Steps & Suggestions
To help resolve this, could you please provide:
-
Web3Auth Initialization & Login Code Snippet
(Especially how you are initializing Web3Auth and handling login in your Next.js app.) -
Exact Error Message or Stack Trace
(If not visible in the screenshots, please paste the error message from the browser console.) -
SDK Version Number
(Check yourpackage.jsonfor the version of@web3auth/modal.) -
Next.js Version
(This can help us check for any known compatibility issues.)
Initial Troubleshooting
- The “invalid url” error often happens if the redirect/callback URL is not set correctly or if the routing structure changes between App Router and Page Router.
- Please ensure that your Web3Auth dashboard project has the correct redirect URIs for both routing methods.
- Refer to the Next.js Quick Start Guide for best practices on using Web3Auth with different routing strategies.
Once you provide the code snippet and version details, the support team can offer more targeted help!
Thank you for your patience and for providing great context.
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