Learn how to set up the Embedded Wallet Kit (EWK) in your React application. This page will guide you through the initial setup, including enabling Turnkey’s Auth Proxy, installing the SDK, and configuring your app.
Enable Auth Proxy
Customize auth methods
Finish up
@turnkey/react-wallet-kit
in any React based web application.
For this guide, let’s create a new Next.js
app. If you already have an existing app, you don’t need to do this.
.env
file within your app directory, and populate it with the IDs from before
TurnkeyProvider
component, and import "@turnkey/react-wallet-kit/styles.css"
to include styles for the UI components.
app/layout.tsx
as a server component and create a separate app/providers.tsx
client wrapper. This is necessary if you want to pass callbacks (e.g., onError), which must be defined in a client component.
onError
callback to the TurnkeyProvider
to catch any errors.
Then, use the Providers
component to wrap your app in app/layout.tsx
.
Why this pattern?
- Callbacks (and other interactive bits) must be declared in a client component.
- Keeping layout.tsx as a server component maintains optimal rendering and avoids unnecessarily making your entire app client-side.
- Centralizing Turnkey setup in app/providers.tsx keeps configuration, styles, and callbacks in one place.