Skip to main content
Use Privy to add authentication and embedded wallets to a Next.js + React app.
Privy supports multiple authentication methods (email, socials, passkeys, and external wallets). This guide uses email OTP as a simple starting point.

​
Prerequisites

Create a Privy app in the Privy Dashboard and copy your App ID.

​
Step-by-step (Next.js + React)

1

Install the React SDK

Install the React SDK.
npm install @privy-io/react-auth
2

Wrap your app with PrivyProvider

Put your App ID in appId="your-app-id" and wrap your app root. For Solana embedded wallets, set embeddedWallets.solana.createOnLogin to create wallets on login.
Create a client-side provider component, then wrap it in app/layout.tsx.
// app/providers.tsx
"use client";

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PrivyProvider
      appId="your-app-id"
      config={{
        embeddedWallets: {
          solana: {
            createOnLogin: "users-without-wallets",
          },
        },
      }}
    >
      {children}
    </PrivyProvider>
  );
}

// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
To use external Solana wallets, pass toSolanaWalletConnectors() to externalWallets. See configuring connector chains.
3

Connect a user

Use Privy’s modal and show a connected state when login completes.
"use client";

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

export default function ConnectButton() {
  const { ready, authenticated, login, user } = usePrivy();

  if (!ready) return <p>Loading...</p>;
  if (authenticated) return <p>Connected</p>;
  return <button onClick={login}>Connect Wallet</button>;
}
See the Privy Solana wallet docs for transaction examples.

​
Need Help?

https://mintcdn.com/dflow/a8Yx7HBusmKl4Z7w/images/meteor-icons_discord.svg?fit=max&auto=format&n=a8Yx7HBusmKl4Z7w&q=85&s=0ea834bc8a9fa3fe161ba181329effda

Join Our Discord

Connect with other developers, get help, and stay updated on the latest DFlow developments.
https://mintcdn.com/dflow/a8Yx7HBusmKl4Z7w/images/meteor-icons_telegram.svg?fit=max&auto=format&n=a8Yx7HBusmKl4Z7w&q=85&s=e928c5dd68311ff0d419936a35c86eed

Dev Notifications

Join the DFlow Dev Notifications Telegram group to stay in the loop on new features and other announcements.