Blank web3auth Modal Box

[PJijin]

I have recently deployed an app to vercel with web3auth. It works fine on localhost. the issue is on the deployed version. The modal box does not contain email and connect wallet options. I thought it was env issue. but when I log the client id and check the network it is passed properly. I have added the domain to web3auth.io whitelist too. I am using web3auth plug-and-play SDK.

And when I inspect the live version it looks like the adapters list is empty.

import { CHAIN_NAMESPACES, SafeEventEmitterProvider } from '@web3auth/base'
import { Web3Auth } from '@web3auth/modal'
import { OpenloginAdapter } from '@web3auth/openlogin-adapter'
import { TorusWalletConnectorPlugin } from '@web3auth/torus-wallet-connector-plugin';

import { CoinbaseAdapter } from '@web3auth/coinbase-adapter';
import { MetamaskAdapter } from '@web3auth/metamask-adapter';
import { TorusWalletAdapter } from '@web3auth/torus-evm-adapter';
import { WalletConnectV1Adapter } from '@web3auth/wallet-connect-v1-adapter';


const Header = () => {
  const path = usePathname()
  const { auth, authDispatch } = useAuth()

  const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null)
  const [provider, setProvider] = useState<SafeEventEmitterProvider | null>(null)

  useEffect(() => {
    const init = async () => {
      console.log('clientId')
      console.log(clientId)
      try {
        const web3auth = new Web3Auth({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: ChainConfig[defaultChainId].chainId,
            rpcTarget: ChainConfig[defaultChainId].provider,
          },
          uiConfig: {
            theme: 'dark',
            loginMethodsOrder: ['facebook', 'google'],
            defaultLanguage: 'en',
            appLogo: '/assets/icons/icon.svg',
          },
        })

        const openloginAdapter = new OpenloginAdapter({
          loginSettings: {
            mfaLevel: 'optional',
          },
          adapterSettings: {
            network: 'cyan',
            whiteLabel: {
              name: 'BRAND',
              logoLight: '/assets/icons/icon.svg',
              logoDark: 'https://web3auth.io/images/w3a-D-Favicon-1.svg',
              defaultLanguage: 'en',
              dark: true,
            },
          },
        })
        web3auth.configureAdapter(openloginAdapter)

        const coinbaseAdapter = new CoinbaseAdapter({
          clientId,
          sessionTime: 86400, // 1 day in seconds
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: ChainConfig[defaultChainId].chainId,
            rpcTarget: ChainConfig[defaultChainId].provider,
          },
          web3AuthNetwork: 'cyan',
        })
        web3auth.configureAdapter(coinbaseAdapter)

        const torusPlugin = new TorusWalletConnectorPlugin({
          torusWalletOpts: {},

          walletInitOptions: {
            whiteLabel: {
              theme: { isDark: true, colors: { primary: '#00a8ff' } },
              logoDark: '/assets/icons/icon.svg',
              logoLight: 'https://web3auth.io/images/w3a-D-Favicon-1.svg',
            },
            useWalletConnect: true,
            enableLogging: true,
          },
        })
        await web3auth.addPlugin(torusPlugin)

        const walletConnectV1Adapter = new WalletConnectV1Adapter({
          adapterSettings: {
            bridge: 'https://bridge.walletconnect.org',
          },
          clientId,
        })

        web3auth.configureAdapter(walletConnectV1Adapter)

        const metamaskAdapter = new MetamaskAdapter({
          clientId,
          sessionTime: 3600, // 1 hour in seconds
          web3AuthNetwork: 'cyan',
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: ChainConfig[defaultChainId].chainId,
            rpcTarget: ChainConfig[defaultChainId].provider, // This is the public RPC we have added, please pass on your own endpoint while creating an app
          },
        })
        // we can change the above settings using this function
        metamaskAdapter.setAdapterSettings({
          sessionTime: 86400, // 1 day in seconds
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: ChainConfig[defaultChainId].chainId,
            rpcTarget: ChainConfig[defaultChainId].provider,
          },
          web3AuthNetwork: 'cyan',
        })

        web3auth.configureAdapter(metamaskAdapter)

        const torusWalletAdapter = new TorusWalletAdapter({
          clientId,
        })

        // it will add/update  the torus-evm adapter in to web3auth class
        web3auth.configureAdapter(torusWalletAdapter)

        setWeb3auth(web3auth)

        await web3auth.initModal()
        if (web3auth.provider) {
          setProvider(web3auth.provider)
        }
      } catch (error) {
        console.error(error)
      }
    }

    init()
  }, [])

.......
}

[PJijin]

If you are having similar issue, refer: #1143

[altyni86]

Mine is not showing up tried everything with mainnet inputs. I suspect mine has something to do with polyfills, though I am not receiving explicit errors. Webapp is just failing to register itself... Did you do anything special with your polyfills?

[PJijin]

I have not made changes related to polyfills. Here are the changes that I have made,

1. I have created an app on web3auth with mainnet and use that as client id
2. Updated the chain id on the config to mainnet
3. Added web3AuthNetwork: 'mainnet',

const web3auth = new Web3Auth({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: ChainConfig[defaultChainId].chainId,
            rpcTarget: ChainConfig[defaultChainId].provider,
          },
          uiConfig: {
            theme: 'dark',
            loginMethodsOrder: ['facebook', 'google'],
            defaultLanguage: 'en',
            appLogo: '/assets/icons/icon.svg',
          },
          web3AuthNetwork: 'mainnet',
        })

[altyni86]

Thanks! Still not working for me, will let you know once/if I find something...

[PJijin]

I can check if you can share the demo url.

If you are not interested in sharing it publicly. DM on Twitter. https://twitter.com/pjijin_

[altyni86]

Sure, it is here https://www.tender3.xyz/