There seems to be some bug in the code. Please contact support to fix this. could not validate redirect, please whitelist your domain

So i deployed my server and frontend and now its throwing this error when i try to login in. I whitelisted my frontend and server, then double checked to make sure that my frontend deployed with the proper clientId.

What else could be causing this issue?

1 Like

@mattjaf Are you using Testnet, Cyan or Mainnet for your client ID?

where do i check that?

I guess testnet:

1 Like

Ok, please share the below details:

  1. SDK version
  2. Platform
  3. Implementation code
  1. "@web3auth/modal": "^6.1.7",
  2. React using Moralis v-1
  3. Code for custom Connector:
import Moralis from 'moralis-v1';
import { ethers } from 'ethers';
//import verifyChainId from '../utils/verifyChainId';
import { WALLET_ADAPTERS } from '@web3auth/base';
import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";

export default class Web3AuthConnector extends Moralis.AbstractWeb3Connector {
  type = 'web3Auth';

  connect = (web3auth) => {
    return new Promise((resolve, reject) => {
      const subscribeAuthEvents = (web3auth) => {
        web3auth.loginModal.on('MODAL_VISIBILITY', async (visibility) => {
          if (!visibility) {
            reject(new Error('Web3Auth: User closed login modal.'));
          }
        });
      };

      subscribeAuthEvents(web3auth);

      web3auth.connect().then(resolve).catch(reject);
    });
  };

  activate = async ({
    chainId = '0x1',
    clientId,
    theme,
    appLogo,
    loginMethodsOrder,
  } = {}) => {
    // Checking that all params are given
    if (!clientId) {
      throw new Error('"clientId" not provided, please provide clientId');
    }

    // Initalizing Web3Auth and getting constants
    let Web3Auth;
    try {
      Web3Auth = require('@web3auth/modal')?.Web3Auth;
    } catch {
      // Do Nothing Individual Checks are done below
    }

    // Check if user is using CDN to import
    if (!Web3Auth) {
      Web3Auth = window?.Web3auth?.Web3Auth;
    }

    // Error checking for if library is not installed
    if (!Web3Auth) {
      throw new Error('"@web3auth/modal" not installed, please install');
    }

    // Build config
    const ethChainConfig = {
      chainNamespace: 'eip155',
      chainId: chainId,
    };
    // Build Web3Auth
    let web3auth;
    try {
      web3auth = new Web3Auth({
        chainConfig: ethChainConfig,
        uiConfig: {
          theme: theme ?? 'dark',
          appLogo:
            appLogo ??
            'https://moralis.io/wp-content/uploads/2021/05/moralisWhiteLogo.svg',
          loginMethodsOrder,
        },
        clientId: clientId,
      });
/*
       // Add Torus Wallet Connector Plugin
       const torusPlugin = new TorusWalletConnectorPlugin({
        torusWalletOpts: {},
        walletInitOptions: {
          whiteLabel: {
            theme: { isDark: true, colors: { primary: "#00a8ff" } },
            logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
            logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
          },
          //useWalletConnect: true,
          showTorusButton: true,
          enableLogging: true,
        },
      });
      await web3auth.addPlugin(torusPlugin);
      */

    } catch {
      // Do Nothing error checked below
    }
    if (!web3auth) {
      throw new Error(
        'Could not connect via Web3Auth, error during initializing Web3Auth'
      );
    }

    // Authenticate
    await web3auth.initModal({
      modalConfig: {
        [WALLET_ADAPTERS.OPENLOGIN]: {
          loginMethods: {
            // change based on what you want to show
            google: {
              showOnModal: true,
            },
            facebook: {
              showOnModal: false,
            },
            twitter: {
              showOnModal: false,
            },
          },
          // setting it to false will hide all social login methods from modal.
          showOnModal: true,
        },
      },
    });
    let provider = null;
    provider = await this.connect(web3auth);

    if (!provider) {
      throw new Error(
        'Could not connect via Web3Auth, error in connecting to provider'
      );
    }

    // Gather User data
    try {
      const isSocialLogin = web3auth?.provider ? false : true;
      const ether = new ethers.providers.Web3Provider(
        web3auth?.provider ? web3auth.provider : web3auth
      );

      const signer = ether.getSigner();
      const values = await Promise.all([
        ether.getNetwork(),
        signer.getAddress(),
      ]);
      const providerChainId = values[0].chainId;

      this.account = values[1].toLocaleLowerCase();
      this.chainId = `0x${providerChainId.toString(16)}`;
      this.provider = isSocialLogin ? ether : web3auth?.provider;

      this.web3Instance = web3auth;
      this.subscribeToEvents(this.provider);
      return {
        chainId: this.chainId,
        account: this.account,
        provider: this.provider,
      };
    } catch {
      throw new Error(
        'Could not connect via Web3Auth, error while authenticating'
      );
    }
  };

  deactivate = async () => {
    this.unsubscribeToEvents(this.provider);
    if (this.web3Instance) {
      await this.web3Instance.logout();
    }
    this.account = null;
    this.chainId = null;
    this.provider = null;
  };

}
1 Like

Thanks for sharing the details. Your issue has been forwarded to our team and we will keep you updated on the progress.

Hey @mattjaf, have you specified the web3AuthNetwork parameter during the Web3Auth Modal initialization ?
I’ll paste a snippet here for your reference on where should it go. For your case, please mention "testnet" as the parameter.

const web3auth = new Web3Auth({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
          },
          // add the below parameter as "testnet"
          web3AuthNetwork: "cyan",
        });
1 Like

That worked thank you

2 Likes

Adding that seemed to change the account my google login generates

Different web3AuthNetwork parameters will give different accounts even if the account you are logging in from is the same, due to the nodes being different for different networks. @mattjaf

Hello friends,

I am having the same issue here and it is persisting.

I have 2 projects, one on mainnet and one on testnet. On my dev environment everything works fine however when I deployed to vercel, I get this message:

There seems to be some bug in the code. Please contact support to fix this.
could not validate redirect, please whitelist your domain: <domain> for provided clientId <client_id> at https://dashboard.web3auth.io. Also, this project is on mainnet network. Please ensure the the used Client ID belongs to this network.
  • my client Id is on mainnet.
  • I whitelisted the url(s)
  • I added the web3AuthNetwork: 'mainnet' param

Help please :pray: @vjgee @maharshi

Hi @david.nejar,
I hope when say you whitelisted the URL, you mean the vercel one as well to the verifier deployed on mainnet and you are using client ID for this verifier in your app?

Yes, I did

I whitelisted https://sourceforge.vercel.app and https://sourceforge.vercel.app/login

and I use the right client id

Any solution you got?

same issue on mainnet… is this still an open issue?

When you say “using client ID for this verifier in your app” does that mean above it on that page, in the clientID field? or as part of the yourapp://auth

@here To ensure we can give your query full attention, please open a new thread as this issue has already been closed. Thank you!