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?
where do i check that?
Ok, please share the below details:
"@web3auth/modal": "^6.1.7",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;
};
}
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",
});
That worked thank you
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.
web3AuthNetwork: 'mainnet' paramHi @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?
