Whitelabel Plug n Play Modal

Web3Auth is fully whitelabelable with application branding to have a consistent user experience. For Whitelabeling, there are three different aspects available for you. Web3Auth gives you the ability to define a custom UI, branding, and translations for your applications. All our SDKs support Whitelabeling, giving granular customization capability across all our offerings.

note

This is a paid feature and the minimum pricing plan to use this SDK in a production environment is the Growth Plan. You can use this feature in sapphire_devnet for free.

Within the Web3Auth Plug and Play Modal SDK, whitelabeling can happen in 3 different places,

Web3Auth Modal: You can whitelabel the Web3Auth Modal according to your needs, for this, you need to pass on the following parameters:
- Within the uiConfig parameter while instantiating Web3Auth, you can configure the Web3Auth Modal according to your application's requirements.
- Change the visibility and order of methods appearing in Web3Auth modal by passing the modalConfig in initModal function, while initializing the SDK.
Auth Adapter: The redirect screens while logging in and constructing the key, can be customised according to your common as well. For this, you need to pass on the whiteLabel configuration parameter to the auth-adapter.

NEW: Whitelabeling via the Dashboard

From version 8.5.0, Web3Auth Modal Plug and Play SDK offers whitelabeling capabilities via the Dashboard. This enables developers to customize the authentication modal, user interface, and translations to align with their application's branding and user experience requirements.

Customize the Authentication Modal: Modify the appearance of the authentication modal, including the primary color, application name, logo and dark or light mode, to align with your application's branding.
Configure Language and Translations: Customize the language and translations within the authentication flow to cater to your target audience.

Whitelabeling while Web3Auth Instantiation

tip

Read more about Instantiating Web3Auth in the Initialization SDK Reference

While instantiating Web3Auth, the constructor takes an object with Web3AuthOptions as input. The Web3AuthOptions object is further taken in the parameter of uiConfig which is the configuration for whitelabeling the Modal UI display properties.

`uiConfig`

Table
Interface

Parameter	Description
`appName`	App name to display in the UI
`appUrl`	App url
`logoLight`	App logo to use in light mode
`logoDark`	App logo to use in dark mode
`defaultLanguage`	language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
`mode`	theme
`useLogoLoader`	Use logo loader
`theme`	Used to customize your theme
`tncLink`	Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
`privacyPolicy`	Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure

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
   * tr: turkish
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue light
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize your theme
   */
  theme?: WHITE_LABEL_THEME;
  /**
   * 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>>;
};

export declare const LANGUAGES: {
  readonly en: "en";
  readonly ja: "ja";
  readonly ko: "ko";
  readonly de: "de";
  readonly zh: "zh";
  readonly es: "es";
  readonly fr: "fr";
  readonly pt: "pt";
  readonly nl: "nl";
  readonly tr: "tr";
};
export type LANGUAGE_TYPE = (typeof LANGUAGES)[keyof typeof LANGUAGES];

export declare const THEME_MODES: {
  readonly light: "light";
  readonly dark: "dark";
  readonly auto: "auto";
};
export type THEME_MODE_TYPE = (typeof THEME_MODES)[keyof typeof THEME_MODES];

export type WHITE_LABEL_THEME = {
  /**
   * `primary` color that represents your brand
   * Will be applied to elements such as primary button, nav tab(selected), loader, input focus, etc.
   */
  primary?: string;
  /**
   * `onPrimary` color that is meant to contrast with the primary color
   * Applies to elements such as the text in a primary button or nav tab(selected), blocks of text on top of a primary background, etc.
   */
  onPrimary?: string;
};

`WhitelabelData`

`whiteLabel?: WhiteLabelData;`

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

Table
Interface

WhiteLabelData

Parameter	Description
`appName`	App name to display in the UI
`appUrl`	App url
`logoLight`	App logo to use in light mode
`logoDark`	App logo to use in dark mode
`defaultLanguage`	language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
`mode`	theme
`useLogoLoader`	Use logo loader
`theme`	Used to customize your theme
`tncLink`	Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
`privacyPolicy`	Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure

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
   * tr: turkish
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue light
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize your theme
   */
  theme?: WHITE_LABEL_THEME;
  /**
   * 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>>;
};

export declare const LANGUAGES: {
  readonly en: "en";
  readonly ja: "ja";
  readonly ko: "ko";
  readonly de: "de";
  readonly zh: "zh";
  readonly es: "es";
  readonly fr: "fr";
  readonly pt: "pt";
  readonly nl: "nl";
  readonly tr: "tr";
};
export type LANGUAGE_TYPE = (typeof LANGUAGES)[keyof typeof LANGUAGES];

export type WHITE_LABEL_THEME = {
  /**
   * `primary` color that represents your brand
   * Will be applied to elements such as primary button, nav tab(selected), loader, input focus, etc.
   */
  primary?: string;
  /**
   * `onPrimary` color that is meant to contrast with the primary color
   * Applies to elements such as the text in a primary button or nav tab(selected), blocks of text on top of a primary background, etc.
   */
  onPrimary?: string;
};

export declare const THEME_MODES: {
  readonly light: "light";
  readonly dark: "dark";
  readonly auto: "auto";
};
export type THEME_MODE_TYPE = (typeof THEME_MODES)[keyof typeof THEME_MODES];

Example

uiConfig: {
  appName: "W3A Heroes",
  appUrl: "https://web3auth.io",
  logoLight: "https://web3auth.io/logo-light.png",
  logoDark: "https://web3auth.io/logo-dark.png",
  defaultLanguage: "en",
  mode: "theme",
  useLogoLoader: true,
},

tip

Read more about Initializing Web3Auth in the Initialization SDK Reference

While initializing the Web3Auth Modal, the initModal() function takes an object with modalConfig as input. This object helps you configure the different adapters available in the Web3Auth Modal. Further, the modalConfig object takes the parameter of loginMethods which helps you configure the social logins and their visibility in the modal.

`initModal()`

`modalConfig`

Table
Interface

modalConfig: { ADAPTER : { params } }

Parameter	Description
`label`	Label of the adapter you want to configure. It's a mandatory field which accepts `string`.
`showOnModal?`	Whether to show an adapter in modal or not. Default value is `true`.
`showOnDesktop?`	Whether to show an adapter in desktop or not. Default value is `true`.
`showOnMobile?`	Whether to show an adapter in mobile or not. Default value is `true`.

Additionally, to configure the Auth Adapter's each login method, we have the loginMethods? parameter.

Parameter	Description
`loginMethods?`	To configure visibility of each social login method for the auth adapter. It accepts `LoginMethodConfig` as a value.

initModal(params?: {
    modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
}): Promise<void>;

interface ModalConfig extends BaseAdapterConfig {
    loginMethods?: LoginMethodConfig;
}

interface BaseAdapterConfig {
    label: string;
    showOnModal?: boolean;
    showOnMobile?: boolean;
    showOnDesktop?: boolean;
}

loginMethods: { label: { params } }

In loginMethods, you can configure the visibility of each social login method for the auth adapter. The social login is corresponded by the label parameter. Below is the table indicating the different params available for customization.

For labels you can choose between these options: google, facebook, twitter, reddit, discord, twitch, apple, line, github, kakao, linkedin, weibo, wechat, email_passwordless

Table
Type Declaration

params

Parameter	Description
`name?`	Display Name. It accepts `string` as a value.
`description?`	Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `string` as a value.
`logoHover?`	Logo to be shown on mouse hover. It accepts `string` as a value.
`logoLight?`	Light logo for dark background. It accepts `string` as a value.
`logoDark?`	Dark logo for light background. It accepts `string` as a value.
`mainOption?`	Show login button on the main list. It accepts `oolean` as a value. Default value is false.
`showOnModal?`	Whether to show the login button on modal or not. Default value is true.
`showOnDesktop?`	Whether to show the login button on desktop. Default value is true.
`showOnMobile?`	Whether to show the login button on mobile. Default value is true.

declare type LoginMethodConfig = Record<
  string,
  {
    /**
     * Display Name. If not provided, we use the default for openlogin app
     */
    name: string;
    /**
     * Description for button. If provided, it renders as a full length button. else, icon button
     */
    description?: string;
    /**
     * Logo to be shown on mouse hover. If not provided, we use the default for openlogin app
     */
    logoHover?: string;
    /**
     * Logo to be shown on dark background (dark theme). If not provided, we use the default for openlogin app
     */
    logoLight?: string;
    /**
     * Logo to be shown on light background (light theme). If not provided, we use the default for openlogin app
     */
    logoDark?: string;
    /**
     * Show login button on the main list
     */
    mainOption?: boolean;
    /**
     * Whether to show the login button on modal or not
     */
    showOnModal?: boolean;
    /**
     * Whether to show the login button on desktop
     */
    showOnDesktop?: boolean;
    /**
     * Whether to show the login button on mobile
     */
    showOnMobile?: boolean;
  }
>;

Example

await web3auth.initModal({
  modalConfig: {
    [WALLET_ADAPTERS.AUTH]: {
      label: "auth",
      loginMethods: {
        google: {
          name: "google login",
          logoDark: "url to your custom logo which will shown in dark mode",
        },
        facebook: {
          // it will hide the facebook option from the Web3Auth modal.
          name: "facebook login",
          showOnModal: false,
        },
      },
      // setting it to false will hide all social login methods from modal.
      showOnModal: true,
    },
  },
});

Auth Adapter

Web3Auth's Social Logins and Email Login run using the Web3Auth Auth Flow. The whole login experience can also be whitelabeled using Auth Adapter settings. For this, you need to pass on the whiteLabel configuration parameter to the adapterSettings property of the auth-adapter.

tip

Checkout the auth-adapter SDK Reference for more details on different configurations you can pass for customizations.

`whiteLabel?: WhiteLabelData;`

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

Table
Interface

WhiteLabelData

Parameter	Description
`appName`	App name to display in the UI
`appUrl`	App url
`logoLight`	App logo to use in light mode
`logoDark`	App logo to use in dark mode
`defaultLanguage`	language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
`mode`	theme
`useLogoLoader`	Use logo loader
`theme`	Used to customize your theme
`tncLink`	Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
`privacyPolicy`	Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure

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
   * tr: turkish
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue light
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize your theme
   */
  theme?: WHITE_LABEL_THEME;
  /**
   * 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>>;
};

export declare const LANGUAGES: {
  readonly en: "en";
  readonly ja: "ja";
  readonly ko: "ko";
  readonly de: "de";
  readonly zh: "zh";
  readonly es: "es";
  readonly fr: "fr";
  readonly pt: "pt";
  readonly nl: "nl";
  readonly tr: "tr";
};
export type LANGUAGE_TYPE = (typeof LANGUAGES)[keyof typeof LANGUAGES];

export type WHITE_LABEL_THEME = {
  /**
   * `primary` color that represents your brand
   * Will be applied to elements such as primary button, nav tab(selected), loader, input focus, etc.
   */
  primary?: string;
  /**
   * `onPrimary` color that is meant to contrast with the primary color
   * Applies to elements such as the text in a primary button or nav tab(selected), blocks of text on top of a primary background, etc.
   */
  onPrimary?: string;
};

export declare const THEME_MODES: {
  readonly light: "light";
  readonly dark: "dark";
  readonly auto: "auto";
};
export type THEME_MODE_TYPE = (typeof THEME_MODES)[keyof typeof THEME_MODES];

`name`

The name of the application. This will be displayed in the key reconstruction page.

Standard screen without any change

Name changed to `Formidable Duo`

`logoLight` & `logoDark`

The logo of the application. Displayed in dark and light mode respectively. This will be displayed in the key reconstruction page.

`logoLight` on dark mode

`logoDark` on light mode

`defaultLanguage`

Default language will set the language used on all OpenLogin screens. The supported languages are:

en - English (default)
de - German
ja - Japanese
ko - Korean
zh - Mandarin
es - Spanish
fr - French
pt - Portuguese
nl - Dutch
tr - Turkish

`dark`

Can be set to true or false with default set to false.

For Light: `dark: false`

For Dark: `dark: true`

`theme`

Theme is a record of colors that can be configured. As of, now only primary color can be set and has effect on OpenLogin screens (default primary color is #0364FF). Theme affects icons and links. Examples below.

Standard color `#0364FF`

Color changed to `#D72F7A`

Example

import { AuthAdapter, WHITE_LABEL_THEME, WhiteLabelData } from "@web3auth/auth-adapter";
import {
  CHAIN_NAMESPACES,
  IProvider,
  UX_MODE,
  WALLET_ADAPTERS,
  WEB3AUTH_NETWORK,
} from "@web3auth/base";

const authAdapter = new AuthAdapter({
  adapterSettings: {
    clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    uxMode: UX_MODE.REDIRECT,
    whiteLabel: {
      appName: "W3A Heroes",
      appUrl: "https://web3auth.io",
      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, tr
      mode: "dark", // whether to enable dark mode. defaultValue: auto
      theme: {
        primary: "#00D1B2",
      } as WHITE_LABEL_THEME,
      useLogoLoader: true,
    } as WhiteLabelData,
  },
  privateKeyProvider,
});
web3auth.configureAdapter(authAdapter);

Example

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.

Table
Interface

Parameter	Description
`appName`	App name to display in the UI
`appUrl`	App url
`logoLight`	App logo to use in light mode
`logoDark`	App logo to use in dark mode
`defaultLanguage`	language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
`mode`	theme
`useLogoLoader`	Use logo loader
`theme`	Used to customize your theme
`tncLink`	Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
`privacyPolicy`	Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure

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
   * tr: turkish
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue light
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize your theme
   */
  theme?: WHITE_LABEL_THEME;
  /**
   * 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>>;
};

export declare const LANGUAGES: {
  readonly en: "en";
  readonly ja: "ja";
  readonly ko: "ko";
  readonly de: "de";
  readonly zh: "zh";
  readonly es: "es";
  readonly fr: "fr";
  readonly pt: "pt";
  readonly nl: "nl";
  readonly tr: "tr";
};
export type LANGUAGE_TYPE = (typeof LANGUAGES)[keyof typeof LANGUAGES];

export declare const THEME_MODES: {
  readonly light: "light";
  readonly dark: "dark";
  readonly auto: "auto";
};
export type THEME_MODE_TYPE = (typeof THEME_MODES)[keyof typeof THEME_MODES];

export type WHITE_LABEL_THEME = {
  /**
   * `primary` color that represents your brand
   * Will be applied to elements such as primary button, nav tab(selected), loader, input focus, etc.
   */
  primary?: string;
  /**
   * `onPrimary` color that is meant to contrast with the primary color
   * Applies to elements such as the text in a primary button or nav tab(selected), blocks of text on top of a primary background, etc.
   */
  onPrimary?: string;
};

WhiteLabelData

`whiteLabel?: WhiteLabelData;`

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

Table
Interface

WhiteLabelData

Parameter	Description
`appName`	App name to display in the UI
`appUrl`	App url
`logoLight`	App logo to use in light mode
`logoDark`	App logo to use in dark mode
`defaultLanguage`	language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
`mode`	theme
`useLogoLoader`	Use logo loader
`theme`	Used to customize your theme
`tncLink`	Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
`privacyPolicy`	Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure

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
   * tr: turkish
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue light
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize your theme
   */
  theme?: WHITE_LABEL_THEME;
  /**
   * 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>>;
};

export declare const LANGUAGES: {
  readonly en: "en";
  readonly ja: "ja";
  readonly ko: "ko";
  readonly de: "de";
  readonly zh: "zh";
  readonly es: "es";
  readonly fr: "fr";
  readonly pt: "pt";
  readonly nl: "nl";
  readonly tr: "tr";
};
export type LANGUAGE_TYPE = (typeof LANGUAGES)[keyof typeof LANGUAGES];

export type WHITE_LABEL_THEME = {
  /**
   * `primary` color that represents your brand
   * Will be applied to elements such as primary button, nav tab(selected), loader, input focus, etc.
   */
  primary?: string;
  /**
   * `onPrimary` color that is meant to contrast with the primary color
   * Applies to elements such as the text in a primary button or nav tab(selected), blocks of text on top of a primary background, etc.
   */
  onPrimary?: string;
};

export declare const THEME_MODES: {
  readonly light: "light";
  readonly dark: "dark";
  readonly auto: "auto";
};
export type THEME_MODE_TYPE = (typeof THEME_MODES)[keyof typeof THEME_MODES];

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

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.AUTH]: {
      label: "auth",
      loginMethods: {
        // Disable facebook and reddit
        facebook: {
          name: "facebook",
          showOnModal: false,
        },
        reddit: {
          name: "reddit",
          showOnModal: false,
        },
      },
    },
  },
});

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.AUTH]: {
      label: "auth",
      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,
    },
  },
});

Plug and Play

Single Factor Auth

MPC Core Kit

Web

Modal SDK

No Modal SDK

Gaming

Unity SDK

Unreal SDK

Mobile

Android SDK

iOS SDK

React Native SDK

Flutter SDK

SFA JS SDK

SFA Android SDK

SFA Swift SDK

SFA Flutter SDK

MPC Core Kit JS SDK

MPC Core Kit React Native SDK

Auth Provider Setup

Dashboard Setup

Infrastructure

Connect Blockchain

Examples

Troubleshooting

Support Forum

Troubleshooting

Talk to Sales

Web3Auth Modal​

NEW: Whitelabeling via the Dashboard​

Whitelabeling while Web3Auth Instantiation​

uiConfig​

WhitelabelData​

whiteLabel?: WhiteLabelData;​

Example​

Whitelabeling while Modal Initialization​

initModal()​

modalConfig​

Example​

Auth Adapter​

whiteLabel?: WhiteLabelData;​

name​

Standard screen without any change

Name changed to Formidable Duo

logoLight & logoDark​

logoLight on dark mode

logoDark on light mode

defaultLanguage​

dark​

For Light: dark: false

For Dark: dark: true

theme​

Standard color #0364FF

Color changed to #D72F7A

Example​

Example​

Arguments​

whiteLabel?: WhiteLabelData;​

Example​

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​

Disable few Social Login Methods​

Disable Email or SMS Login Methods​

Web3Auth Modal

NEW: Whitelabeling via the Dashboard

Whitelabeling while Web3Auth Instantiation

`uiConfig`

`WhitelabelData`

`whiteLabel?: WhiteLabelData;`

Example

Whitelabeling while Modal Initialization

`initModal()`

`modalConfig`

Example

Auth Adapter

`whiteLabel?: WhiteLabelData;`

`name`

Name changed to `Formidable Duo`

`logoLight` & `logoDark`

`logoLight` on dark mode

`logoDark` on light mode

`defaultLanguage`

`dark`

For Light: `dark: false`

For Dark: `dark: true`

`theme`

Standard color `#0364FF`

Color changed to `#D72F7A`

Example

Example

Arguments

`whiteLabel?: WhiteLabelData;`

Example

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

Disable few Social Login Methods

Disable Email or SMS Login Methods

Disable External Wallet Options