Overview
This guide demonstrates how to add embedded wallets to your existing React app with just a few lines of code.Check out the CDP Web SDK reference for comprehensive method signatures, types, and examples.
Integrate into your app
Continue reading to add embedded wallets to your current React app with a few lines of code.
Check out our template app
Build a complete demo app from scratch to learn all the features.
What is an embedded wallet?
What is an embedded wallet?
An embedded wallet is a self-custodial crypto wallet built directly into your app. Unlike traditional wallets (like MetaMask) that require browser extensions and seed phrases, embedded wallets let users sign in with familiar auth methods such as email, mobile SMS, and OAuth while maintaining full control of their assets.Key benefits:
- No downloads: Works instantly in any browser
- Email sign-in: No seed phrases to manage, but users retain full control
- You control the UX: Seamlessly integrated into your app
Prerequisites
- A free CDP Portal account and project
- Node.js 22+
- A node package manager installed (i.e.,
npm
,pnpm
, oryarn
) - Basic familiarity with React and TypeScript
Configured your domain in CDP Portal (click to expand)
1Access CDP Portal
Navigate to the Domains Configuration in CDP Portal, and click Add domain to include your local app.2Add your domain
- For local development: Use
http://localhost:3000
(or your preferred port) - For production: Use your actual domain (e.g.,
https://yourapp.com
)
For production apps, only add your actual production domain. Do not addlocalhost
to production CDP projects as malicious apps running locally could impersonate your frontend and abuse your project credentials.3Save your changes
Click Add domain again to save your changes.You should see your domain listed in the CDP Portal dashboard. The allowlist will take effect immediately upon saving.- For local development: Use
1. Install packages
Once you’ve completed the prerequisites above, install the required packages:2. Wrap your app with the provider
Add the CDP provider to your root component (typicallyApp.tsx
or main.tsx
). Replace "your-project-id"
with your actual project ID from CDP Portal.
3. Add authentication
Option A: Use the AuthButton (recommended)
The simplest approach is to use theAuthButton
component which handles the entire authentication flow:
Option B: Build custom auth UI
For custom UIs, use the authentication hooks directly:4. Send transactions
EVM transactions
Once authenticated, users automatically get a wallet address. Here’s how to send EVM transactions:Solana transactions
Here’s how to send Solana transactions:What to read next
Demo app tutorial
Build a complete demo app to learn all features in depth
React Hooks
Explore all available hooks for advanced functionality
React Components
Use pre-built components for faster development
Next.js Integration
Learn about “use client” requirements and setup
Need testnet funds? Get free Base Sepolia ETH from the Base Faucet to test transactions.