Overview
Generally, these new users will take the form of a Turnkey Sub-Organization. This process involves using the following Turnkey SDK packages:@turnkey/sdk-server
: Used on the server-side to leverage the parent organization’s public/private API key pair to create the new user’s sub-organization.@turnkey/sdk-browser
: Used on the client-side to complete the email recovery process by adding an end-user passkey.@turnkey/sdk-react
: Used for Next.js applications to initialize the Turnkey SDK.
For a refresher on the relationship between your application’s end users and Turnkey Sub-Organizations, see this page for more.
Implementation
Initialize the Turnkey SDK on the Browser
Wrap the root layout of your application with the
TurnkeyProvider
providing the required configuration options. This allows you to use the Turnkey client throughout your app via the useTurnkey()
hook.app/layout.tsx
The
NEXT_PUBLIC_ORGANIZATION_ID
should be set to the parent organization ID which can be found in the Turnkey Dashboard.The NEXT_PUBLIC_TURNKEY_RP_ID
should be set to your application’s desired relying party ID; this is typically your domain, or localhost if developing locally. See this page for more details.Initialize the Passkey Client
Next, we’ll initialize thepasskeyClient
, which will enable your application to interact with passkeys.
We add the
"use client"
directive to the Recovery component to as react hooks can only be used client-side.app/create-suborg.tsx
Create User Passkey
In order to create a new passkey for a user, you can call thecreateUserPasskey
SDK function. Calling this method will prompt the user to create a passkey, which will be securely stored by their browser. This credential will be associated with the user’s account (sub-organization) and used for future authentication. Once the credential is created, we’ll use it in the next step to create a new sub-organization that corresponds to the user.
The result of
createUserPasskey
includes an encoded challenge and attestation. The encoded challenge ensures the request is fresh and legitimate, while the attestation verifies the authenticity of the device creating the credential. For more information on how passkeys work, including details on the challenge and attestation objects, you can refer to the Passkeys Documentation.app/create-suborg.tsx
Initialize the Turnkey SDK on the Server
Initialize the Turnkey SDK on the server-side using the@turnkey/sdk-server
package. This allows you to use the parent organization’s public/private API key pair to create sub-organizations.
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
Create a Function for Sub-Org Creation
Next we’ll create a new function calledcreateSubOrganization
that will be used to create a new sub-organization from the server-side. This method will be called from the client-side with the end-user’s details.
We export the
createSubOrganization
server action to be called from the client-side.app/actions.tsx
Complete Create Sub-Organization
At this stage, we create the sub-organization using the server-side function we created in the previous step.1
Import the server action
app/create-suborg.tsx
2
Call createSubOrganization with the end-user's details
app/create-suborg.tsx
create-suborg.tsx
create-suborg.tsx