Whitelabel

The Privy React SDK provides complete control over all interfaces for authentication, embedded wallets, and user management. You can customize the user experience to match your brand while maintaining the security and reliability of Privy’s infrastructure.

The fastest way to get started with whitelabeling is to fork our whitelabel starter repository. This template provides a fully customizable foundation that you can build upon.

What you can customize

Authentication flows

Whitelabel login and MFA with your own UI and branding.

Embedded wallets

Create seamless wallet interactions with your own UI components and styling.

User management

Manage user profiles and connect social accounts your way.

Whitelabeling your app

Privy allows developers to choose when to take advantage of Privy’s UI and when to customize the experience with their own UI. This guide walks through how to whitelabel your app.

Authentication

All of Privy’s authentication flows can be whitelabeled, from email and SMS passwordless flows to social logins and passkeys.

To whitelabel Privy’s passwordless email flow, use the useLoginWithEmail hook. Then, call sendCode and loginWithCode with the desired email address.

import {useLoginWithEmail} from '@privy-io/react-auth';

const {sendCode, loginWithCode} = useLoginWithEmail();
sendCode({email: '[email protected]'});
loginWithCode({code: '123456'});

Learn more about email authentication and tracking login flow state.

SMS

To whitelabel the passwordless SMS flow, use the useLoginWithSms hook. Then, call sendCode and loginWithCode with the desired phone number.

import {useLoginWithSms} from '@privy-io/react-auth';

const {sendCode, loginWithCode} = useLoginWithSms();
sendCode({phoneNumber: '+1234567890'});
loginWithCode({code: '123456'});

Learn more about SMS authentication and tracking login flow state.

Social logins

To whitelabel social login, use the useLoginWithSocial hook and call initOAuth with your desired social login provider.

import {useLoginWithSocial} from '@privy-io/react-auth';

const {initOAuth} = useLoginWithSocial();
initOAuth({provider: 'google'});

Learn more about social logins and tracking login flow state.

Passkeys

To whitelabel passkeys, use the useLoginWithPasskey hook and call loginWithPasskey.

import {useLoginWithPasskey} from '@privy-io/react-auth';

const {loginWithPasskey} = useLoginWithPasskey();
loginWithPasskey();

To sign up with a passkey:

import {useSignupWithPasskey} from '@privy-io/react-auth';

const {signupWithPasskey} = useSignupWithPasskey();
signupWithPasskey();

Learn more about passkeys and tracking login flow state.

To whitelabel the Telegram login flow, it’s as simple as using the useLoginWithTelegram hook and calling login.

import {useLoginWithTelegram} from '@privy-io/react-auth';

const {login, state} = useLoginWithTelegram();
login();

Learn more about Telegram authentication and tracking login flow state.

MFA

Wallets

Privy enables developers to whitelabel embedded wallet functionality. You can abstract away wallet UIs entirely or selectively use Privy’s default UI for specific flows.

To whitelabel embedded wallets, you can configure this globally across your app in the PrivyProvider config, or selectively for specific flows at runtime.

Provider config (globally)

In your PrivyProvider config you can control the default wallet UI for all flows in your app.

<PrivyProvider
  appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ''}
  config={{
    embeddedWallets: {
      showWalletUIs: false,
      priceDisplay: {primary: 'native-token', secondary: null}
    }
  }}
>
  <YourApp />
</PrivyProvider>

For more granular control, you can also control wallet UIs for specific flows in the sections below.

Create a wallet

Privy supports whitelabeling wallet creation for Ethereum, Solana, and other chains.

import {useCreateWallet} from '@privy-io/react-auth';

const {createWallet} = useCreateWallet();
createWallet();

import {useCreateWallet} from '@privy-io/react-auth';

const {createWallet} = useCreateWallet();
createWallet();

import {useSolanaWallets} from '@privy-io/react-auth/solana';

const {createWallet} = useSolanaWallets();
createWallet();

import {useCreateWallet} from '@privy-io/react-auth/extended-chains';

const {createWallet} = useCreateWallet();
const {user, wallet} = await createWallet({chainType: 'cosmos'}); // or 'stellar', 'sui', etc.

Signing a message

To whitelabel Privy’s message signing functionality, use the useSignMessage hook and call signMessage with your desired message.

import {useSignMessage} from '@privy-io/react-auth';

const {signMessage} = useSignMessage();
const signature = await signMessage(
  {message: 'Hello, world!'},
  {uiOptions: {showWalletUIs: false}}
);

import {useSignMessage} from '@privy-io/react-auth';

const {signMessage} = useSignMessage();
const signature = await signMessage(
  {message: 'Hello, world!'},
  {uiOptions: {showWalletUIs: false}}
);

import {useSignMessage} from '@privy-io/react-auth/solana';

const {signMessage} = useSignMessage();
signMessage({
  message: 'messageinUint8Array',
  options: {uiOptions: {showWalletUIs: false}}
});

import {useSignRawHash} from '@privy-io/react-auth/extended-chains';

const {signature} = await signRawHash({
  address: 'insert-wallet-address',
  chainType: 'cosmos', // or 'stellar', 'sui', etc.
  hash: '0x1acab030f479bda7829de07e9db4138cec5d38574df17d65af1617b7268541c0'
});

Sending a transaction

To whitelabel Privy’s transaction sending functionality, use the useSendTransaction hook and call sendTransaction with your desired transaction.

import {useSendTransaction} from '@privy-io/react-auth';

const {sendTransaction} = useSendTransaction();
sendTransaction(
  {
    to: '0xE3070d3e4309afA3bC9a6b057685743CF42da77C',
    value: 100000
  },
  {
    uiOptions: {showWalletUIs: false}
  }
);

import {useSendTransaction} from '@privy-io/react-auth';

const {sendTransaction} = useSendTransaction();
sendTransaction(
  {
    to: '0xE3070d3e4309afA3bC9a6b057685743CF42da77C',
    value: 100000
  },
  {
    uiOptions: {showWalletUIs: false}
  }
);

import {useSendTransaction} from '@privy-io/react-auth/solana';

const {sendTransaction} = useSendTransaction();
sendTransaction({
  transaction: 'insert-solana-transaction',
  uiOptions: {showWalletUIs: false}
});

User management

Privy supports whitelabeling user management for linking and unlinking accounts.

Linking a social account

To whitelabel linking social accounts, use the useLinkAccount hook and call link<Provider>.

import {useLinkAccount} from '@privy-io/react-auth';

const {linkGoogle, linkTwitter} = useLinkAccount();
linkGoogle();
linkTwitter();

Unlinking an account

To whitelabel unlinking an account, use the usePrivy hook and call unlink<Provider>.

import {usePrivy} from '@privy-io/react-auth';

const {unlinkEmail, unlinkGoogle, unlinkWallet} = usePrivy();
unlinkEmail();
unlinkGoogle();
unlinkWallet();

Recipes

What you can customize

Authentication flows

Embedded wallets

User management

Whitelabeling your app

Authentication

Wallets

User management

Resources

Whitelabel starter

Whitelabel demo

Recipes

​What you can customize

Authentication flows

Embedded wallets

User management

​Whitelabeling your app

​Authentication

​Wallets

​User management

​Resources

Whitelabel starter

Whitelabel demo

What you can customize

Whitelabeling your app

Authentication

Wallets

User management

Resources