# Web3Modal not appearing when deployed

**URL:** <https://builder.metamask.io/t/web3modal-not-appearing-when-deployed/977>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [August 25, 2025, 12:39pm UTC](https://builder.metamask.io/t/web3modal-not-appearing-when-deployed/977 "2025-08-25T12:39:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![calumsol123](https://avatars.discourse-cdn.com/v4/letter/c/a587f6/32.png) [@calumsol123](https://builder.metamask.io/u/calumsol123)\
**Post date:** [August 25, 2025, 12:39pm UTC](https://builder.metamask.io/t/web3modal-not-appearing-when-deployed/977/1 "2025-08-25T12:39:36Z")

</div>

> **🏛 Content from Web3Auth Community**
> 
> This topic was originally posted by **calumsol123** on 8/25/2025.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

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

---

<div class="post-metadata">

**Author:** ![w3abot](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@w3abot](https://builder.metamask.io/u/w3abot)\
**Post date:** [August 25, 2025, 12:40pm UTC](https://builder.metamask.io/t/web3modal-not-appearing-when-deployed/977/2 "2025-08-25T12:40:22Z")

</div>

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:**

* * *

#### Additional Troubleshooting Resources

- [Bundler Issues & Missing Dependencies (React)](https://web3auth.io/docs/sdk/web/react#bundler-issues-missing-dependencies)
- [React Quick Start Guide](https://web3auth.io/docs/sdk/web/react/quick-start)

* * *

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](https://web3auth.io/community/t/web3auth-developer-office-hours/8777)

---

<div class="post-metadata">

**Author:** ![calumsol123](https://avatars.discourse-cdn.com/v4/letter/c/a587f6/32.png) [@calumsol123](https://builder.metamask.io/u/calumsol123)\
**Post date:** [August 25, 2025, 1:19pm UTC](https://builder.metamask.io/t/web3modal-not-appearing-when-deployed/977/3 "2025-08-25T13:19:26Z")

</div>

"// 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](https://web3auth.io/images/web3authlog.png)”,  
logoDark: “[https://web3auth.io/images/web3authlogodark.png](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

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [August 29, 2025, 7:44am UTC](https://builder.metamask.io/t/web3modal-not-appearing-when-deployed/977/4 "2025-08-29T07:44:05Z")

</div>

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