Turnkey offers a suite of react components to create embedded wallets without having to setup a backend by using Next.js server actions and associated directives. Each component uses the indexedDbClient from @turnkey/sdk-react.
layout.tsx
or equivalent entry point:
.env
file to configure API connections and optional OAuth providers.
Variable | Description |
---|---|
TURNKEY_API_PUBLIC_KEY | Your Turnkey API public key (required). |
TURNKEY_API_PRIVATE_KEY | Your Turnkey API private key (required). |
NEXT_PUBLIC_BASE_URL | Base URL for Turnkey API (default: https://api.turnkey.com ). |
NEXT_PUBLIC_ORGANIZATION_ID | Your Turnkey organization ID (required). |
NEXT_PUBLIC_EXPORT_IFRAME_URL | URL for the Turnkey wallet export iframe (default: https://export.turnkey.com ). |
NEXT_PUBLIC_IMPORT_IFRAME_URL | URL for the Turnkey wallet import iframe (default: https://import.turnkey.com ). |
NEXT_PUBLIC_GOOGLE_CLIENT_ID | Google OAuth Client ID (required only if enabling Google login in authConfig ). |
NEXT_PUBLIC_APPLE_CLIENT_ID | Apple OAuth Client ID (required only if enabling Apple login in authConfig ). |
NEXT_PUBLIC_FACEBOOK_CLIENT_ID | Facebook OAuth Client ID (required only if enabling Facebook login in authConfig ). |
NEXT_PUBLIC_OAUTH_REDIRECT_URI | OAuth Redirect URI (required only if enabling Google, Apple, or Facebook login, e.g., https://your-app.ngrok-free.app/ ). |
Auth
ComponentAuth
component provides authentication functionality, including email, passkey, phone, and social logins.
Usage Example:
Import
and Export
components allow users to import or export wallets securely.
Import Wallet Example:
TurnkeyThemeProvider
TurnkeyThemeProvider
allows you to apply custom styles using CSS variables. This is optional and can be used to customize Turnkey components to match your application’s design.
Usage Example: