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
- Interface
Parameter | Type | Description | Mandatory | Default |
---|---|---|---|---|
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? | string | Z-index of the modal and iframe | No | "99998" |
displayErrorsOnModal? | boolean | Whether to show errors on Web3Auth modal. | No | true |
loginGridCol? | 2 or 3 | Number of columns to display the Social Login buttons. | No | 3 |
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. | No | socialLogin |
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 displayed as primary button in modal
* only one button will be primary and other buttons in modal will be secondary
*
* @defaultValue `socialLogin`
*/
primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
}
WhiteLabelData
whiteLabel?: WhiteLabelData;
The whitelabel parameter takes WhitelabelData
as input. The WhitelabelData
object takes the following parameters:
- Table
- Interface
WhiteLabelData
Parameter | Type | Description | Default | Mandatory |
---|---|---|---|---|
appName? | string | App name to be displayed in the User Flow Screens. | dApp's Website URL | No |
appUrl? | string | App URL to be displayed in the User Flow Screens. | dApp's Website URL | No |
logoLight? | string | App logo to be shown on the dark background (dark theme) | web3auth-logo.svg | No |
logoDark? | string | App logo to be shown on the light background (light theme) | web3auth-logo.svg | No |
defaultLanguage? | string | Default Language to use. Choose from:
| en - English | No |
mode? | string | Choose between auto , light or dark modes. | auto | No |
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 | #0364FF | No |
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"} | none | No |
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", } | none | No |
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/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
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,
},
},
});