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.
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 theauth-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
- 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
- Germanja
- Japaneseko
- Koreanzh
- Mandarines
- Spanishfr
- Frenchpt
- Portuguesenl
- Dutchtr
- 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
.
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,
});