> ## Documentation Index
> Fetch the complete documentation index at: https://docs.privy.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Whitelabel

Privy enables complete control over user management flows, so you can match every user action to your app's brand and experience. Build your own UI for linking and unlinking accounts, managing user profiles, and more, while Privy handles the backend logic securely.

<View title="React" icon="react">
  Privy supports whitelabeling user management for linking and unlinking accounts.

  <Accordion title="Linking a social account">
    To whitelabel linking social accounts, use the `useLinkAccount` hook and call `link<Provider>`.

    ```tsx theme={"system"}
    import {useLinkAccount} from '@privy-io/react-auth';
    ```

    ```tsx theme={"system"}
    const {linkGoogle, linkTwitter} = useLinkAccount();
    linkGoogle();
    linkTwitter();
    ```
  </Accordion>

  <Accordion title="Linking an additional OAuth account">
    To link [additional OAuth providers](/authentication/user-authentication/login-methods/custom-oauth) that are not natively supported by Privy, use the `linkOAuth` method from the `useLinkAccount` hook. For built-in providers like Google or Twitter, use the dedicated methods (e.g., `linkGoogle`, `linkTwitter`).

    ```tsx theme={"system"}
    import {useLinkAccount} from '@privy-io/react-auth';
    ```

    ```tsx theme={"system"}
    const {linkOAuth} = useLinkAccount();
    linkOAuth({provider: 'custom:twitch'});
    ```

    ### Parameters

    The `linkOAuth` method accepts an object with the following fields:

    <ParamField path="provider" type="string" required>
      The additional OAuth provider to link, in the format `'custom:<provider-name>'` (e.g., `'custom:twitch'`).
    </ParamField>

    ### Usage

    ```tsx theme={"system"}
    import {useLinkAccount} from '@privy-io/react-auth';

    function LinkTwitchButton() {
      const {linkOAuth} = useLinkAccount({
        onSuccess: ({user, linkMethod, linkedAccount}) => {
          console.log('Linked account:', linkedAccount);
        },
        onError: (error) => {
          console.error('Failed to link account:', error);
        }
      });

      return (
        <button onClick={() => linkOAuth({provider: 'custom:twitch'})}>Link Twitch account</button>
      );
    }
    ```
  </Accordion>

  <Accordion title="Linking a wallet">
    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.

    <Tabs>
      <Tab title="Ethereum (SIWE)">
        To link an Ethereum wallet to a user via [SIWE](https://eips.ethereum.org/EIPS/eip-4361), use the React SDK's `useLinkWithSiwe` hook.

        ### Generate SIWE message

        ```tsx theme={"system"}
        generateSiweMessage({ address: string, chainId: string }) => Promise<string>
        ```

        <Expandable title="Parameters">
          <ParamField path="address" type="string" required>
            EIP-55 checksum-encoded wallet address performing the signing.
          </ParamField>

          <ParamField path="chainId" type="string" required>
            The chain ID to which the session is bound, in [CAIP-2 format](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-2.md), e.g. `'eip155:1'`.
          </ParamField>
        </Expandable>

        ### Sign the SIWE message

        Request an EIP-191 `personal_sign` signature for the `message` returned by `generateSiweMessage` from the wallet.

        ```tsx theme={"system"}
        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:

        ```tsx theme={"system"}
        const signature = await wallet.signMessage({message});
        ```

        ### Link with SIWE

        ```tsx theme={"system"}
        linkWithSiwe({
          signature: string,
          message: string,
          chainId: string,
          walletClientType?: string,
          connectorType?: string
        }) => Promise<void>
        ```

        <Expandable title="Parameters">
          <ParamField path="signature" type="string" required>
            The EIP-191 signature corresponding to the message.
          </ParamField>

          <ParamField path="message" type="string" required>
            The EIP-4361 message returned by `generateSiweMessage`.
          </ParamField>

          <ParamField path="chainId" type="string" required>
            The same [CAIP-2 formatted](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-2.md)
            chain ID you passed to `generateSiweMessage`, e.g. `'eip155:1'`.
          </ParamField>

          <ParamField path="walletClientType" type="string">
            Optional. The wallet client of the external wallet (e.g., `'metamask'`, `'coinbase_wallet'`).
            Defaults to `null` if not specified.
          </ParamField>

          <ParamField path="connectorType" type="string">
            Optional. The method used to connect the wallet to the application (e.g., `'injected'`, `'wallet_connect_v2'`). Defaults to `null` if not specified.
          </ParamField>
        </Expandable>

        ### Usage

        ```tsx theme={"system"}
        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`:

        ```tsx theme={"system"}
        const {generateSiweMessage, linkWithSiwe} = useLinkWithSiwe({
          onSuccess: ({user, linkMethod, linkedAccount}) => {
            console.log('Wallet linked successfully', linkedAccount);
          },
          onError: (error) => {
            console.error('Failed to link wallet', error);
          }
        });
        ```
      </Tab>

      <Tab title="Solana (SIWS)">
        To link a Solana wallet to a user via [SIWS](https://github.com/phantom/sign-in-with-solana), use the React SDK's `useLinkWithSiws` hook.

        ### Generate SIWS message

        ```tsx theme={"system"}
        generateSiwsMessage({ address: string }) => Promise<string>
        ```

        <Expandable title="Parameters">
          <ParamField path="address" type="string" required>
            The Solana wallet address performing the signing.
          </ParamField>
        </Expandable>

        ### Sign the SIWS message

        Request a signature for the `message` returned by `generateSiwsMessage` from the Solana wallet. The message needs to be encoded as Uint8Array for signing.

        ```tsx theme={"system"}
        import {useWallets} from '@privy-io/react-auth/solana';

        const {wallets} = useWallets();
        const encodedMessage = new TextEncoder().encode(message);
        const results = await wallets[0].signMessage({message: encodedMessage});
        ```

        ### Link with SIWS

        ```tsx theme={"system"}
        linkWithSiws({
          message: string,
          signature: string,
          walletClientType?: string,
          connectorType?: string
        }) => Promise<{ user: User; linkedAccount: LinkedAccountWithMetadata | null }>
        ```

        <Expandable title="Parameters">
          <ParamField path="message" type="string" required>
            The SIWS message returned from `generateSiwsMessage`.
          </ParamField>

          <ParamField path="signature" type="string" required>
            The signature corresponding to the message. Convert the signature bytes from the wallet's
            `signMessage` method to a base64-encoded string using
            `Buffer.from(results.signature).toString('base64')`.
          </ParamField>

          <ParamField path="walletClientType" type="string">
            Optional. A string indicating the wallet client you'd like to associate with the wallet. Defaults
            to `'privy'`.
          </ParamField>

          <ParamField path="connectorType" type="string">
            Optional. A string indicating the connector type you'd like to associate with the wallet. Defaults to `'privy'`.
          </ParamField>
        </Expandable>

        ### Usage

        ```tsx theme={"system"}
        import {useLinkWithSiws} from '@privy-io/react-auth';
        import {useWallets} from '@privy-io/react-auth/solana';

        export function LinkSolanaWalletButton() {
          const {generateSiwsMessage, linkWithSiws} = useLinkWithSiws();
          const {wallets} = useWallets();

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

            const message = await generateSiwsMessage({
              address: activeWallet.address
            });

            const encodedMessage = new TextEncoder().encode(message);
            const results = await activeWallet.signMessage({message: encodedMessage});

            // Convert signature bytes to string (base64)
            const signatureBase64 = Buffer.from(results.signature).toString('base64');

            await linkWithSiws({
              message,
              signature: signatureBase64
            });
          };

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

        ### Callbacks

        You can optionally pass callbacks into `useLinkWithSiws`:

        ```tsx theme={"system"}
        const {generateSiwsMessage, linkWithSiws} = useLinkWithSiws({
          onSuccess: ({user, linkMethod, linkedAccount}) => {
            console.log('Solana wallet linked successfully', linkedAccount);
          },
          onError: (error) => {
            console.error('Failed to link Solana wallet', error);
          }
        });
        ```
      </Tab>
    </Tabs>
  </Accordion>

  <Accordion title="Updating an email">
    To whitelabel updating a user's email address, use the `useUpdateEmail` hook:

    ```tsx theme={"system"}
    import {useUpdateEmail} from '@privy-io/react-auth';

    const {state, sendCode, verifyCode} = useUpdateEmail();
    ```

    ### Send an OTP

    First, use the `sendCode` method to send an OTP verification code to the user's new email address:

    ```tsx theme={"system"}
    sendCode: ({newEmailAddress: string}) => Promise<void>;
    ```

    <Expandable title="Parameters">
      <ParamField path="newEmailAddress" type="string" required>
        The new email address to send the verification code to.
      </ParamField>
    </Expandable>

    This sends a one-time passcode to the new email address, which the user must enter to verify and confirm the update.

    ### Verify the OTP

    Prompt the user for the OTP they received and verify it using the `verifyCode` method:

    ```tsx theme={"system"}
    verifyCode: ({code: string}) => Promise<{user: User} | undefined>;
    ```

    <Expandable title="Parameters">
      <ParamField path="code" type="string" required>
        The one-time code received on the new email address.
      </ParamField>
    </Expandable>

    <Expandable title="Returns">
      <ResponseField name="user" type="User">
        The updated user object if the update was successful.
      </ResponseField>
    </Expandable>

    ### State

    The `state` property provides the current state of the OTP flow:

    | Status                  | Description                                   |
    | ----------------------- | --------------------------------------------- |
    | `'initial'`             | The flow has not started                      |
    | `'sending-code'`        | The code is being sent                        |
    | `'awaiting-code-input'` | Waiting for the user to enter the code        |
    | `'submitting-code'`     | The code is being verified                    |
    | `'done'`                | The email was updated successfully            |
    | `'error'`               | An error occurred (includes an `error` field) |

    ### Usage

    ```tsx theme={"system"}
    import {useState} from 'react';
    import {useUpdateEmail} from '@privy-io/react-auth';

    function UpdateEmailForm() {
      const {state, sendCode, verifyCode} = useUpdateEmail();
      const [newEmailAddress, setNewEmailAddress] = useState('');
      const [code, setCode] = useState('');

      if (state.status === 'initial' || state.status === 'sending-code') {
        return (
          <div>
            <input
              type="email"
              value={newEmailAddress}
              onChange={(e) => setNewEmailAddress(e.target.value)}
              placeholder="New email address"
            />
            <button
              onClick={() => sendCode({newEmailAddress})}
              disabled={state.status === 'sending-code'}
            >
              Send code
            </button>
          </div>
        );
      }

      return (
        <div>
          <input
            value={code}
            onChange={(e) => setCode(e.target.value)}
            placeholder="Enter verification code"
          />
          <button onClick={() => verifyCode({code})} disabled={state.status === 'submitting-code'}>
            Verify
          </button>
        </div>
      );
    }
    ```

    ### Callbacks

    You can optionally pass callbacks into `useUpdateEmail`:

    ```tsx theme={"system"}
    const {state, sendCode, verifyCode} = useUpdateEmail({
      onSuccess: ({user, updateMethod, updatedAccount}) => {
        console.log('Email updated successfully', user);
      },
      onError: (error, details) => {
        console.error('Failed to update email', error, details);
      }
    });
    ```

    <Expandable title="Callback parameters">
      <ParamField path="onSuccess" type="({user: User, updateMethod: string, updatedAccount: LinkedAccountType}) => void">
        Optional callback that executes after a successful email update. Receives the updated user object, the update method (`'email'`), and the updated account.
      </ParamField>

      <ParamField path="onError" type="(error: PrivyErrorCode, details: {linkMethod: string}) => void">
        Optional callback that executes if there is an error during the email update flow.
      </ParamField>
    </Expandable>
  </Accordion>

  <Accordion title="Linking a custom JWT account">
    To link a custom JWT account to an existing user, use the `useLinkJwtAccount` hook. This is useful for integrating with external authentication systems that issue JWTs.

    ```tsx theme={"system"}
    import {useLinkJwtAccount} from '@privy-io/react-auth';
    ```

    ```tsx theme={"system"}
    const {linkWithCustomJwt, state} = useLinkJwtAccount();
    ```

    ### Link with custom JWT

    ```tsx theme={"system"}
    linkWithCustomJwt(jwt: string) => Promise<{user: User}>
    ```

    <ParamField path="jwt" type="string" required>
      The JWT token from your external authentication system to link to the user's account.
    </ParamField>

    ### State

    The `state` property tracks the current state of the JWT linking flow:

    | Status          | Description                                 |
    | --------------- | ------------------------------------------- |
    | `'initial'`     | The flow has not started                    |
    | `'loading'`     | The JWT is being verified and linked        |
    | `'not-enabled'` | Custom JWT auth is not enabled for this app |
    | `'done'`        | The account was linked successfully         |
    | `'error'`       | An error occurred                           |

    ### Callbacks

    You can optionally pass callbacks into `useLinkJwtAccount`:

    ```tsx theme={"system"}
    const {linkWithCustomJwt, state} = useLinkJwtAccount({
      onSuccess: ({user, linkMethod, linkedAccount}) => {
        console.log('JWT account linked successfully', linkedAccount);
      },
      onError: (error) => {
        console.error('Failed to link JWT account', error);
      }
    });
    ```

    ### Usage

    ```tsx theme={"system"}
    import {useLinkJwtAccount} from '@privy-io/react-auth';

    function LinkJwtAccountButton() {
      const {linkWithCustomJwt, state} = useLinkJwtAccount({
        onSuccess: ({user, linkedAccount}) => {
          console.log('Account linked:', linkedAccount);
        },
        onError: (error) => {
          console.error('Link failed:', error);
        }
      });

      const handleLink = async () => {
        const jwt = await getJwtFromExternalAuth();
        await linkWithCustomJwt(jwt);
      };

      return (
        <button onClick={handleLink} disabled={state.status === 'loading'}>
          Link External Account
        </button>
      );
    }
    ```

    <Note>
      Custom JWT authentication must be enabled in your Privy Dashboard before using this hook. See the
      [JWT-based authentication documentation](/authentication/user-authentication/jwt-based-auth/setup)
      for setup instructions.
    </Note>
  </Accordion>

  <Accordion title="Unlinking an account">
    To whitelabel unlinking an account, use the dedicated unlink hooks from `@privy-io/react-auth`:

    ```tsx theme={"system"}
    import {useUnlinkEmail, useUnlinkWallet, useUnlinkOAuth} from '@privy-io/react-auth';
    ```

    ```tsx theme={"system"}
    const {unlink: unlinkEmail} = useUnlinkEmail();
    const {unlink: unlinkWallet} = useUnlinkWallet();
    const {unlink: unlinkOAuth} = useUnlinkOAuth();

    // Unlink by passing the relevant identifier
    unlinkEmail({address: 'user@example.com'});
    unlinkOAuth({provider: 'google', subject: 'google-subject-id'});
    unlinkWallet({address: '0x...'});
    ```

    See the [unlinking accounts guide](/user-management/users/unlinking-accounts) for the full list of available hooks and parameters.
  </Accordion>

  <Accordion title="Unlinking an OAuth account">
    To unlink any OAuth provider, including built-in providers (e.g., `'google'`, `'twitter'`) and [additional OAuth providers](/authentication/user-authentication/login-methods/custom-oauth) (e.g., `'custom:twitch'`), use the `useUnlinkOAuth` hook.

    ```tsx theme={"system"}
    import {useUnlinkOAuth} from '@privy-io/react-auth';
    ```

    ```tsx theme={"system"}
    const {unlink: unlinkOAuth} = useUnlinkOAuth();
    unlinkOAuth({provider: 'custom:twitch', subject: '12345'});
    ```

    ### Parameters

    The `unlink` method from `useUnlinkOAuth` accepts an object with the following fields:

    <ParamField path="provider" type="string" required>
      The OAuth provider to unlink. Use a built-in provider (e.g., `'google'`, `'twitter'`) or a custom provider in the format `'custom:<provider-name>'` (e.g., `'custom:twitch'`).
    </ParamField>

    <ParamField path="subject" type="string" required>
      The provider-specific subject identifier that uniquely identifies the user for the selected OAuth
      provider. This can be found in the linked account's `subject` field.
    </ParamField>

    ### Usage

    ```tsx theme={"system"}
    import {usePrivy} from '@privy-io/react-auth';
    import {useUnlinkOAuth} from '@privy-io/react-auth';

    function UnlinkTwitchButton() {
      const {user} = usePrivy();
      const {unlink: unlinkOAuth} = useUnlinkOAuth();

      // Find the custom OAuth account to unlink
      const twitchAccount = user?.linkedAccounts?.find((account) => account.type === 'custom:twitch');

      const handleUnlink = () => {
        if (twitchAccount) {
          unlinkOAuth({
            provider: 'custom:twitch',
            subject: twitchAccount.subject
          });
        }
      };

      return (
        <button onClick={handleUnlink} disabled={!twitchAccount}>
          Unlink Twitch account
        </button>
      );
    }
    ```
  </Accordion>
</View>

<View title="React Native" icon="react">
  Privy's React Native SDK is whitelabel by default allowing your app to build your own user
  management UI and flows using the SDK's functions. Get started with linking a social account
  [here](/user-management/users/linking-accounts#react-native).
</View>

<View title="Android" icon="android">
  Privy's Android SDK is whitelabel by default, enabling apps to implement custom user management
  UI and flows using the SDK's functions. Get started with linking a social account
  [here](/user-management/users/linking-accounts#android).
</View>

<View title="Swift" icon="swift">
  Privy's Swift SDK is whitelabel by default, enabling apps to implement custom user management UI
  and flows using the SDK's functions. Get started with linking a social account
  [here](/user-management/users/linking-accounts#swift).
</View>