Setup

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 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

Installation

After creating a new Next.js project, install the required dependencies:

npm

npm install @privy-io/react-auth @privy-io/wagmi-connector wagmi viem @base-org/account

Configuration

1. Set up Environment Variables

Create a .env.local file in your project root:

NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id

Get your Privy App ID from the Privy Dashboard.

2. Configure Privy Provider

Create your Privy configuration with Base Account support:

// app/layout.tsx or pages/_app.tsx
'use client'

import { PrivyProvider } from '@privy-io/react-auth'
import { WagmiProvider } from '@privy-io/wagmi-connector'
import { base } from 'viem/chains'
import { http } from 'viem'
import { baseAccount } from 'wagmi/connectors'

const privyConfig = {
  embeddedWallets: {
    createOnLogin: 'users-without-wallets' as const,
    requireUserPasswordOnCreate: false,
  },
  loginMethods: ['email', 'wallet', 'google'],
  appearance: {
    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
    ],
  },
  supportedChains: [base],
}

const wagmiConfig = {
  chains: [base],
  transports: {
    [base.id]: http(),
  },
  connectors: [
    baseAccount({
      appName: 'Your App Name',
    })
  ],
}

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <PrivyProvider
      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
      config={privyConfig}
    >
      <WagmiProvider config={wagmiConfig}>
        {children}
      </WagmiProvider>
    </PrivyProvider>
  )
}

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.

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:

// 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:

// components/AuthButton.tsx
import { useAuth } from '../hooks/useAuth'

export function AuthButton() {
  const { ready, authenticated, login, logout, user } = useAuth()

  if (!ready) {
    return (
      <button disabled className="px-4 py-2 bg-gray-300 rounded">
        Loading...
      </button>
    )
  }

  if (authenticated) {
    return (
      <div className="flex items-center gap-4">
        <span>Welcome, {user?.email?.address || 'User'}!</span>
        <button
          onClick={logout}
          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
        >
          Logout
        </button>
      </div>
    )
  }

  return (
    <button
      onClick={login}
      className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
    >
      Login with Privy
    </button>
  )
}

5. Wallet Connection Component

Create a component to manage wallet connections:

// components/WalletManager.tsx
import { useAuth } from '../hooks/useAuth'

export function WalletManager() {
  const { 
    authenticated, 
    embeddedWallet, 
    baseAccountWallet, 
    linkWallet,
    wallets 
  } = useAuth()

  if (!authenticated) {
    return <p>Please log in to manage wallets</p>
  }

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">Your Wallets</h3>
      
      {embeddedWallet && (
        <div className="p-4 bg-green-50 border border-green-200 rounded">
          <h4 className="font-medium">Embedded Wallet</h4>
          <p className="text-sm text-gray-600">
            Address: {embeddedWallet.address}
          </p>
        </div>
      )}

      {baseAccountWallet && (
        <div className="p-4 bg-blue-50 border border-blue-200 rounded">
          <h4 className="font-medium">Base Account</h4>
          <p className="text-sm text-gray-600">
            Address: {baseAccountWallet.address}
          </p>
        </div>
      )}

      {!baseAccountWallet && (
        <button
          onClick={() => linkWallet()}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Connect Base Account
        </button>
      )}

      <div className="text-sm text-gray-600">
        Total wallets: {wallets.length}
      </div>
    </div>
  )
}

Testing Your Setup

Create a simple page to test your Privy + Base Account integration:

// app/page.tsx or pages/index.tsx
import { AuthButton } from '../components/AuthButton'
import { WalletManager } from '../components/WalletManager'

export default function HomePage() {
  return (
    <div className="max-w-2xl mx-auto p-8 space-y-8">
      <h1 className="text-2xl font-bold">Privy + Base Account Demo</h1>
      
      <AuthButton />
      
      <WalletManager />
    </div>
  )
}

Next Steps

Now that you have Privy configured with Base Account, you can:

• Implement Sign in with Base
• Create and manage Sub Accounts

Additional Configuration

Customizing Login Methods

You can customize which login methods are available:

const privyConfig = {
  loginMethods: ['email', 'wallet', 'google', 'twitter', 'discord'],
  // ... other config
}

Styling and Branding

Customize the appearance to match your brand:

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
}