Common Issues

Whitelist Domains

If you are deploying our social login integrations into production and running into Error: could not validate redirect, please whitelist your domain: , make sure to whitelist your domain on our dashboard.

Polyfill issues

If you are running errors like Uncaught Reference Error: process is not defined, it's likely that you are running into polyfill issues. Please check here for how to fix it.

NextJS

If you are using NextJS with our social wallets, you may need to set up transpiling.

For NextJS running on a version <=13.1.x, you need to use this package.

// next.config.js

const withTM = require('next-transpile-modules')(['@zerodev', '@web3']); // pass the modules you would like to see transpiled

module.exports = withTM({});

For NextJS running on a version >= 13.2.x, you can utilize the built-in transpilePackages config option.

// next.config.js

module.exports = {
  reactStrictMode: true,
  transpilePackages: ["@zerodev", "@web3"],
};

Here's an example project of ZeroDev + NextJS.

WalletConnect Issues

If you are having issues connecting a ZeroDev wallet through WalletConnect, refer to this working example.

Sign in with Ethereum (SIWE) issues

If you are having issues using SIWE with a ZeroDev wallet, refer to this working example.

Note that an undeployed ZeroDev wallet cannot sign into SIWE until it supports ERC-6492. This is an ongoing effort. Long story short, currently you need to make sure that your ZeroDev wallet is actually deployed (meaning that it must have sent at least one transaction) before SIWE can work.

Wallet disconnects on page refresh

If you are using @zerodev/wagmi or @zerodev/web3auth and the wallet disconnects on page refresh, try this:

• Activate the autoConnect option for Wagmi
• Activate the shimDisconnect option on the connector, e.g.:

const connector = new GoogleSocialWalletConnector({options: {
  shimDisconnect: true
  // ...other options
}})

Chain Switching for RainbowKit

Using ZeroDev + RainbowKit with multiple chains requires providing multiple projectIds via the projectIds option. Additionally, supplying the chains within the connector is required for chain switching.

import { polygonMumbai, goerli } from 'wagmi/chains'

const { chains, publicClient, webSocketPublicClient } = configureChains(
    [polygonMumbai, goerli],
    [publicProvider()],
)

const socialConnector = new GoogleWalletConnector({
+   chains, 
    options: {
-     projectId: '<project-id>',
+     projectIds: ['<project-id-1>', '<project-id-2>'],
    }
})

Full Code (Editable)

function RainbowKitExample() { const { chains, publicClient, webSocketPublicClient } = useMemo(() => configureChains( [polygonMumbai, goerli], [infuraProvider({apiKey: infuraApiKey})], ), []) const connectors = useMemo(() => connectorsForWallets([ { groupName: 'Social', wallets: [ googleWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}), facebookWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}), githubWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}), discordWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}), twitchWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}), twitterWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}) ], }, ]), []); const config = useMemo(() => createConfig({ autoConnect: false, connectors, publicClient, webSocketPublicClient, }), []) return ( <WagmiConfig config={config}> <RainbowKitProvider chains={chains} modalSize={'compact'}> <RainbowKitConnectButton /> </RainbowKitProvider> </WagmiConfig> ) }

function RainbowKitExample() {
  const { chains, publicClient, webSocketPublicClient } = useMemo(() => configureChains(
    [polygonMumbai, goerli],
    [infuraProvider({apiKey: infuraApiKey})],
  ), [])

  const connectors = useMemo(() => connectorsForWallets([
    {
      groupName: 'Social',
      wallets: [
        googleWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}),
        facebookWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}),
        githubWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}),
        discordWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}),
        twitchWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }}),
        twitterWallet({chains, options: { projectIds: [defaultProjectId, goerliProjectId] }})
      ],
    },
  ]), []);

  const config = useMemo(() => createConfig({
    autoConnect: false,
    connectors,
    publicClient,
    webSocketPublicClient,
  }), [])

  return (
    <WagmiConfig config={config}>
        <RainbowKitProvider chains={chains} modalSize={'compact'}>
            <RainbowKitConnectButton />
        </RainbowKitProvider>
    </WagmiConfig>
  )
}

Result

Loading...