Privy

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)

Install the React SDK

Install the React SDK.

Install dependencies

npm install @privy-io/react-auth

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.

App Router
Pages Router

Create a client-side provider component, then wrap it in app/layout.tsx.

app/providers.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

// 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>
  );
}

Wrap your app in pages/_app.tsx.

pages/_app.tsx

// pages/_app.tsx
import type { AppProps } from "next/app";
import { PrivyProvider } from "@privy-io/react-auth";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <PrivyProvider
      appId="your-app-id"
      config={{
        embeddedWallets: {
          solana: {
            createOnLogin: "users-without-wallets",
          },
        },
      }}
    >
      <Component {...pageProps} />
    </PrivyProvider>
  );
}

To use external Solana wallets, pass toSolanaWalletConnectors() to externalWallets. See configuring connector chains.

Connect a user

Use Privy’s modal and show a connected state when login completes.

Connect button

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

Phantom Connect Turnkey

⌘I

Troubleshooting

Trading API

Wallets

Prerequisites

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

​Prerequisites

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

Prerequisites

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