Blank web3auth Modal Box

[Legacy] GitHub Discussions
1

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.

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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/community/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/community/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()

}, [])

…
}">

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/community/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/community/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()



}, [])


…

}


Originally posted by: PJijin

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/1232

2

If you are having similar issue, refer: #1143



Originally posted by: PJijin