Help with customizing Web3Auth's Modal design to fit our design

Help - Plug n Play
,
1

Hi!

I am not exactly sure whether to post this in Plug n Play or Core SDK
So if this is the wrong SDK let me know

We are looking to customize the modal to look like this:

image
image1997×649 147 KB

Left box is how we want it to look
Right 2 boxes are how it looks

Our issues are:

  1. The email box - It is not letting us customize how we want
  2. Wallet Sign In - It is not letting us show Metamask and Phantom on the first page
    Its making us click Connect with Wallet and then showing them

Maybe we are using the wrong SDK

Is it also possible to customize the following 2 parts of the sign in process:

image
image553×533 20.1 KB

image

Any help with this would be greatly appreciated!
Thank you!

2

Thanks for sharing your question and the screenshots! Here’s a summary of your request and some guidance:

Your Request

  • SDK Used: Web3Auth Plug n Play (PnP) Modal (likely v10, but let us know if you’re on a different version)
  • Platform: Web (modal integration)
  • Customization Needs:
    1. You want to customize the email login box’s appearance.
    2. You want MetaMask and Phantom wallet options to appear on the first modal page (not hidden behind “Connect with Wallet”).
    3. You want to customize the appearance of the subsequent sign-in screens (as shown in your screenshots).

Current Limitations & Solutions

1. Modal Customization (Email Box & Wallet Placement)

  • Web3Auth v10 centralizes most branding and UI customization in the Web3Auth Developer Dashboard.
  • Deep UI Customization (e.g., custom email input styles, full layout control):
    • The Plug n Play Modal SDK does not currently allow full control over modal layout or input styling beyond what’s offered in the dashboard (logo, colors, etc.).
    • You can control which login methods show up on the first page using the modalConfig option when initializing the SDK.

Example (show MetaMask & Phantom upfront):

import { Web3Auth, WALLET_CONNECTORS } from "@web3auth/modal";

const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID",
  web3AuthNetwork: "sapphire_mainnet",
  modalConfig: {
    connectors: {
      [WALLET_CONNECTORS.AUTH]: {
        loginMethods: {
          email_passwordless: { showOnModal: true, name: "Email" },
        },
      },
      [WALLET_CONNECTORS.WALLET]: {
        loginMethods: {
          metamask: { showOnModal: true, name: "MetaMask" },
          phantom: { showOnModal: true, name: "Phantom" },
        },
      },
    },
  },
});

2. Customizing Intermediate/Popup Screens

  • Customizing the intermediate authentication screens (e.g., the actual email input, social popups) is not supported in v10 via SDK or dashboard. These are standardized for security and consistency.
  • If you need full control over the UI, consider using the Web3Auth Core SDK instead, which lets you build your own UI and trigger authentication flows programmatically.

Recommendations

  • For Modal Customization: Use the modalConfig option as shown above to control login method visibility/order.
  • For Deep UI Customization: If you require pixel-perfect control (as in your left-side mockup), you’ll need to use the Core SDK and implement the UI yourself.
  • For Branding: Set your app name, logo, and theme in the Web3Auth Dashboard.

Helpful Links

If you need help switching to the Core SDK or want to share your current initialization code for more targeted suggestions, let us know!

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