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.
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