# \[Archive\] Blank web3auth Modal Box

**URL:** <https://builder.metamask.io/t/archive-blank-web3auth-modal-box/2160>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [January 20, 2023, 3:56pm UTC](https://builder.metamask.io/t/archive-blank-web3auth-modal-box/2160 "2023-01-20T15:56:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![githubdiscussions](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@githubdiscussions](https://builder.metamask.io/u/githubdiscussions)\
**Post date:** [January 20, 2023, 3:56pm UTC](https://builder.metamask.io/t/archive-blank-web3auth-modal-box/2160/1 "2023-01-20T15:56:44Z")

</div>

> **🏛 Archived Content from Web3Auth Community**
> 
> This topic was originally posted by **githubdiscussions** on 1/20/2023.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

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.

[![](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/2X/6/68081307bf00b8faac275dbd6080b1528b4de632.png)](https://camo.githubusercontent.com/b8708e49e9a599fffd0d68f675b8c097e43fa86a898a83c616ae96b0c5b7abb6/68747470733a2f2f692e696d6775722e636f6d2f736e306b4a64732e706e67)

\<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)
}
}

```

}, [])

…  
}"\>

```
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](https://github.com/PJijin)  
   
 Check the discussion at: [https://github.com/orgs/Web3Auth/discussions/1232](https://github.com/orgs/Web3Auth/discussions/1232)

---

<div class="post-metadata">

**Author:** ![githubdiscussions](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@githubdiscussions](https://builder.metamask.io/u/githubdiscussions)\
**Post date:** [January 22, 2023, 9:41am UTC](https://builder.metamask.io/t/archive-blank-web3auth-modal-box/2160/2 "2023-01-22T09:41:30Z")

</div>

If you are having similar issue, refer: [#1143](https://github.com/orgs/Web3Auth/discussions/1143)

  
   
 Originally posted by: [PJijin](https://github.com/PJijin)