> For the complete documentation index, see [llms.txt](/llms.txt).

# 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.

![Branding page on the MetaMask Developer Dashboard](/img/embedded-wallets/whitelabel/modal/branding.png)

note

This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) 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[​](#configuration "Direct link to Configuration")

Set `whiteLabel` inside `web3AuthOptions` in your `web3authConfig.ts`:

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://rpc.ankr.com/eth_sepolia',
        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[​](#whitelabeldata-parameters "Direct link to 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 authentication UI. Supported: en, de, ja, ko, zh, es, fr, pt, nl. Defaults to en.                     |
| mode?            | THEME_MODE_TYPE                        | Color scheme: "auto", "light", or "dark". Defaults to "auto".                                                          |
| theme?           | Record<string, string>                 | Custom color overrides. primary sets the accent color (hex string).                                                    |
| useLogoLoader?   | boolean                                | Use your app logo on the loading screen. If no logo is provided, the default Web3Auth logo is used. Defaults to false. |
| tncLink?         | Partial<Record<LANGUAGE_TYPE, string>> | Language-keyed Terms and Conditions URL (for example, { en: "https://example.com/tnc" }).                              |
| privacyPolicy?   | Partial<Record<LANGUAGE_TYPE, string>> | Language-keyed Privacy Policy URL.                                                                                     |

### `name`[​](#name "Direct link to 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](/assets/images/whitelabel-web3auth-openlogin-theme1-896362b715c0f7324f7cf39e784d3c5c.png)

#### 

Name changed to `Formidable Duo`

![Name changed to Formidable Duo](/assets/images/whitelabel-web3auth-openlogin-theme2-a05a1b2998ac4f470b25d69a2610980c.png)

  
### `logoLight` & `logoDark`[​](#logolight--logodark "Direct link to 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](/assets/images/whitelabel-web3auth-openlogin-logo-light-dc8b10a3125f44faa0fafeeb0e646e0b.png)

#### 

`logoDark` on light mode

![logoDark on light mode](/assets/images/whitelabel-web3auth-openlogin-logo-dark-52289aa1ccb299e8acfd6c3ea1cf1b86.png)

  
### `defaultLanguage`[​](#defaultlanguage "Direct link to 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

![default Language screen](/assets/images/whitelabel-web3auth-openlogin-language-73edccdb50344cd84746f04fcbf92b35.png)

  
### `dark`[​](#dark "Direct link to dark")

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

  
#### 

For Light: `dark: false`

![light theme](/assets/images/whitelabel-web3auth-openlogin-light-fc03591b15a4150268aa198c9aeb7a3c.png)

#### 

For Dark: `dark: true`

![dark theme](/assets/images/whitelabel-web3auth-openlogin-dark-43e011bb3d7b7ef1314d9e38124f4f8a.png)

  
### `theme`[​](#theme "Direct link to 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`

![Theme is a record of colors that can be configured.](/assets/images/whitelabel-web3auth-openlogin-theme1-896362b715c0f7324f7cf39e784d3c5c.png)

#### 

Color changed to `#D72F7A`

![Theme affects icons and links.](/assets/images/whitelabel-web3auth-openlogin-theme2-a05a1b2998ac4f470b25d69a2610980c.png)