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?
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.
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
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;
};
}
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.
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:
mainnet network in Developer Dashboard and whitelist your app URLstestnet network. Here is a sample codeconst 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
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');
}
// 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’
);
}">
// 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;
};
}
`