Whitelabeling the React Native SDK

Embedded Wallets allows complete whitelabeling with application branding for a consistent user experience. You can customize the appearance, branding, and language of the authentication screens opened in the in-app browser.

info

All of these settings can be easily managed directly from the Embedded Wallets dashboard. Once you update your branding, or UI preferences there, the changes will automatically apply to your integration.

note

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.

Configuration

Set branding on the dashboard, or set whiteLabel in web3AuthOptions. Values you pass in code override the dashboard values:

web3authConfig.ts

import {
  CHAIN_NAMESPACES,
  WEB3AUTH_NETWORK,
  type Web3AuthContextConfig,
} from '@web3auth/react-native-sdk'

const web3AuthConfig: Web3AuthContextConfig = {
  web3AuthOptions: {
    clientId: 'YOUR_CLIENT_ID',
    redirectUrl: 'yourapp://auth',
    network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
    chains: [
      {
        chainNamespace: CHAIN_NAMESPACES.EIP155,
        chainId: '0xaa36a7',
        rpcTarget: 'https://ethereum-sepolia-rpc.publicnode.com',
        displayName: 'Ethereum Sepolia Testnet',
        blockExplorerUrl: 'https://sepolia.etherscan.io',
        ticker: 'ETH',
        tickerName: 'Ethereum',
      },
    ],
    defaultChainId: '0xaa36a7',
    whiteLabel: {
      appName: 'My App',
      logoLight: 'https://example.com/logo-light.png',
      logoDark: 'https://example.com/logo-dark.png',
      defaultLanguage: 'en',
      mode: 'auto',
      theme: {
        primary: '#cddc39',
      },
    },
  },
}

export default web3AuthConfig

WhiteLabelData parameters

Parameter	Type	Description
appName?	string	Display name for your app shown on the authentication screens.
appUrl?	string	Your app's URL shown on the authentication screens.
logoLight?	string	Logo URL used in dark mode (light-colored logo).
logoDark?	string	Logo URL used in light mode (dark-colored logo).
defaultLanguage?	LANGUAGE_TYPE	Language for the sign-in screens: en, de, ja, ko, zh, es, fr, pt, nl, tr, or am. The default is en.
mode?	THEME_MODE_TYPE	Color scheme: "auto", "light", or "dark". The default is "light".
theme?	{ primary?: string; onPrimary?: string }	Color overrides. primary sets the accent color and onPrimary the text color on it (hex strings).
useLogoLoader?	boolean	Use your app logo on the loading screen. If no logo is provided, the default Web3Auth logo is used. The default is false.
tncLink?	string	Terms and conditions URL shown on the sign-in screens.
privacyPolicy?	string	Privacy policy URL shown on the sign-in screens.
consentRequired?	boolean	Require the user to accept the terms and privacy policy before signing in.

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

• tr - 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