Skip to main content
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 onchain applications. By integrating Privy with Base Account, you can access all the Privy hooks and methods while having access to the users of Base Account.

What you’ll achieve

By the end of this guide, you will:
  • Set up Privy with Base Account support
  • Have Base Account set up as the main authentication option
  • Be able to access Base Account SDK from Privy’s React SDK
You can jump ahead and use the Base Account Privy Template to get started.
Base Account Privy Templatehttps://github.com/base/base-account-privy

Installation

After creating a new Next.js project, install the required dependencies:
npm install @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account @base-org/account-ui
Access the latest version of the Base Account SDK (Recommended)It is to access the latest version of the Base Account SDK in order to get the latest features and bug fixes.To do this, you can use the following command to override it:
npm pkg set overrides.@base-org/account="latest"
# OR manually add to package.json:
# "overrides": { "@base-org/account": "latest" }
Or you can use a specific version by adding the version to the overrides:
npm pkg set overrides.@base-org/account="2.2.0"
# OR manually add to package.json:
# "overrides": { "@base-org/account": "2.2.0" }
Make sure to delete your node_modules and package-lock.json and run a new install to ensure the overrides are applied.

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 and email as login methods:
"use client";

import { PrivyProvider } from "@privy-io/react-auth";
import { base } from "@privy-io/chains";

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PrivyProvider
      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
      clientId={process.env.NEXT_PUBLIC_PRIVY_CLIENT_ID!}
      config={{
        appearance: {
          walletList: ['base_account'],
          showWalletLoginFirst: true
        },
        defaultChain: base,
      }}
    >
      {children}
    </PrivyProvider>
  );
}

3. Access Base Account SDK from Privy

You can access the Base Account SDK from Privy using the useBaseAccount hook.
Get the SDK instance
import { useBaseAccountSdk } from '@privy-io/react-auth';

const { baseAccountSdk } = useBaseAccountSdk();

const provider = baseAccountSdk.getProvider();

const addresses = await provider.request({method: 'wallet_connect'});

I