Web3Auth authentication works perfectly on both localhost and Vercel preview URLs, but fails on the production domain https://coinrotator.app with a domain validation error:
“There is a bug in your code. Please contact support. (Make sure your domain is whitelisted and it’s on the Sapphire network).”
However, we are using the Sapphire network, and the domain is whitelisted.
Authentication works flawlessly for both web and mobile at our preview deployment:
https://coinrotator-git-ai-playground-teamxx.vercel.app/
But on our live production domain:
https://coinrotator.app
—it fails on mobile devices and throws the domain validation error mentioned above.
// Environment-specific client ID selection
const getEnvironmentConfig = () => {
if (typeof window === ‘undefined’) {
return { isDev: false, clientId: productionClientId, network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET };
}
const hostname = window.location.hostname;
// Localhost uses development
if (hostname === ‘localhost’ || hostname === ‘127.0.0.1’) {
return { isDev: true, clientId: developmentClientId, network: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET };
}
// Production domain uses production config
if (hostname === ‘coinrotator.app’ || hostname === ‘www.coinrotator.app’) {
return { isDev: false, clientId: productionClientId, network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET };
}
// Fallback for preview URLs
return { isDev: true, clientId: developmentClientId, network: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET };
};
const envConfig = getEnvironmentConfig();
// Web3Auth initialization
const web3authInstance = new Web3Auth({
clientId: envConfig.clientId,
web3AuthNetwork: envConfig.network,
chainConfig: defaultChainConfig,
enableLogging: envConfig.isDev,
storageKey: “local”,
uiConfig: {
loginMethodsOrder: [“google”, “twitter”, “apple”, “email_passwordless”],
hideExternalWallets: false,
uxMode: “popup”,
primaryButton: “socialLogin”,
},
sessionTime: 86400,
});
Stack:
Any guidance on resolving this domain whitelisting issue would be greatly appreciated!
