Phantom Connect

Use Phantom Connect to add wallet access, embedded wallets, and social login to a Next.js + React app.

This recipe covers adding Phantom Connect to a Next.js + React app. Use their Browser SDK for non-React web apps and the React Native SDK for mobile apps.

Prerequisites

Create a Phantom Portal app, configure allowed domains and redirect URLs, and copy the App ID.

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

Install the React SDK

Use the React SDK for Next.js + React.

Install dependencies

npm install @phantom/react-sdk @solana/web3.js

Optional starter template

npx -y create-solana-dapp@latest -t solana-foundation/templates/community/phantom-embedded-react

Add PhantomProvider (App Router or Pages Router)

Wrap your root layout so Phantom Connect can manage auth and wallet state. Put your App ID in config.appId (see appId: "your-app-id" in the examples) and set the redirect URL you configured.

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 { PhantomProvider, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected", "deeplink"],
        appId: "your-app-id",
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "https://yourapp.com/auth/callback",
        },
      }}
      theme={darkTheme}
      appIcon="https://your-app.com/icon.png"
      appName="Your App Name"
    >
      {children}
    </PhantomProvider>
  );
}

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 { PhantomProvider, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected", "deeplink"],
        appId: "your-app-id",
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "https://yourapp.com/auth/callback",
        },
      }}
      theme={darkTheme}
      appIcon="https://your-app.com/icon.png"
      appName="Your App Name"
    >
      <Component {...pageProps} />
    </PhantomProvider>
  );
}

Connect a user

Use the built-in modal or ConnectButton to trigger the Phantom flow.

"use client";

import { useModal, usePhantom } from "@phantom/react-sdk";

function WalletComponent() {
  const { open } = useModal();
  const { isConnected } = usePhantom();

  if (isConnected) return <p>Connected</p>;
  return <button onClick={open}>Connect Wallet</button>;
}

ConnectButton (ready-to-use)

"use client";
import { ConnectButton } from "@phantom/react-sdk";

function Header() {
  return <ConnectButton />;
}

Theme the Phantom ConnectUI

Use theming to customize the modal UI.

Priority Fees Stream Privy

⌘I

Troubleshooting

Trading API

Wallets

Phantom Connect

Prerequisites

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

​Prerequisites

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

Prerequisites

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