Web3Modal not appearing when deployed

Help - Plug n Play
1

When pressing my login button on my localhost, the modal pops up and allows me to log in, however when deployed the modal doesn’t even appear what so ever. The whitelists and stuff are set up fine. Just when deployed it doesnt work

2

Thanks for sharing the details, Cameron! I understand that your Web3Auth modal appears correctly on localhost but does not show up at all when deployed, even though your whitelists are set up.

Here’s a summary of your issue for the support team:

Issue Summary

  • SDK Used: Web3Auth Plug and Play (React SDK)
  • Problem: Web3Auth modal appears on localhost but not on the deployed site. No modal is shown when pressing the login button in production.
  • Whitelist: Confirmed set up correctly.
  • Platform: React (Frontend SDK)
  • Deployment: Issue only occurs in production/deployed environment.

Next Steps / Troubleshooting

To help the support team quickly diagnose the issue, could you please provide:

  1. Web3Auth Initialization & Login Code Snippet:
    The part of your code where you initialize Web3Auth and trigger the login/modal. This will help check for any environment-specific logic.

  2. Browser Console Errors (Production):
    Are there any errors or warnings in your browser’s console when you try to open the modal on the deployed site? A screenshot or copy of the error messages would be very helpful.

  3. Deployment Details:

    • Which hosting provider or platform are you using for deployment (e.g., Vercel, Netlify, AWS, etc.)?
    • Is your deployed domain included in the Web3Auth dashboard whitelist (double-check for typos or missing subdomains like www)?

Additional Troubleshooting Resources

Once you provide the code snippet and any console errors, the support team can give you more targeted help. Thank you for your patience, and let us know if you have any more details!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

"// IMP START - Quick Start
import { WEB3AUTH_NETWORK } from “@web3auth/modal”;
import { type Web3AuthContextConfig } from “@web3auth/modal/react”;
// IMP END - Quick Start

// IMP START - Dashboard Registration
const clientId = import.meta.env.VITE_WEB3AUTH_CLIENT_ID // IMP END - Dashboard Registration

// IMP START - Instantiate SDK
const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions: {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
uiConfig: {
appName: “SwarmBet”,
mode: “light”,
logoLight: “https://web3auth.io/images/web3authlog.png”,
logoDark: “https://web3auth.io/images/web3authlogodark.png”,
defaultLanguage: “en”,
loginGridCol: 3,
primaryButton: “externalLogin”,
},
}
};
// IMP END - Instantiate SDK

export default web3AuthContextConfig;
"

No errors int he console

Deployed on vercel

4

Can you please share the SDK version and name and the relevant code snippets?