Web3Auth Whitelist for testnet not working

[danieljao]

Hi, im using the correct client id, and i've tried whitelist the URL based on the error in the dashboard, im using testnet but still not working, any suggestions?

[rinzler99]

Hey, can you share console errors here would be easy to debug? And also make sure you are not using ropsten as it is deprecated.

[billtlee]

We are having the same problem

[girishvi]

@rinzler99

[tainguyentt]

Hi, @danieljao @billtlee @girishvi
There is a new change recently that enforces network of Plug&play Project and network used in code to be the same.
When you initialize Web3auth in code, by default mainnet network is used which is mismatching with the testnet network of your Plug&play project.

So there are 2 solutions for this issue:

1. Create a new Plug&play project with mainnet network in Developer Dashboard and whitelist your app URLs
2. Explicitly define OpenloginAdapter to use testnet network. Here is a sample code

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    network: "testnet",
  },
});
web3auth.configureAdapter(openloginAdapter);

Let me know if the problem is resolved

[tainguyentt]

If you want a quick fix, just create a new Plug&play Project on mainnet and use this in your app.

[billtlee]

So for some reason I am not getting the console log on openLoginAdapter in the following try catch block. I am only seeing the first console log of the first web3Auth. What is the difference between testnet and mainnet? Can I still use Goerli on mainnet or is that going to be Ethereum?

    let web3auth;
    try {
      web3auth = new Web3Auth({
        chainConfig: ethChainConfig,
        clientId: clientId,
      });

      console.log('web3auth:', web3auth);
      const openloginAdapter = new OpenloginAdapter({
        adapterSettings: {
          network:
            NEXT_PUBLIC_TRANSAK_ENVIRONMENT == 'STAGING'
              ? 'testnet'
              : 'mainnet',
          uxMode: 'popup',
          whiteLabel: {
            name: 'DualMint Marketplace',
            logoLight: '/LogoLight.png',
            logoDark: '/LogoDark.png',
            defaultLanguage: 'en',
            dark: true, // whether to enable dark mode. defaultValue: false
          },
        },
      });

      console.log('openloginAdapter: ', openloginAdapter);
      web3auth.configureAdapter(openloginAdapter);
      console.log('web3auth: ', web3auth);
    } catch {
      // Do Nothing error checked below
    }

[tainguyentt]

Can you add console.log in the catch block to see what's the error?
Testnet and mainnet are networks of Web3auth Auth network which is a part of Web3auth Key infrastructure. (https://web3auth.io/docs/overview/key-management/)

[billtlee]

So, testnet is testnet in Web3Auth environment and it doesn't mean Ethereum. I can still access different chains on mainnet using different chainid's. Am I understanding it correctly?

It appears to be failing at :

      const openloginAdapter = new OpenloginAdapter({
        adapterSettings: {
          network,
          uxMode: 'popup',
          whiteLabel: {
            name: 'DualMint Marketplace',
            logoLight: '/LogoLight.png',
            logoDark: '/LogoDark.png',
            defaultLanguage: 'en',
            dark: true, // whether to enable dark mode. defaultValue: false
          },
        },
      });

  console.error('Web3AuthConnector activate: ', e);

[billtlee]

@tainguyentt Any idea what might be causing this? Thx!

[billtlee]

So, we are using Moralis and what we did was to override their web3auth connector that uses the openloginadapter code you provided. But we still are not able to get it to work.

`import Moralis from 'moralis';
import { ethers } from 'ethers';
//import verifyChainId from '../utils/verifyChainId';
import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from '@web3auth/base';
import { OpenloginAdapter } from '@web3auth/openlogin-adapter';

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

connect = (web3auth) => {
console.log('Using custom Web3AuthConnector');
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 = NEXT_PUBLIC_WEB3AUTH_CHAINID,
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/core" not installed, please install');
}

// Build config
const ethChainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: chainId,
};
// Build Web3Auth
let web3auth;
try {
  web3auth = new Web3Auth({
    chainConfig: ethChainConfig,
    clientId: clientId,
  });

  const openloginAdapter = new OpenloginAdapter({
    adapterSettings: {
      network:
        NEXT_PUBLIC_TRANSAK_ENVIRONMENT == 'STAGING'
          ? 'testnet'
          : 'mainnet',
      uxMode: 'popup',
      whiteLabel: {
        name: 'DualMint Marketplace',
        logoLight: '/LogoLight.png',
        logoDark: '/LogoDark.png',
        defaultLanguage: 'en',
        dark: true, // whether to enable dark mode. defaultValue: false
      },
    },
  });

  web3auth.configureAdapter(openloginAdapter);
} 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]: {
      label: "openlogin",
      // 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;
};
}
`

[tainguyentt]

What error did you face?

[billtlee]

same error. I also tried adding https://dualmint.io and https://*.dualmint.io. I guess you guys don't take wildcards.

'OpenLogin - RPC Error: could not validate redirect, please whitelist your domain: https://nightly.dualmint.io for provided clientId BDxs0D...
{code: -32602, message: 'could not validate redirect, please whitelist your…qmGoQBZo6c6tChjU at https://dashboard.web3auth.io', data: undefined}
code
:
-32602
data
:
undefined
message
:
"could not validate redirect, please whitelist

[tainguyentt]

Oh, I thought you're using web3auth/modal SDK so I suggested you to use specify network in OpenLoginAdapter.
Please give me more info of which SDKs are you using in https://nightly.dualmint.io/

[billtlee]

I have updated the import of OpenloginAdapter. Previously I was importing {OpenLoginAdapter} so I thought that was the problem. But it seems like it's still not getting to the code. I am not getting the console.log of openloginAdapter for some reason.

import Moralis from 'moralis';
import { ethers } from 'ethers';
//import verifyChainId from '../utils/verifyChainId';
import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from '@web3auth/base';
import OpenloginAdapter from '@web3auth/openlogin-adapter';

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

  connect = (web3auth) => {
    console.log('Using custom Web3AuthConnector');
    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 = NEXT_PUBLIC_WEB3AUTH_CHAINID,
    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/core" not installed, please install');
    }

    // Build config
    const ethChainConfig = {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: chainId,
    };
    // Build Web3Auth
    let web3auth;
    try {
      web3auth = new Web3Auth({
        chainConfig: ethChainConfig,
        clientId: clientId,
      });

      const network =
        process.env.NEXT_PUBLIC_TRANSAK_ENVIRONMENT == 'STAGING'
          ? 'testnet'
          : 'mainnet';
      console.log('network: ', network);
      console.log('web3auth:', web3auth);

      const openloginAdapter = new OpenloginAdapter({
        adapterSettings: {
          network,
          uxMode: 'popup',
          whiteLabel: {
            name: 'DualMint Marketplace',
            logoLight: '/LogoLight.png',
            logoDark: '/LogoDark.png',
            defaultLanguage: 'en',
            dark: true, // whether to enable dark mode. defaultValue: false
          },
        },
      });

      console.log('openLoginAdapter: ', openloginAdapter);
      web3auth.configureAdapter(openloginAdapter);
      console.log('web3auth: ', web3auth);
    } 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]: {
          label: 'openlogin',
          // 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;
  };
}

[kay-is]

It would be cool if the docs could get an update.

The usage example on the Plug and Play project still shows the mainnet setup.