User Flow Screens
Web3Auth's User Flow Screens can be customized to match a dApp's branding using the OpenLoginAdapter
settings, providing more options for a
personalized user experience.
Arguments
You can pass the whiteLabel
parameters to OpenLoginAdapter
with @web3auth/modal
, @web3auth/no-modal
and even to Mobile & Gaming SDKs to
whitelabel the Web3Auth's User Flow Screens.
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>>;
};
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
- Dutch

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 which 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
Web
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
network: "sapphire_mainnet", // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
uxMode: "popup",
whiteLabel: {
appName: "W3A Heroes",
appUrl: "https://web3auth.io",
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
mode: "dark", // whether to enable dark mode. defaultValue: auto
theme: {
primary: "#00D1B2",
},
useLogoLoader: true,
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
Android
web3Auth = Web3Auth (
Web3AuthOptions (
context = this,
clientId = getString (R.string.web3auth_project_id),
network = Network.MAINNET,
redirectUrl = Uri.parse ("{YOUR_APP_PACKAGE_NAME}://auth"),
// Optional whitelabel object
whiteLabel = WhiteLabelData (
name = "Web3Auth Android Sample App",
logoLight = "https://images.web3auth.io/web3auth-logo-w.svg",
logoDark = "https://images.web3auth.io/web3auth-logo-w.svg",
defaultLanguage = "en",
dark = true,
theme = hashMapOf (
"primary" to "#229954"
)
)
)
)
iOS
web3Auth = await Web3Auth(
W3AInitParams(
clientId:"YOUR_WEB3AUTH_CLIENT_ID",
network: .testnet,
whiteLabel: W3AWhiteLabelData(
name: "Web3Auth iOS Sample App",
logoLight: "https://images.web3auth.io/web3auth-logo-w.svg",
logoDark: "https://images.web3auth.io/web3auth-logo-w.svg",
defaultLanguage: "en",
dark: true,
theme: ["primary": "#229954"])
))
React Native
import * as WebBrowser from "@toruslabs/react-native-web-browser";
// or import * as WebBrowser from "expo-web-browser"; // (for expo)
const web3auth = new Web3Auth(WebBrowser, {
clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
network: Network.TESTNET,
whiteLabel: {
name: "Web3Auth ReactNative Sample App",
logoLight: "https://images.web3auth.io/web3auth-logo-w.svg",
logoDark: "https://images.web3auth.io/web3auth-logo-w.svg",
defaultLanguage: "en",
dark: true,
theme: {
primary: "#229954",
},
},
});
Flutter
Future<void> initPlatformState() async {
final themeMap = HashMap<String, String>();
themeMap['primary'] = "#229954";
Uri redirectUrl;
if (Platform.isAndroid) {
redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
// w3a://com.example.w3aflutter/auth
} else if (Platform.isIOS) {
redirectUrl = Uri.parse('{bundleId}://openlogin');
// com.example.w3aflutter://openlogin
} else {
throw UnKnownException('Unknown platform');
}
await Web3AuthFlutter.init(Web3AuthOptions(
clientId: "WEB3AUTH_CLIENT_ID",
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
name: "Web3Auth Flutter App",
logoLight: "https://images.web3auth.io/web3auth-logo-w.svg",
logoDark: "https://images.web3auth.io/web3auth-logo-w.svg",
defaultLanguage: "en",
dark: true,
theme: themeMap)
));
}
Unity
void Start()
{
web3Auth = GetComponent<Web3Auth>();
web3Auth.setOptions(new Web3AuthOptions()
{
redirectUrl = new Uri("torusapp://com.torus.Web3AuthUnity/auth"),
clientId = "BAwFgL-r7wzQKmtcdiz2uHJKNZdK7gzEf2q-m55xfzSZOw8jLOyIi4AVvvzaEQO5nv2dFLEmf9LBkF8kaq3aErg",
network = Web3Auth.Network.TESTNET,
whiteLabel = new WhiteLabelData() {
name = "Web3Auth Sample App",
logoLight = "https://images.web3auth.io/web3auth-logo-w.svg",
logoDark = "https://images.web3auth.io/web3auth-logo-w.svg",
defaultLanguage = "en",
dark = true,
theme = new Dictionary < string, string > {
{
"primary",
"#229954"
}
}
}
});
}