Turnkey’s Embedded Wallets enable you to integrate secure, custom wallet experiences directly into your product. With features like advanced security, seamless authentication, and flexible UX options, you can focus on building great products while we handle the complexities of private key management.
npx create-next-app@latest
. Or install into an existing project.
@turnkey/sdk-react
requires the Next.js App Router architecture as it leverages React Server Components and Server Actions to handle authentication on your behalf. The SDK automatically manages the “use client” and “use server” directives. The Pages Router is not supported.React 19 UsersIf you’re using Next.js 15 with React 19 you may encounter an installation error with @turnkey/sdk-react
. Consider:18.x.x
npm install --force
or --legacy-peer-deps
Environment
Configure
Provider
TurnkeyProvider
component, and import styles from sdk-react.@turnkey/sdk-react
is built with React 18. If you’re using React 19 you’ll find a type mismatch on the children type.To fix this, you can use the @ts-ignore
directive to suppress the error.src/app/layout.tsxConfigure
Auth Config Options
Import
Handlers
onError
function will set an errorMessage
state variable which will be used to display an error message to the user. The onAuthSuccess
function will route the user to the dashboard after successful authentication.A new sub-organization and wallet is created for each new user during the authentication flow.Dashboard: User Session
TurnkeyProvider
component, the useTurnkey
hook is available to all child components. Calling turnkey.getSession()
will return the current user’s session information from local storage.Add a state variable to store the user:signRawPayload
method.
The signRawPayload
method requires these parameters:
payload
: The raw unsigned payload to signsignWith
: The signing address (wallet account, private key address, or private key ID)encoding
: The message encoding formathashFunction
: The selected hash algorithmThe Payload
message
, will be the payload to sign. Add a state variable to store the message and an input field to allow the user to enter the message:The Signer
getSignWith
, to get the user’s wallet account address which will be used to sign the message.Use the getSession
method from the useTurnkey
hook to get the user’s read-write session:The Signing Function
signMessage
. This function will:signRawPayload
methodkeccak256
hash of the message, this example uses the hashMessage
function from viem
. However, any other hashing library can be used.Display
signMessage
function.Handle logout
handleLogout
and clears the indexedDb stored key and session.Complete Code