Connect With Wallet button not appearing in nextjs

betnow · April 29, 2025, 10:06am

We’re integrating Web3Auth into our Next.js app. However, I’m unable to connect to the wallet even though the external wallet adapter is configured.
I’m following the integration guide from Web3Auth’s builder documentation.

I’ve attached a screenshot from their demo app for reference:
Demo App
Github Repo

My Intergration code

  const privateKeyProvider = new EthereumPrivateKeyProvider({
    config: { chainConfig: currentNetwork.web3Auth },
  })

  const web3AuthOptions: Web3AuthOptions = {
    clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID || "",
    web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
    privateKeyProvider,
  }

  const web3AuthInstance = new Web3Auth(web3AuthOptions)

  const web3AuthHandler = async () => {
    await web3AuthInstance.initModal()
    setWeb3Auth(web3AuthInstance)
  }

  const connect = async () => {
    try {
      if (!state.web3Auth) return
      const web3authProvider = await state.web3Auth.connect()
      if (!web3authProvider) return

      setIsConnecting(true)
      const web3Provider = new ethers.providers.Web3Provider(web3authProvider)
      const signer = web3Provider.getSigner()
      const address = await signer.getAddress()

      setProvider(web3Provider)
      setSigner(signer)
      setEoaAddress(address.toLowerCase())
      setIsConnected(true)
      setAddress(address)
    } catch (err) {
      console.error("Error connecting:", err)
      setIsConnecting(false)
    }
  }

w3abot · April 29, 2025, 10:07am

Thanks for sharing the details and code snippet! I see you’re integrating Web3Auth Plug n Play (Web Modal SDK) into your Next.js app, but the “Connect With Wallet” button isn’t appearing, even though your external wallet adapter is configured.

Here’s a summary for the support team:

Issue Summary

SDK: Web3Auth Plug n Play (Web Modal SDK)
Platform: Next.js
Problem: “Connect With Wallet” button not appearing in the UI
Integration Reference: Following Web3Auth Next.js Modal Quick Start Guide
Screenshots Provided: Yes (UI state)
Code Snippet Provided: Yes (Web3Auth initialization & connect logic)
External Wallet Adapter: Configured, but not working as expected

Next Steps & Troubleshooting

Check Modal Initialization
- Ensure web3AuthHandler (which calls web3AuthInstance.initModal()) is executed before any connection attempt, ideally on component mount (e.g., inside useEffect).
- Confirm that setWeb3Auth(web3AuthInstance) updates your state correctly so state.web3Auth is available when connect() is called.
UI Trigger
- Make sure you have a button or UI element that triggers the connect function, and that it’s rendered when state.web3Auth is initialized.
External Wallet Adapter Setup
- If you’re using external wallet adapters (like MetaMask, WalletConnect), you must add them to your Web3Auth instance. Example from the docs:
```
import { MetamaskAdapter } from "@web3auth/metamask-adapter";
const metamaskAdapter = new MetamaskAdapter({ clientId: YOUR_CLIENT_ID });
web3AuthInstance.configureAdapter(metamaskAdapter);
```
Make sure this is done before initModal().
Client ID & Network
- Double-check that process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID is set correctly and accessible in your environment.
Console Errors
- If possible, please provide any relevant browser console errors. These can help pinpoint initialization or adapter issues.

Reference Docs

Could you confirm:

How and when is web3AuthHandler called in your component lifecycle?
Are you configuring external wallet adapters as shown above before calling initModal()?
Any errors in the browser console?

Let us know, and we’ll help you get the “Connect With Wallet” button working!

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