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.

Arguments

uiConfig

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

Table

Parameter	Description
loginMethodsOrder	order of how login methods are shown
modalZIndex	Z-index of the modal and iframe
displayErrorsOnModal	Whether to show errors on Web3Auth modal.
loginGridCol	number of columns to display the Social Login buttons
primaryButton	Decides which button will be the focus of the modal
uxMode	UX Mode for the openlogin adapter
appName?	App name to be displayed in the User Flow Screens. It accepts string as a value.
appUrl?	App URL to be displayed in the User Flow Screens. It accepts string as a value.
logoLight?	App logo to be shown on the light background (light theme). It accepts string as a value.
logoDark?	App logo to be shown on the dark background (dark theme). It accepts string as a value.
defaultLanguage?	Default Language to use. Choose from: en - English de - German ja - Japanese ko - Korean zh - Mandarin es - Spanish fr - French pt - Portuguese nl - Dutch tr - Turkish . Default language is en
mode?	Choose between auto, light or dark background modes. Default is auto.
theme?	Used to customize the theme of the login modal with the following options 'primary' - To customize the primary color of the modal's content. It accepts Record as a value.
tncLink?	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"}
privacyPolicy?	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", }

Interface

export interface UIConfig extends WhiteLabelData {
  /**
   * order of how login methods are shown
   *
   * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
   */
  loginMethodsOrder?: string[];
  /**
   * Z-index of the modal and iframe
   * @defaultValue 99998
   */
  modalZIndex?: string;
  /**
   * Whether to show errors on Web3Auth modal.
   *
   * @defaultValue `true`
   */
  displayErrorsOnModal?: boolean;
  /**
   * number of columns to display the Social Login buttons
   *
   * @defaultValue `3`
   */
  loginGridCol?: 2 | 3;
  /**
   * Decides which button will be the focus of the modal
   * For `socialLogin` the social icon will be colored
   * For other options like `emailLogin` and `externalLogin` the respective buttons will be coverted into a primary button
   *
   * @defaultValue `socialLogin`
   */
  primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
  /**
   * UX Mode for the openlogin adapter
   */
  uxMode?: UX_MODE_TYPE;
}
export type WhiteLabelData = {
  /**
   * App name to display in the UI
   */
  appName?: string;
  /**
   * App url
   */
  appUrl?: string;
  /**
   * App logo to use in light mode
   */
  logoLight?: string;
  /**
   * App logo to use in dark mode
   */
  logoDark?: string;
  /**
   * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
   * en: english
   * de: german
   * ja: japanese
   * ko: korean
   * zh: mandarin
   * es: spanish
   * fr: french
   * pt: portuguese
   * nl: dutch
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue auto
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize theme of the login modal with following options
   * `'primary'` - To customize primary color of modal's content.
   */
  theme?: {
    primary?: string;
    gray?: string;
    red?: string;
    green?: string;
    success?: string;
    warning?: string;
    error?: string;
    info?: string;
    white?: 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",
   * }
   */
  tncLink?: 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",
   * }
   */
  privacyPolicy?: Partial<Record<LANGUAGE_TYPE, string>>;
};

WhiteLabelData

whiteLabel?: WhiteLabelData;

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

Table

WhiteLabelData

Parameter	Description
appName?	App name to be displayed in the User Flow Screens. It accepts string as a value.
appUrl?	App URL to be displayed in the User Flow Screens. It accepts string as a value.
logoLight?	App logo to be shown on the light background (light theme). It accepts string as a value.
logoDark?	App logo to be shown on the dark background (dark theme). It accepts string as a value.
defaultLanguage?	Default Language to use. Choose from: en - English de - German ja - Japanese ko - Korean zh - Mandarin es - Spanish fr - French pt - Portuguese nl - Dutch tr - Turkish . Default language is en
mode?	Choose between auto, light or dark background modes. Default is auto.
theme?	Used to customize the theme of the login modal with the following options 'primary' - To customize the primary color of the modal's content. It accepts Record as a value.
tncLink?	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"}
privacyPolicy?	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", }

Interface

export type WhiteLabelData = {
  /**
   * App name to display in the UI
   */
  appName?: string;
  /**
   * App url
   */
  appUrl?: string;
  /**
   * App logo to use in light mode
   */
  logoLight?: string;
  /**
   * App logo to use in dark mode
   */
  logoDark?: string;
  /**
   * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
   * en: english
   * de: german
   * ja: japanese
   * ko: korean
   * zh: mandarin
   * es: spanish
   * fr: french
   * pt: portuguese
   * nl: dutch
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue auto
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize theme of the login modal with following options
   * `'primary'` - To customize primary color of modal's content.
   */
  theme?: {
    primary?: string;
    gray?: string;
    red?: string;
    green?: string;
    success?: string;
    warning?: string;
    error?: string;
    info?: string;
    white?: 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",
   * }
   */
  tncLink?: 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",
   * }
   */
  privacyPolicy?: Partial<Record<LANGUAGE_TYPE, string>>;
};

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/web3auth-logo.svg",
    logoDark: "https://web3auth.io/images/web3auth-logo---Dark.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

appLogo

theme

loginMethodsOrder

defaultLanguage

en - English

de - German

ja - Japanese

ko - Korean

zh - Chinese (Mandarin)

es - Spanish

fr - French

pt - Portuguese

nl - Dutch

loginGridCol

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,
    },
  },
});