Skip to content

Commit a152cd6

Browse files
youssefeayoussefea
authored
Merge pull request #66 from base/base-account-privy
Add Base Account x Privy template
2 parents 61473de + 7e1ed65 commit a152cd6

File tree

1 file changed

+231
-0
lines changed
  • base-account/base-account-privy-template

1 file changed

+231
-0
lines changed

‎base-account/base-account-privy-template/README.md‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
# Build on Base with Privy
2+
3+
A Next.js starter template for building on Base with Privy's authentication and wallet infrastructure. This can serve as a template for developers looking to integrate Base Account as an option in Privy.
4+
5+
RESOURCES:
6+
- [BASE ACCOUNT x PRIVY TEMPLATE REPO](https://github.com/base/base-account-privy)
7+
- [BASE ACCOUNT x PRIVY DOCS & GUIDES](https://docs.base.org/base-account/framework-integrations/privy/setup)
8+
9+
## 🚀 Features
10+
11+
This demo showcases the full spectrum of Base Account capabilities:
12+
13+
- **Base Account Authentication** - Using [`wallet_connect`](https://docs.base.org/base-account/reference/core/provider-rpc-methods/wallet_connect) with SignInWithEthereum to authenticate
14+
- **Sub Accounts Management** - Create and manage app-specific wallet accounts to allow your give your users a pop-up-less experience
15+
- **Wallet Operations** - Complete wallet interaction functionality including transactions and message signing
16+
- **Account Linking/Unlinking** - Connect and disconnect various account types (Google, Email etc)
17+
- **Multi-Factor Authentication** - Enhanced security features
18+
19+
## 🏗️ Architecture
20+
21+
### Provider Configuration (`src/providers/providers.tsx`)
22+
23+
The application is configured to prioritize Base Account as the primary wallet option:
24+
25+
```tsx
26+
<PrivyProvider
27+
config={{
28+
appearance: {
29+
walletList: ['base_account'],
30+
showWalletLoginFirst: true
31+
},
32+
defaultChain: base,
33+
}}
34+
>
35+
```
36+
37+
This configuration ensures that Base Account appears first in the account authentification flow, providing the optimal user experience for Base Account users.
38+
39+
## 🔐 Authentication Section
40+
41+
The authentication component implements the "Sign in with Base" flow using Base Account's wallet signature authentication:
42+
43+
### Key Features:
44+
- **Passwordless Authentication** - No passwords required, uses wallet signatures
45+
- **SIWE Standard** - Follows the "Sign in with Ethereum" (EIP-4361) standard
46+
- **Nonce Generation** - Secure random nonce generation for each authentication
47+
- **Custom Button** - Branded "Sign in with Base" imported from Base Account SDK
48+
- **Backend Verification** - Anti-replay and backend verification using Viem's `verifyMessage`
49+
50+
### Implementation:
51+
- Uses `wallet_connect` RPC method with `signInWithEthereum` capabilities
52+
- Generates secure nonces using `window.crypto.randomUUID()`
53+
- Provides complete authentication data (address, message, signature) for backend verification
54+
- Ready for backend integration with viem's `verifyMessage` function
55+
56+
**Learn more:** [Base Account Authentication Guide](https://docs.base.org/base-account/guides/authenticate-users)
57+
58+
## 🏦 Sub Accounts Section
59+
60+
Sub Accounts allow you to create app-specific wallet accounts that provide a frictionless transaction experience:
61+
62+
### Key Features:
63+
- **Get Existing Sub Accounts** - Retrieve sub accounts for the current domain
64+
- **Create New Sub Accounts** - Generate new sub accounts tied to your app
65+
- **Domain-Specific** - Each sub account is bound to your application's domain
66+
- **Frictionless Transactions** - Eliminate repeated signing prompts
67+
- **Spend Permissions Ready** - Can spend from parent account balance
68+
69+
### Implementation:
70+
- Uses `wallet_getSubAccounts` RPC method to fetch existing accounts
71+
- Uses `wallet_addSubAccount` RPC method to create new sub accounts
72+
- Automatically switches to Base Sepolia for testing
73+
- Displays sub account details including addresses and public keys
74+
75+
**Learn more:** [Base Account Sub Accounts Guide](https://docs.base.org/base-account/improve-ux/sub-accounts)
76+
77+
## 💸 Spend Permissions Section
78+
79+
Spend Permissions enable trusted spenders to move assets from your Base Account without requiring additional signatures for each transaction:
80+
81+
### Key Features:
82+
- **Create Spend Permissions** - Grant spending daily/weekly/monthly allowances to trusted addresses
83+
- **Load Existing Permissions** - View and manage current spend permissions
84+
- **Use Permissions** - Execute transactions using granted permissions
85+
- **Permission Status Checking** - Monitor active permissions and remaining allowances
86+
- **Secure Allowance Management** - Set specific token amounts and time periods
87+
88+
### Implementation:
89+
- Uses `requestSpendPermission` to create new spending allowances
90+
- Uses `fetchPermissions` to retrieve existing permissions for an account
91+
- Uses `prepareSpendCallData` to prepare transactions using permissions
92+
- Uses `getPermissionStatus` to check permission validity and remaining balances
93+
- Supports USDC token permissions with configurable allowances and periods
94+
95+
### Configuration:
96+
- **Default Token:** USDC on Base (0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913)
97+
- **Default Spender:** Configurable trusted address
98+
- **Default Allowance:** 1 USDC per day (customizable)
99+
- **Network:** Base Mainnet (Chain ID: 8453)
100+
101+
**Learn more:** [Base Account Spend Permissions Guide](https://docs.base.org/base-account/guides/use-spend-permissions)
102+
103+
## 🔧 Additional Sections
104+
105+
### Wallet Actions
106+
Comprehensive wallet operation functionality including:
107+
- Transaction sending and management
108+
- Smart contract interactions
109+
- Balance checking and transfers
110+
111+
### Link Accounts
112+
Connect various account types to your Base Account:
113+
- Social accounts integration
114+
- Email account linking
115+
- Additional wallet connections
116+
117+
### Unlink Accounts
118+
Manage and disconnect linked accounts:
119+
- Remove connected social accounts
120+
- Unlink email addresses
121+
- Disconnect additional wallets
122+
123+
### Multi-Factor Authentication (MFA)
124+
Enhanced security features:
125+
- Enable/disable MFA
126+
- Manage authentication factors
127+
- Security settings configuration
128+
129+
## 🛠️ Getting Started
130+
131+
### Prerequisites
132+
133+
Make sure you have the following environment variables set:
134+
135+
```bash
136+
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id
137+
NEXT_PUBLIC_PRIVY_CLIENT_ID=your_privy_client_id
138+
```
139+
140+
### Installation
141+
142+
```bash
143+
# Clone the repository
144+
git clone <repository-url>
145+
cd base-account-privy
146+
147+
# Install dependencies
148+
npm install
149+
# or
150+
pnpm install
151+
# or
152+
yarn install
153+
154+
# Run the development server
155+
npm run dev
156+
# or
157+
pnpm dev
158+
# or
159+
yarn dev
160+
```
161+
162+
Open [http://localhost:3000](http://localhost:3000) to see the application.
163+
164+
## 🏗️ Project Structure
165+
166+
```
167+
src/
168+
├── app/
169+
│ ├── api/
170+
│ │ └── auth/
171+
│ │ ├── nonce/
172+
│ │ │ └── route.ts # Generate authentication nonces
173+
│ │ └── verify/
174+
│ │ └── route.ts # Verify SIWE signatures
175+
│ ├── page.tsx # Main application page
176+
│ ├── layout.tsx # Root layout
177+
│ └── globals.css # Global styles and button classes
178+
├── components/
179+
│ ├── sections/
180+
│ │ ├── authentication.tsx # Base Account authentication & SIWE
181+
│ │ ├── sub-accounts.tsx # Sub accounts management
182+
│ │ ├── spend-permissions.tsx # Spend permissions management
183+
│ │ ├── wallet-actions.tsx # Wallet operations
184+
│ │ ├── link-accounts.tsx # Account linking
185+
│ │ ├── unlink-accounts.tsx # Account unlinking
186+
│ │ ├── mfa.tsx # Multi-factor auth
187+
│ │ └── user-object.tsx # User information display
188+
│ ├── reusables/
189+
│ │ └── section.tsx # Reusable section component
190+
│ └── ui/ # UI components (toasts, loaders, etc.)
191+
├── lib/
192+
│ └── nonce-store.ts # In-memory nonce management
193+
├── providers/
194+
│ └── providers.tsx # Privy provider configuration
195+
```
196+
197+
## 🔗 Resources
198+
199+
### Base Account Documentation
200+
- [Base Account Overview](https://docs.base.org/base-account)
201+
- [Authentication Guide](https://docs.base.org/base-account/guides/authenticate-users)
202+
- [Sub Accounts Guide](https://docs.base.org/base-account/improve-ux/sub-accounts)
203+
- [Base Account SDK](https://docs.base.org/base-account/reference/account-sdk)
204+
205+
### Privy Documentation
206+
- [Privy Documentation](https://docs.privy.io/)
207+
- [Privy React SDK](https://docs.privy.io/reference/react-auth)
208+
209+
### Development Resources
210+
- [Next.js Documentation](https://nextjs.org/docs)
211+
- [Viem Documentation](https://viem.sh/)
212+
- [Base Chain Documentation](https://docs.base.org/)
213+
214+
## 🚀 Deployment
215+
216+
The easiest way to deploy this Next.js app is to use the [Vercel Platform](https://vercel.com/new):
217+
218+
1. Push your code to a Git repository
219+
2. Import your project to Vercel
220+
3. Add your environment variables
221+
4. Deploy!
222+
223+
Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
224+
225+
## 🤝 Contributing
226+
227+
Contributions are welcome! Please feel free to submit a Pull Request.
228+
229+
## 📄 License
230+
231+
This project is open source and available under the [MIT License](LICENSE).

0 commit comments

Comments
 (0)