Skip to main content
⚠️ This example is outdated !
Head over to SDK Reference for the updated packages.

Initialize

Begin by initializing the Turnkey SDK by passing in a config object containing:
  • apiBaseUrl: The base URL of the Turnkey API: https://api.turnkey.com.
  • defaultOrganizationId: Your parent organization ID, which you can find in the Turnkey dashboard.
  • wallet: The wallet interface used to sign requests. In this example, we’ll use the EthereumWallet interface.
config.ts
First, wrap your application with the TurnkeyProvider in your app/layout.tsx file. As this file is required by Next.js to be a server component, we need to define a TurnkeyClientProvider client component.
app/TurnkeyClientProvider.tsx
app/layout.tsx
Then, create a new page component app/page.tsx where we’ll implement the wallet authentication functionality:
app/page.tsx

Sign Up

In this section, we’ll guide you through the process of implementing a sign-up flow using an Ethereum wallet for authentication. The sign-up process involves creating a new sub-organization within your existing organization. This requires authentication of the parent organization using its public/private key pair. Additionally, we’ll cover how to verify if a user already has an associated sub-organization before proceeding.

Server-side

Initialize the Turnkey SDK on the server-side using the @turnkey/sdk-server package. This setup enables you to authenticate requests to Turnkey’s API using the parent organization’s public/private API key pair. This is required to create new sub-organizations on behalf of a user.
For Next.js, add the "use server" directive at the top of the file where you’re initializing the Turnkey server client. This will ensure that the function is executed on the server-side and will have access to the server-side environment variables e.g. your parent organization’s public/private API key pair. For more information on Next.js server actions, see the Next.js documentation on Server Actions and Mutations.
app/actions.ts

Check for Existing User

Before signing up a new user, we can try and retrieve the user’s sub-organization ID using the public key associated with the Ethereum or Solana account they want to authenticate with. If a sub-organization is found, we can proceed with authentication; otherwise, we assume the user is signing up. We’ll use the getPublicKey method on the WalletClient instance which will retrieve the public key from the user’s wallet.
The main distinction between signing with an Ethereum Wallet and a Solana Wallet lies in how the public key is obtained. For Solana, the public key can be directly derived from the wallet. In contrast, with Ethereum, the secp256k1 public key isn’t directly accessible. Instead, you need to first obtain a signature from the user and then recover the public key from that signature. This requires an additional step of signing a message with the user’s Ethereum wallet before we can retrieve the public key.
We’ll define this function in the server-side code we initialized earlier.
app/actions.ts
Next, we’ll add the client-side functionality to the app/page.tsx file we created earlier importing the getSubOrg function we defined in our server action. We’ll use the getSubOrg function in the login method to check if a user already has a sub-organization.
app/page.tsx

Create Sub-Organization

Next, we’ll define a method to create a sub-organization for new user sign-ups. For more information, refer to the Sub-Organizations guide.
We’ll define another server action createSubOrg to create a sub-organization for new user sign-ups.
app/actions.ts
Then, we’ll import and use this createSubOrg function within the login method. The curve type is set to API_KEY_CURVE_SECP256K1 since we’re using an Ethereum wallet in this example.
app/page.tsx

Sign In

At this point, we have a working sign-up flow. Next, we’ll implement the signing in functionality by creating a read-write session, retrieving the user’s wallets and adding a new one. Create a read-write session for the user by calling the loginWithWallet method on the WalletClient instance which will use a newly generated indexedDb API key. This will save a read-write session token to the localStorage to authenticate future read-write requests.
app/page.tsx

Sign in with a Solana wallet

As with Solana wallets there’s not standard API like personal_sign for Ethereum, we’ll need to build a couple of things:
  • Use the Turnkey SolanaWalletInterface to build our own SolanaWallet() function that would get the public key and sign a message. Create this new SolanaWalletFactory.ts component:
app/SolanaWalletFactory.ts
  • Use the Solana wallet-addapter to detect and connect the installed wallets. Create this SolanaWalletProvider.tsx component:
app/SolanaWalletProvider.tsx
Update the layout.tsx file:
app/layout.tsx
Update the config.ts file to include Solana:
config.ts
Now let’s put everything together:
app/page.tsx

Examples

You can find examples of how to implement the above functionality using the indexedDbClient and more in the following repositories:

Demo Embedded Wallet Kit

Wallet stamper