Whitelabel PnP Web No Modal SDK

Web3Auth is fully whitelabelable with application branding to have a consistent user experience. All our SDKs support Whitelabeling, giving granular customization capability across all our offerings. The major benefit of the Plug and Play No Modal SDK is the flexibility in how you can make your own UI for triggering the login. Further, Whitelabeling enables you to customize the other aspects as well.

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 Web3Auth Sapphire Devnet network for free.

NEW: Whitelabeling via the Dashboard

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

• Customize the Logo and App Name: Modify the logo and application name 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.

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

• Auth Adapter: The redirect screens while logging in and constructing the key, can be customized according to your common as well. For this, you need to pass on the whiteLabel configuration parameter to the auth-adapter.
• uiConfig: The UI components can be customized using the uiConfig parameter while initializing the Web3AuthNoModal SDK.

whiteLabel?: WhiteLabelData;

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

Table

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

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

Auth Adapter

Web3Auth's Social Logins and Email Login run using the Auth Flow. The whole Auth user 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.

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

uiConfig

The UI components can be customized using the uiConfig parameter while initializing the Web3AuthNoModal SDK. The uiConfig parameter is a WhiteLabelData object which can be used to customize the UI components.

Example

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { WhiteLabelData } from "@web3auth/base";

const uiConfig: WhiteLabelData = {
  appName: "My App",
  appURL: "https://example.com",
  logoLight: "https://example.com/logo-light.png",
  logoDark: "https://example.com/logo-dark.png",
  defaultLanguage: "en",
  mode: "light",
  useLogoLoader: true,
  theme: {
    primary: "#FF0000",
    secondary: "#00FF00",
    warning: "#FFA500",
  },
  tncLink: "https://example.com/terms",
  privacyPolicy: "https://example.com/privacy",
};

const web3auth = new Web3AuthNoModal({
  clientId: "", // Get your Client ID from the Web3Auth Dashboard
  chainConfig,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider,
  uiConfig,
});