Sub-organization customization

Learn how to customize the sub-organization creation process in your React app.

Overview

The Embedded Wallet Kit allows you to customize the sub-organization creation process in your React application. This is useful if you want to create a more tailored experience for your users, including automatically creating wallets, having multiple authentication methods, default usernames, and more. These can be individually configured for each authentication method.

Customization

You can customize the createSuborgParams object inside the auth object in the TurnkeyProvider configuration. This object allows you to set various parameters for the sub-organization creation process.

Each authentication method can have its own set of parameters. For example, you can set a different default userName for emailOtpAuth and passkeyAuth methods, or create different wallets for each authentication method.

import {
  TurnkeyProvider,
  TurnkeyProviderConfig,
} from "@turnkey/react-wallet-kit";
import "@turnkey/react-wallet-kit/styles.css";

function App() {
  const turnkeyConfig: TurnkeyProviderConfig = {
    //... your existing configuration
    auth: {
      createSuborgParams: {
        emailOtpAuth: {
          userName: "An email user",
          customWallet: {
            walletName: "Email Wallet",
            walletAccounts: [
              // This will create one Ethereum wallet account for users that sign up with email OTP
              {
                curve: "CURVE_SECP256K1",
                pathFormat: "PATH_FORMAT_BIP32",
                path: `m/44'/60'/0'/0/0`,
                addressFormat: "ADDRESS_FORMAT_ETHEREUM",
              },
            ],
          },
        },
        passkeyAuth: {
          userName: "A passkey user",
          customWallet: {
            walletName: "Passkey Wallet",
            walletAccounts: [
              // This will create one Solana wallet account for users that sign up with passkeys
              {
                curve: "CURVE_ED25519",
                pathFormat: "PATH_FORMAT_BIP32",
                path: `m/44'/501'/0'/0'`,
                addressFormat: "ADDRESS_FORMAT_SOLANA",
              },
            ],
          },
        },
      },
    },
  };

  return <TurnkeyProvider config={turnkeyConfig}>{children}</TurnkeyProvider>;
}

Or, you can set the same parameters for all authentication methods:

import {
  TurnkeyProvider,
  TurnkeyProviderConfig,
  CreateSubOrgParams,
} from "@turnkey/react-wallet-kit";
import "@turnkey/react-wallet-kit/styles.css";

function App() {
  const suborgParams: CreateSubOrgParams = {
    userName: `User-${new Date().getTime()}`,
    customWallet: {
      walletName: `Wallet-${new Date().getTime()}`,
      walletAccounts: [
        // All users that sign up will have this wallet created
        {
          curve: "CURVE_SECP256K1",
          pathFormat: "PATH_FORMAT_BIP32",
          path: `m/44'/60'/0'/0/0`,
          addressFormat: "ADDRESS_FORMAT_ETHEREUM",
        },
      ],
    },
  };

  const turnkeyConfig: TurnkeyProviderConfig = {
    //... your existing configuration
    auth: {
      createSuborgParams: {
        emailOtpAuth: suborgParams,
        smsOtpAuth: suborgParams,
        passkeyAuth: { ...suborgParams, passkeyName: "My Passkey" }, // For passkey authentication, you can also set a custom name for the passkey (optional)
        walletAuth: suborgParams,
        oauth: suborgParams,
      },
    },
  };

  return <TurnkeyProvider config={turnkeyConfig}>{children}</TurnkeyProvider>;
}

For a complete list of available parameters, check out the SDK Reference, or inspect the CreateSubOrgParams interface.

Next steps

Now that you know how to customize the sub-orgs created in your React application, check out the Advanced API Requests guide to learn how to make advanced API requests to Turnkey’s infrastructure. This will help you build more complex features and functionalities in your app that go beyond what is included as helper functions in the SDK.