Setup

Learn how to set up Privy with Coinbase Wallet to enable seamless user authentication and wallet management.

Overview

Privy provides user authentication and wallet management solutions for onchain applications. By integrating Privy with Coinbase Wallet, you can access all the Privy hooks and methods while having access to the users of Coinbase Wallet.

What You’ll Achieve

By the end of this guide, you will:

Set up Privy with Coinbase Wallet support
Have Coinbase Wallet set up as the main authentication option
Be able to access Coinbase Wallet SDK from Privy’s React SDK

You can jump ahead and use the Coinbase Wallet Privy Template to get started.

Installation

1. Create a New Next.js Project

npx create-next-app@latest base-account-privy
cd base-account-privy

yarn create next-app base-account-privy
cd base-account-privy

2. Override the Coinbase Wallet SDK Version

In order to access the latest version of the Coinbase Wallet SDK, you need to override the Privy pinned version in your package.json file. 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" }

# pnpm requires manual addition to package.json:
# "pnpm": { "overrides": { "@base-org/account": "latest" } }

# yarn uses resolutions - add manually to package.json:
# "resolutions": { "@base-org/account": "latest" }

# bun supports overrides - add manually 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" }

# pnpm requires manual addition to package.json:
# "pnpm": { "overrides": { "@base-org/account": "2.2.0" } }

# yarn uses resolutions - add manually to package.json:
# "resolutions": { "@base-org/account": "2.2.0" }

# bun supports overrides - add manually to package.json:
# "overrides": { "@base-org/account": "2.2.0" }

If you’re not starting a new projectsMake sure to delete your node_modules and package-lock.json and run a new install to ensure the overrides are applied.

3. Install the Dependencies

Install the dependencies with your package manager of choice:

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

pnpm add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify

yarn add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify

bun add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify

Configuration

1. Set Up Environment Variables

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

.env.local

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 Coinbase Wallet as the default login method and update the layout to include the PrivyProvider.

"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!}
      config={{
        appearance: {
          walletList: ['base_account'],
          showWalletLoginFirst: true
        },
        defaultChain: base,
      }}
    >
      {children}
    </PrivyProvider>
  );
}

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Providers from "./providers";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Privy Next demo",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Usage

1. Update the App Page

Update the app/page.tsx file to show the authentication flow:

app/page.tsx

"use client";

import { usePrivy } from "@privy-io/react-auth";
import { ToastContainer } from "react-toastify";

function Home() {
  const { ready, authenticated, logout, login } = usePrivy();
  if (!ready) {
    return <div>Loading...</div>;
  }

  return (
    <div className="bg-white md:max-h-[100vh] md:overflow-hidden">
      {authenticated ? (
        <section className="w-full flex flex-col md:flex-row md:h-[calc(100vh-60px)]">
          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
            <button className="button" onClick={logout}>Logout</button>
          </div>
        </section>
      ) : (
        <section className="w-full flex flex-row justify-center items-center h-[calc(100vh-60px)] relative bg-gradient-to-b from-blue-600 to-blue-700">
          <div className="z-10 flex flex-col items-center justify-center w-full h-full px-4">
          <div className="flex h-10 items-center justify-center rounded-[20px] border border-white/20 bg-white/10 backdrop-blur-sm px-6 text-lg text-white font-abc-favorit">
            Base × Privy Demo
          </div>
        <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
          Build on Base
        </div>
            <div className="text-center text-white/90 text-xl font-normal leading-loose mt-8 max-w-2xl">
              Get started building on Base with Privy&apos;s authentication and native Coinbase Wallet support
            </div>
            <button
              className="bg-white text-black mt-15 w-full max-w-md rounded-full px-4 py-2 font-medium hover:bg-gray-50 transition-colors lg:px-8 lg:py-4 lg:text-xl"
              onClick={() => {
                login();
                setTimeout(() => {
                  (document.querySelector('input[type="email"]') as HTMLInputElement)?.focus();
                }, 150);
              }}
            >
              Get started
            </button>
          </div>
        </section>
      )}
  
      <ToastContainer
        position="top-center"
        autoClose={5000}
        hideProgressBar
        newestOnTop={false}
        closeOnClick={false}
        rtl={false}
        pauseOnFocusLoss
        draggable={false}
        pauseOnHover
        limit={1}
        aria-label="Toast notifications"
        style={{ top: 58 }}
      />
    </div>
  );
}

export default Home;

2. Run the Project Locally

You’re done! You can now run the project locally:

npm run dev

pnpm dev

yarn dev

bun dev

You should see a page that looks like this:

3. Get the Coinbase Wallet SDK Instance (Optional)

You can access the Coinbase Wallet 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'});

GET STARTED

AI AGENTS

WALLETS

PAYMENTS

STABLECOINS

TRADING

ONCHAIN TOOLS

CUSTOMERS

WEBHOOKS

CONSUMER APIS

BUSINESS APIS

INSTITUTIONAL APIS

Overview

What You’ll Achieve

Installation

1. Create a New Next.js Project

2. Override the Coinbase Wallet SDK Version

3. Install the Dependencies

Configuration

1. Set Up Environment Variables

2. Configure Privy Provider

Usage

1. Update the App Page

2. Run the Project Locally

3. Get the Coinbase Wallet SDK Instance (Optional)

​Overview

​What You’ll Achieve

​Installation

​1. Create a New Next.js Project

​2. Override the Coinbase Wallet SDK Version

​3. Install the Dependencies

​Configuration

​1. Set Up Environment Variables

​2. Configure Privy Provider

​Usage

​1. Update the App Page

​2. Run the Project Locally

​3. Get the Coinbase Wallet SDK Instance (Optional)

Overview

What You’ll Achieve

Installation

1. Create a New Next.js Project

2. Override the Coinbase Wallet SDK Version

3. Install the Dependencies

Configuration

1. Set Up Environment Variables

2. Configure Privy Provider

Usage

1. Update the App Page

2. Run the Project Locally

3. Get the Coinbase Wallet SDK Instance (Optional)