Skip to main content

Login Modal

The Web3Auth Plug and Play Modal offers a user-friendly interface that enables your dApp to connect with various login methods and adapters provided by Web3Auth. By whitelabeling the Login Modal, your dApp can maintain a consistent user experience. You can customize the theme, choose from 8+ languages supported and provide your dApp name and brand logo, along with other options for detailed customization across all our offerings.

Web3Auth Plug and Play Login Modal

Arguments​

uiConfig

You can pass the uiConfig parameters to @web3auth/modal to whitelabel your Web3Auth Login Modal.

ParameterTypeDescriptionMandatoryDefault
loginMethodsOrder?string[]The list of login methods can be reordered with this parameter. Those methods specified will be first on the list.No["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]
modalZIndex?stringZ-index of the modal and iframeNo"99998"
displayErrorsOnModal?booleanWhether to show errors on Web3Auth modal.Notrue
loginGridCol?2 or 3Number of columns to display the Social Login buttons.No3
primaryButton?enum - (externalLogin, socialLogin or emailLogin)Decides which button will be displayed as primary button in modal. Only one button will be primary and other buttons in modal will be secondary.NosocialLogin

WhiteLabelData

whiteLabel?: WhiteLabelData;​

The whitelabel parameter takes WhitelabelData as input. The WhitelabelData object takes the following parameters:

WhiteLabelData

ParameterTypeDescriptionDefaultMandatory
appName?stringApp name to be displayed in the User Flow Screens.dApp's Website URLNo
appUrl?stringApp URL to be displayed in the User Flow Screens.dApp's Website URLNo
logoLight?stringApp logo to be shown on the dark background (dark theme)web3auth-logo.svgNo
logoDark?stringApp logo to be shown on the light background (light theme)web3auth-logo.svgNo
defaultLanguage?stringDefault Language to use.
Choose from:
  • en - English
  • de - German
  • ja - Japanese
  • ko - Korean
  • zh - Mandarin
  • es - Spanish
  • fr - French
  • pt - Portuguese
  • nl - Dutch
en - EnglishNo
mode?stringChoose between auto, light or dark modes.autoNo
theme?{ [P in string]: string; }Used to customize the theme of the login modal with the following options
'primary' - To customize the primary color of the modal's content		#0364FFNo
tncLink?Partial<Record<LANGUAGE_TYPE, string>>Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure e.g. tncLink: {en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja"}noneNo
privacyPolicy?Partial<Record<LANGUAGE_TYPE, string>>Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure e.g. privacyPolicy: { en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja", }noneNo

Example​

import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const web3auth = new Web3Auth({
  // type uiConfig
  uiConfig: {
    appName: "W3A",
    theme: {
      primary: "red",
    },
    mode: "dark",
    logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
    logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
    defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
    loginGridCol: 3,
    primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin"
  },
  chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
  web3AuthNetwork: "sapphire_mainnet",
});

uiConfig​

appName​

appName

appLogo

theme​

theme

loginMethodsOrder​

loginMethodsOrder

defaultLanguage​

en - English​

en

de - German​

de

ja - Japanese​

ja

ko - Korean​

ko

zh - Chinese (Mandarin)​

zh

es - Spanish​

es

fr - French​

fr

pt - Portuguese​

pt

nl - Dutch​

nl

loginGridCol​

loginGridCol

primaryButton​

primaryButton

More customization​

initModal

Disable few Social Login Methods​

import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";

const web3auth = new Web3Auth({
  chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
  web3AuthNetwork: "sapphire_mainnet",
});

await web3auth.initModal({
  modalConfig: {
    [WALLET_ADAPTERS.OPENLOGIN]: {
      label: "openlogin",
      loginMethods: {
        // Disable facebook and reddit
        facebook: {
          name: "facebook",
          showOnModal: false,
        },
        reddit: {
          name: "reddit",
          showOnModal: false,
        },
      },
    },
  },
});

Disable Email or SMS Login Methods​

import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";

const web3auth = new Web3Auth({
  chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
  web3AuthNetwork: "sapphire_mainnet",
});

await web3auth.initModal({
  modalConfig: {
    [WALLET_ADAPTERS.OPENLOGIN]: {
      label: "openlogin",
      loginMethods: {
        // Disable email_passwordless and sms_passwordless
        email_passwordless: {
          name: "email_passwordless",
          showOnModal: false,
        },
        sms_passwordless: {
          name: "sms_passwordless",
          showOnModal: false,
        },
      },
    },
  },
});

Disable External Wallet Options​

import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";

const web3auth = new Web3Auth({
  chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
  web3AuthNetwork: "sapphire_mainnet",
});

await web3auth.initModal({
  modalConfig: {
    // Disable Wallet Connect V2
    [WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
      label: "wallet_connect",
      showOnModal: false,
    },
    // Disable Metamask
    [WALLET_ADAPTERS.METAMASK]: {
      label: "metamask",
      showOnModal: false,
    },
  },
});