Web3Auth + MetaMask: Unable to Open Wallet UI

Help - Plug n Play PnP Web SDKs
1

Hi Web3Auth team,

I’m experiencing an issue when trying to connect via MetaMask using Web3Auth. The wallet UI does not open, and I see the following error in the console:

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

My code:

const name = 'myapp'
 const chainConfig = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
   chainId: `0x${chain.id.toString(16)}`,
   rpcTarget: chain.rpcUrls.default.http[0],
   displayName: chain.name,
   tickerName: chain.nativeCurrency?.name,
   ticker: chain.nativeCurrency?.symbol,
   blockExplorerUrl: chain.blockExplorers?.default.url[0] as string

 }

 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } })

 const web3authOptions: Web3AuthOptions = {
   clientId: WEB3AUTH_CLIENT_ID,
   chainConfig,
   privateKeyProvider,
   uiConfig: {
     appName: name,
     defaultLanguage: 'en',
     logoLight: `${window.location.origin}/logo.svg`,
     logoDark: `${window.location.origin}/logo.svg`,
     mode: 'auto'
   },
   web3AuthNetwork: 'sapphire_devnet',
   enableLogging: true
 }

 const web3AuthModalInstance = new Web3Auth(web3authOptions)

 const authAdapter = new AuthAdapter({
   adapterSettings: {
     uxMode: UX_MODE.POPUP
   },
   loginSettings: {
     mfaLevel: 'optional'
   },
   privateKeyProvider
 })

 const injectedAdapters = getInjectedAdapters({ options: web3authOptions })
 injectedAdapters.forEach((adapter: IAdapter<unknown>) => {
   web3AuthModalInstance.configureAdapter(adapter)
 })

 const walletServicesPlugin = new WalletServicesPlugin({
   walletInitOptions: {
     whiteLabel: {
       showWidgetButton: false,
       appName: name
     }
   }
 })

 web3AuthModalInstance.addPlugin(walletServicesPlugin)
 web3AuthModalInstance.configureAdapter(authAdapter)
2

Hi there,

I am not apart of the Web3Auth team, however I think I might be able to help.

The error that you are getting, specifically this one:
WalletServicesPluginError: Wallet plugin is not connected Yet. Please wait for plugin to connect and listen via connected event on the plugin usually means the Web3Auth plugin (WalletServicesPlugin) is trying to open or run before it’s fully initialized.

The fix is straightforward. You’re likely missing the initialization step before trying to open the wallet UI.

Here is exactly what you need to add:
await web3authModalInstance. initModal() ;

Your corrected code should look like this:

// Set up Web3Auth and Wallet Plugin as you have
web3AuthModalInstance.addPlugin(walletServicesPlugin);
web3AuthModalInstance.configureAdapter(authAdapter);

// IMPORTANT: make sure this is awaited first!
await web3AuthModalInstance.initModal();

// Now you can safely connect
await web3AuthModalInstance.connect();

Also, double-check that your browser allows pop-ups (MetaMask opens as a pop-up), and make sure MetaMask is installed, unlocked, and running properly. Oh also make sure you use chrome - it works best.

Give this a try, and let me know if you’re still stuck!