How to use different connection types

Connect users via Phantom extension, social login (Google/Apple), or any wallet-standard compatible wallet.

Try It

Unified Modal (Recommended)

Direct Wallet Connection

Open the Modal

The simplest way to connect is by opening the modal. It handles all connection types automatically.

import { useModal } from '@phantom/react-sdk';

function ConnectButton() {
  const { open, isOpened } = useModal();

  const handleConnect = () => {
    open();
  };

  return (
    <button onClick={handleConnect} disabled={isOpened}>
      Connect Wallet
    </button>
  );
}

// The modal shows all connection options:
// - Phantom extension/mobile
// - Google login (creates embedded wallet)
// - Apple login (creates embedded wallet)
// - Solflare, Backpack, Exodus, and other wallet-standard wallets

Social Login

Connect users directly with their Google or Apple account. No wallet extension needed.

import { useConnect } from '@phantom/react-sdk';

function SocialLoginButtons() {
  const { connect } = useConnect();

  const handleGoogleLogin = async () => {
    try {
      // Opens OAuth flow for Google - creates embedded wallet
      await connect({ provider: 'google' });
    } catch (error) {
      console.error('Google login failed:', error);
    }
  };

  const handleAppleLogin = async () => {
    try {
      // Opens OAuth flow for Apple - creates embedded wallet
      await connect({ provider: 'apple' });
    } catch (error) {
      console.error('Apple login failed:', error);
    }
  };

  return (
    <div>
      <button onClick={handleGoogleLogin}>
        Sign in with Google
      </button>
      <button onClick={handleAppleLogin}>
        Sign in with Apple
      </button>
    </div>
  );
}

Direct Wallet Connection

Connect directly to a specific wallet using its injected provider. Useful when you want branded wallet buttons with custom styling.

import { useWallet } from '@/shared/hooks/use-wallet';

function DirectConnectButtons() {
  const { connectors, connect, isConnecting } = useWallet();

  // Connect to a specific wallet by name
  const connectToWallet = async (walletName: string) => {
    const wallet = connectors.find(c =>
      c.name.toLowerCase().includes(walletName.toLowerCase())
    );
    if (wallet?.ready) {
      await connect(wallet.id);
    }
  };

  return (
    <div>
      {connectors.map((wallet) => (
        <button
          key={wallet.id}
          onClick={() => connect(wallet.id)}
          disabled={isConnecting}
        >
          {wallet.icon && <img src={wallet.icon} alt="" />}
          Connect {wallet.name}
        </button>
      ))}
    </div>
  );
}

// Or connect to a specific wallet programmatically:
const phantom = connectors.find(c => c.name.includes('Phantom'));
if (phantom?.ready) {
  await connect(phantom.id);
}

Wallet Standard Support

Phantom Connect automatically detects wallet-standard wallets like Solflare, Backpack, and others.

import { useModal, useDiscoveredWallets } from '@phantom/react-sdk';

// Phantom Connect automatically detects wallet-standard wallets
// Users can connect with Solflare, Backpack, Exodus, or any compatible wallet

function MultiWalletConnect() {
  const { open } = useModal();
  const { wallets } = useDiscoveredWallets();

  // wallets contains all detected wallet-standard wallets
  console.log('Detected wallets:', wallets?.map(w => w.name));

  // The modal automatically lists all available wallets
  return (
    <button onClick={open}>
      Connect Any Wallet
    </button>
  );
}

// Enable wallet-standard detection via the 'injected' provider:
import { AddressType, PhantomProvider, darkTheme } from '@phantom/react-sdk';

<PhantomProvider
  config={{
    providers: ['google', 'apple', 'injected'], // Social + wallet-standard
    appId: process.env.NEXT_PUBLIC_PHANTOM_APP_ID || '',
    addressTypes: [AddressType.solana],
  }}
  theme={darkTheme}
>
  {children}
</PhantomProvider>

// The 'injected' provider enables wallet-standard detection
// for Phantom, Solflare, Backpack, Exodus, Glow, and others

Frequently Asked Questions

What is social login for wallets?
Social login lets users create a Solana wallet using their Google or Apple account. No browser extension needed. Phantom creates a non-custodial embedded wallet linked to their social identity.
Can users connect with Solflare, Backpack, or Exodus?
Yes, Phantom Connect supports the Solana wallet standard. Any compatible wallet (Solflare, Backpack, Exodus, Glow, etc.) will appear in the connection modal automatically.
Is social login secure?
Yes, social login wallets are non-custodial. Phantom uses secure enclaves and the user's OAuth credentials to derive keys. Only the user can access their wallet.
How do I test the connection modal?
Click the "Open Phantom Connect" button in the demo above. The modal will show all available connection options based on what wallets the user has installed.

Learn More