⚠️ 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 theEthereumWalletinterface.
config.ts
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
app/page.tsx where we’ll implement the wallet authentication functionality:
- Next.js
- TypeScript
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.
- Next.js
- TypeScript
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 thegetPublicKey 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.
- Next.js
- TypeScript
app/actions.ts
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.
- Next.js
- TypeScript
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.- Next.js
- TypeScript
We’ll define another server action Then, we’ll import and use this
createSubOrg to create a sub-organization for new user sign-ups.app/actions.ts
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 theloginWithWallet 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.
- Next.js
- TypeScript
app/page.tsx
Sign in with a Solana wallet
As with Solana wallets there’s not standard API likepersonal_sign for Ethereum, we’ll need to build a couple of things:
- Use the Turnkey
SolanaWalletInterfaceto build our ownSolanaWallet()function that would get the public key and sign a message. Create this newSolanaWalletFactory.tscomponent:
app/SolanaWalletFactory.ts
- Use the Solana wallet-addapter to detect and connect the installed wallets. Create this SolanaWalletProvider.tsx component:
app/SolanaWalletProvider.tsx
app/layout.tsx
config.ts
app/page.tsx