Skip to main content
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)

1

Install the React SDK

Use the React SDK for Next.js + React.
npm install @phantom/react-sdk @solana/web3.js

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

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.
Create a client-side provider component, then wrap it in app/layout.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
import { Providers } from "./providers";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
3

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

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

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

Theme the Phantom ConnectUI

Use theming to customize the modal UI.