Skip to main content

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.

Web3Auth - User Flow Screens

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:

WhiteLabelData

ParameterTypeDescriptionDefaultMandatory
appName?stringApp name to be displayed in the User Flow Screens.dApp's Website URLNo
appUrl?stringApp URL to be displayed in the User Flow Screens.dApp's Website URLNo
logoLight?stringApp logo to be shown on the dark background (dark theme)web3auth-logo.svgNo
logoDark?stringApp logo to be shown on the light background (light theme)web3auth-logo.svgNo
defaultLanguage?stringDefault Language to use.
Choose from:
  • en - English
  • de - German
  • ja - Japanese
  • ko - Korean
  • zh - Mandarin
  • es - Spanish
  • fr - French
  • pt - Portuguese
  • nl - Dutch
en - EnglishNo
mode?stringChoose between auto, light or dark modes.autoNo
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
#0364FFNo
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"}noneNo
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", }noneNo

name

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

Standard screen without any change

Standard screen without any change

Name changed to Formidable Duo

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

logoLight on dark mode

logoDark on light 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
default Language screen

dark

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


For Light: dark: false

light theme

For Dark: dark: true

dark theme

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

Theme is a record of colors which can be configured.

Color changed to #D72F7A

Theme affects icons and links.

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

Unreal

Unreal Whitelabel