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:

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 `de` - German `ja` - Japanese `ko` - Korean `zh` - Mandarin `es` - Spanish `fr` - French `pt` - Portuguese `nl` - Dutch	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 - German
ja - Japanese
ko - Korean
zh - Mandarin
es - Spanish
fr - French
pt - Portuguese
nl - 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"
        }
      }
    }
  });
}

Unreal

Unreal Whitelabel

Plug and Play

Core Kit

web

Modal SDK

No Modal SDK

gaming

Unity SDK

Unreal SDK

mobile

Android SDK

iOS SDK

React Native SDK

Flutter SDK

Single Factor Auth

SFA Web SDK

SFA Android SDK

SFA iOS SDK

SFA NodeJS SDK

SFA React Native SDK

SFA Flutter SDK

Multi Factor

tKey JS SDK

tKey JS for React Native

tKey Android SDK

tKey iOS SDK

MPC Core Kit Web SDK

Dashboard Setup

Auth Provider Setup

Connect Blockchain

Examples

Blog

Guides

Blog

Guides

References

Schedule a Demo

Community Discussions

Troubleshooting

Arguments​

whiteLabel?: WhiteLabelData;​

name​

Standard screen without any change

Name changed to Formidable Duo

logoLight & logoDark​

logoLight on dark mode

logoDark on light mode

defaultLanguage​

dark​

For Light: dark: false

For Dark: dark: true

theme​

Standard color #0364FF

Color changed to #D72F7A

Example​

Web​

Android​

iOS​

React Native​

Flutter​

Unity​

Unreal​