From ad7dc261c5ac1d9c2929ed62b06a9c1f0aa1e9aa Mon Sep 17 00:00:00 2001 From: youssefea Date: Wed, 3 Sep 2025 15:42:09 +0100 Subject: [PATCH] update setup privy --- .../framework-integrations/privy/setup.mdx | 259 ++---------------- 1 file changed, 16 insertions(+), 243 deletions(-) diff --git a/docs/base-account/framework-integrations/privy/setup.mdx b/docs/base-account/framework-integrations/privy/setup.mdx index a1eb8c12..6023a34e 100644 --- a/docs/base-account/framework-integrations/privy/setup.mdx +++ b/docs/base-account/framework-integrations/privy/setup.mdx @@ -3,23 +3,11 @@ title: "Setup" description: "Configure Privy with Base Account for your React application" --- -Learn how to set up Privy with Base Account to enable seamless user authentication and wallet management. - -## Overview - -[Privy](https://www.privy.io/) provides user authentication and wallet management solutions for web3 applications. By integrating Privy with Base Account, you can offer users a smooth onboarding experience with embedded wallets and Base Account functionality. - -### What you'll achieve - -By the end of this guide, you will: - -- Set up Privy with Base Account support -- Configure embedded wallets for your users -- Enable Base Account as a wallet option +Learn how to set up Privy with Base Account to enable seamless user authentication with "Sign in with Base" as a top-level signup option. ## Installation -After [creating a new Next.js project](https://nextjs.org/docs/app/getting-started/installation), install the required dependencies: +Install the required dependencies: ```bash npm @@ -41,9 +29,9 @@ bun add @privy-io/react-auth @privy-io/wagmi-connector wagmi viem @base-org/acco ## Configuration -### 1. Set up Environment Variables +### Environment Variables -Create a `.env.local` file in your project root: +Create a `.env.local` file: ```bash NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id @@ -51,9 +39,9 @@ NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id Get your Privy App ID from the [Privy Dashboard](https://dashboard.privy.io/). -### 2. Configure Privy Provider +### Privy Provider Setup -Create your Privy configuration with Base Account support: +Configure Privy with Base Account as the primary login method: ```tsx // app/layout.tsx or pages/_app.tsx @@ -70,15 +58,12 @@ const privyConfig = { createOnLogin: 'users-without-wallets' as const, requireUserPasswordOnCreate: false, }, - loginMethods: ['email', 'wallet', 'google'], appearance: { + showWalletLoginFirst: false, + loginMethodsAndOrder: ['base_account', 'email', 'wallet', 'google'], theme: 'light' as const, accentColor: '#0052FF', // Base blue - logo: 'https://your-logo-url.com/logo.png', - walletList: [ - 'base_account', - 'coinbase_wallet', // It is recommended to support coinbase_wallet for any users still using the legacy EOA - ], + walletList: ['base_account', 'coinbase_wallet'], }, supportedChains: [base], } @@ -109,230 +94,18 @@ export default function App({ children }: { children: React.ReactNode }) { } ``` -To have Sign in with Base as a top level sign in option in the login modal, modify your `privyConfig` to include `base_account` in the `loginMethodsAndOrder` field. - -```tsx -const privyConfig = { - embeddedWallets: { - createOnLogin: 'users-without-wallets' as const, - requireUserPasswordOnCreate: false, - }, - loginMethodsAndOrder: { - primary: ['base_account','email', 'wallet'], - }, - appearance: { - theme: 'light' as const, - accentColor: '#0052FF' as const, // Base blue - walletList: ['base_account', 'coinbase_wallet'], - }, - supportedChains: [base], -}; -``` - -### 3. Create Authentication Hook - -Create a custom hook to manage authentication state: - -```tsx -// hooks/useAuth.ts -import { usePrivy } from '@privy-io/react-auth' -import { useWallets } from '@privy-io/react-auth' - -export function useAuth() { - const { - ready, - authenticated, - user, - login, - logout, - linkWallet, - unlinkWallet, - } = usePrivy() - - const { wallets } = useWallets() - - const embeddedWallet = wallets.find( - (wallet) => wallet.walletClientType === 'privy' - ) - - const baseAccountWallet = wallets.find( - (wallet) => wallet.walletClientType === 'base_account' - ) - - return { - ready, - authenticated, - user, - login, - logout, - linkWallet, - unlinkWallet, - embeddedWallet, - baseAccountWallet, - wallets, - } -} -``` - -### 4. Create Login Component - -Create a component to handle user authentication: - -```tsx -// components/AuthButton.tsx -import { useAuth } from '../hooks/useAuth' - -export function AuthButton() { - const { ready, authenticated, login, logout, user } = useAuth() - - if (!ready) { - return ( - - ) - } - - if (authenticated) { - return ( -
- Welcome, {user?.email?.address || 'User'}! - -
- ) - } - - return ( - - ) -} -``` - -### 5. Wallet Connection Component + +The key configuration is `loginMethodsAndOrder: ['base_account', ...]` which places "Sign in with Base" as the first option in the login modal. + -Create a component to manage wallet connections: +## Login Modal Appearance -```tsx -// components/WalletManager.tsx -import { useAuth } from '../hooks/useAuth' +With the configuration above, your login modal will display "Sign in with Base" as the primary option: -export function WalletManager() { - const { - authenticated, - embeddedWallet, - baseAccountWallet, - linkWallet, - wallets - } = useAuth() - if (!authenticated) { - return

Please log in to manage wallets

- } - - return ( -
-

Your Wallets

- - {embeddedWallet && ( -
-

Embedded Wallet

-

- Address: {embeddedWallet.address} -

-
- )} - - {baseAccountWallet && ( -
-

Base Account

-

- Address: {baseAccountWallet.address} -

-
- )} - - {!baseAccountWallet && ( - - )} - -
- Total wallets: {wallets.length} -
-
- ) -} -``` - -## Testing Your Setup - -Create a simple page to test your Privy + Base Account integration: - -```tsx -// app/page.tsx or pages/index.tsx -import { AuthButton } from '../components/AuthButton' -import { WalletManager } from '../components/WalletManager' - -export default function HomePage() { - return ( -
-

Privy + Base Account Demo

- - - - -
- ) -} -``` +*Screenshot coming soon: Login modal with "Sign in with Base" prominently displayed* ## Next Steps -Now that you have Privy configured with Base Account, you can: - -- [Implement Sign in with Base](/base-account/framework-integrations/privy/sign-in-with-base) - [Create and manage Sub Accounts](/base-account/framework-integrations/privy/sub-accounts) - -## Additional Configuration - -### Customizing Login Methods - -You can customize which login methods are available: - -```tsx -const privyConfig = { - loginMethods: ['email', 'wallet', 'google', 'twitter', 'discord'], - // ... other config -} -``` - -### Styling and Branding - -Customize the appearance to match your brand: - -```tsx -const privyConfig = { - appearance: { - theme: 'light', // or 'dark' - accentColor: '#0052FF', - logo: 'https://your-logo.com/logo.png', - landingHeader: 'Welcome to Your App', - showWalletLoginFirst: true, - }, - // ... other config -} -``` +- Build your authentication components using Privy's React hooks