Migrating from Privy to AppKit

If you’re migrating a React Privy dApp originally built with create-react-app, we recommend switching to Vite for improved performance and a better developer experience. You can check out our examples for a complete implementation using Vite + AppKit.

Follow the steps below to migrate from a default Privy project (using Next.js Pages) to an AppKit project with wagmi.

Step 1. Create a project in Reown Dashboard

Go to Reown Dashboard.
Create a new project and copy your Project ID — you’ll need it later.

Step 2. Install & uninstall libraries

Replace Privy dependencies with AppKit by running the following commands for your preferred package manager:

AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem && npm uninstall @privy-io/react-auth @privy-io/server-auth

yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem && yarn remove @privy-io/react-auth @privy-io/server-auth

bun a @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem && bun remove @privy-io/react-auth @privy-io/server-auth

pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem && pnpm remove @privy-io/react-auth @privy-io/server-auth

Step 3. Update `_app.tsx`

To make AppKit Functional in a similar way, we need to replace the PrivyProvider with the combination of WagmiProvider and QueryClientProvider

Update Your Imports

- import { PrivyProvider } from "@privy-io/react-auth";
+ import { createAppKit } from '@reown/appkit/react'
+ import { WagmiProvider } from 'wagmi'
+ import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+ import { mainnet } from '@reown/appkit/networks'
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

Configure AppKit Outside the Component

+ const projectId = "<YOUR_PROJECT_ID_FROM_STEP_1>"
+ const wagmiAdapter = new WagmiAdapter({ projectId, [mainnet] })

+ createAppKit({
+   adapters: [wagmiAdapter],
+  networks:  [mainnet],
+  projectId
+  features: {
+    analytics: true // Optional - defaults to your Cloud configuration
+  }
+ })

Wrap Your App With Providers

Update your component tree to use WagmiProvider and QueryClientProvider, and render the global appkit-button element:

-  <PrivyProvider ... >
+   <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+            <appkit-button />
+        </QueryClientProvider>
+   </WagmiProvider>
-  </PrivyProvider appId="">

AppKit web components (like <appkit-button>) are global HTML elements — no imports are necessary.

Final notes

Test your application thoroughly to ensure the migration has been successful and that all functionality is working as expected.
Check our AppKit Web examples to compare with your implementation if you encounter issues.
If you want to start from scratch, refer to the Installation docs here.

Getting Started

Accounts & Authentication

Data

Payments

Settings

Networks

Technical Reference

Migrating from Privy to AppKit

Step 1. Create a project in Reown Dashboard

Step 2. Install & uninstall libraries

Step 3. Update `_app.tsx`

Final notes

​Step 1. Create a project in Reown Dashboard

​Step 2. Install & uninstall libraries

​Step 3. Update _app.tsx

​Final notes

Step 1. Create a project in Reown Dashboard

Step 2. Install & uninstall libraries

Step 3. Update `_app.tsx`

Final notes