Skip to main content
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.

Email

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.
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.
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.
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();
To link a passkey to an existing user:
import {useLinkWithPasskey} from '@privy-io/react-auth';

const {linkWithPasskey} = useLinkWithPasskey();
linkWithPasskey();
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.
To whitelabel MFA with SMS, TOTP, or passkeys, follow the custom UI guide.

​
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.
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.
  • Ethereum
  • Solana
  • Other chains
import {useCreateWallet} from '@privy-io/react-auth';

const {createWallet} = useCreateWallet();
createWallet();
To whitelabel Privy’s message signing functionality, use the useSignMessage hook and call signMessage with your desired message.
  • Ethereum
  • Solana
  • Other chains
import {useSignMessage} from '@privy-io/react-auth';

const {signMessage} = useSignMessage();
const signature = await signMessage(
  {message: 'Hello, world!'},
  {uiOptions: {showWalletUIs: false}}
);
To whitelabel Privy’s transaction sending functionality, use the useSendTransaction hook and call sendTransaction with your desired transaction.
  • Ethereum
  • Solana
import {useSendTransaction} from '@privy-io/react-auth';

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

​
User management

Privy supports whitelabeling user management for linking and unlinking accounts.
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();
To whitelabel linking wallets, use the useLinkWithSiwe hook for Ethereum wallets or useLinkWithSiws hook for Solana wallets. These hooks allow you to generate messages, request signatures, and link wallets without using Privy’s modal UI.
  • Ethereum (SIWE)
  • Solana (SIWS)
To link an Ethereum wallet to a user via SIWE, use the React SDK’s useLinkWithSiwe hook.

​
Generate SIWE message

generateSiweMessage({ address: string, chainId: string }) => Promise<string>

​
Sign the SIWE message

Request an EIP-191 personal_sign signature for the message returned by generateSiweMessage from the wallet.
import {useWallets} from '@privy-io/react-auth';

const {wallets} = useWallets();
const signature = await wallets[0].sign(message);
Alternatively, you can request a signature from any external wallet or smart account:
const signature = await wallet.signMessage({message});

linkWithSiwe({
  signature: string,
  message: string,
  chainId: string,
  walletClientType?: string,
  connectorType?: string
}) => Promise<void>

​
Usage

import {useLinkWithSiwe, useWallets} from '@privy-io/react-auth';

export function LinkWalletButton() {
  const {generateSiweMessage, linkWithSiwe} = useLinkWithSiwe();
  const {wallets} = useWallets();

  const handleLink = async () => {
    if (!wallets?.length) return;
    const activeWallet = wallets[0];

    const message = await generateSiweMessage({
      address: activeWallet.address,
      chainId: 'eip155:1'
    });

    const signature = await activeWallet.sign(message);
    await linkWithSiwe({
      message,
      chainId: 'eip155:1',
      signature
    });
  };

  return <button onClick={handleLink}>Link wallet</button>;
}

​
Callbacks

You can optionally pass callbacks into useLinkWithSiwe:
const {generateSiweMessage, linkWithSiwe} = useLinkWithSiwe({
  onSuccess: ({user, linkMethod, linkedAccount}) => {
    console.log('Wallet linked successfully', linkedAccount);
  },
  onError: (error) => {
    console.error('Failed to link wallet', error);
  }
});
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();

​
Resources

Whitelabel starter

Fork our starter repository to begin building your custom Privy integration.

Whitelabel demo

See a live demo of a whitelabeled app.