Phantom Connect SDK
Build wallet-connected Solana applications with the Phantom Connect SDK ecosystem.
SDK Selection
| Platform |
SDK |
Package |
| React web apps |
React SDK |
@phantom/react-sdk |
| React Native / Expo |
React Native SDK |
@phantom/react-native-sdk |
| Vanilla JS / Vue / Angular |
Browser SDK |
@phantom/browser-sdk |
Prerequisites
- Phantom Portal Account — Register at phantom.com/portal
- App ID — Get from Portal → App → Set Up
- Allowlisted URLs — Add domains and redirect URLs in Portal
Auth Providers
| Provider |
Description |
Requires appId |
"injected" |
Phantom browser extension |
No |
"google" |
Google OAuth (embedded wallet) |
Yes |
"apple" |
Apple ID (embedded wallet) |
Yes |
Critical Rules
- Always use
signAndSendTransaction — signTransaction and signAllTransactions are NOT supported for embedded wallets
- Always use
LAMPORTS_PER_SOL from @solana/web3.js for amount conversion — never hardcode 1000000000
- Wrap all async SDK calls in try-catch — users can reject prompts at any time
- Check
isConnected before signing — verify wallet connection before any operation
- React Native:
react-native-get-random-values must be the FIRST import — before any other imports
- BrowserSDK must be a singleton — create one instance per app, never multiple
- Import
AddressType from @phantom/browser-sdk only
- Use devnet for testing, mainnet-beta for production — never test against mainnet with real funds
- Never expose private keys — Phantom handles all signing internally
- Embedded wallet spending limit: $1,000 USD per day per app per user
- Social login sessions persist 7 days from last auth event — handle expiration gracefully
Quick Start
React SDK
import { PhantomProvider, useModal, usePhantom, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";
function App() {
return (
<PhantomProvider
config={{
providers: ["google", "apple", "injected"],
appId: "your-app-id",
addressTypes: [AddressType.solana],
authOptions: { redirectUrl: "https://yourapp.com/callback" },
}}
theme={darkTheme}
>
<YourApp />
</PhantomProvider>
);
}
React Native SDK
// CRITICAL: Must be first import
import "react-native-get-random-values";
import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";
// Requires app.json: { "expo": { "scheme": "myapp", "plugins": [...] } }
Browser SDK
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
const sdk = new BrowserSDK({
providers: ["google", "apple", "injected"],
appId: "your-app-id",
addressTypes: [AddressType.solana],
autoConnect: true,
});
Reference Docs
For detailed implementation patterns, read these files:
- references/react-sdk.md — Complete React SDK reference (hooks, components, theming)
- references/react-native-sdk.md — Mobile setup, Expo config, deep links
- references/browser-sdk.md — Vanilla JS patterns, events, wallet discovery
- references/transactions.md — Solana transaction patterns (SOL, SPL tokens)
- references/payments.md — Crypto payment flows (SOL, USDC, backend verification)
- references/token-gating.md — Token-gated access (client-side, server-side, NFT)
- references/nft-minting.md — NFT mint pages, Metaplex Core, compressed NFTs
Common Issues
| Issue |
Solution |
| "appId required" |
Add appId from Phantom Portal when using google/apple providers |
| Redirect not working |
Allowlist redirectUrl in Phantom Portal |
| React Native crashes |
Import react-native-get-random-values as FIRST import |
| Extension not detected |
Use waitForPhantomExtension() with timeout |
signTransaction error |
Use signAndSendTransaction instead — embedded wallets don't support signTransaction |
Resources
1---2name: phantom-connect3description: Build wallet-connected applications with the Phantom Connect SDK for Solana. Use when integrating Phantom wallets into React, React Native, or vanilla JS/TS apps — including wallet connection, social login (Google/Apple), transaction signing, message signing, token-gated access, crypto payments, and NFT minting. Covers @phantom/react-sdk, @phantom/react-native-sdk, and @phantom/browser-sdk.4license: MIT5---6
7# Phantom Connect SDK
8
9Build wallet-connected Solana applications with the Phantom Connect SDK ecosystem.
10
11## SDK Selection
12
13| Platform | SDK | Package |
14|----------|-----|---------|
15| React web apps | React SDK | `@phantom/react-sdk` |
16| React Native / Expo | React Native SDK | `@phantom/react-native-sdk` |
17| Vanilla JS / Vue / Angular | Browser SDK | `@phantom/browser-sdk` |
18
19## Prerequisites
20
211. **Phantom Portal Account** — Register at [phantom.com/portal](https://phantom.com/portal)
222. **App ID** — Get from Portal → App → Set Up
233. **Allowlisted URLs** — Add domains and redirect URLs in Portal
24
25## Auth Providers
26
27| Provider | Description | Requires appId |
28|----------|-------------|----------------|
29| `"injected"` | Phantom browser extension | No |
30| `"google"` | Google OAuth (embedded wallet) | Yes |
31| `"apple"` | Apple ID (embedded wallet) | Yes |
32
33## Critical Rules
34
351. **Always use `signAndSendTransaction`** — `signTransaction` and `signAllTransactions` are NOT supported for embedded wallets
362. **Always use `LAMPORTS_PER_SOL`** from `@solana/web3.js` for amount conversion — never hardcode `1000000000`
373. **Wrap all async SDK calls in try-catch** — users can reject prompts at any time
384. **Check `isConnected` before signing** — verify wallet connection before any operation
395. **React Native: `react-native-get-random-values` must be the FIRST import** — before any other imports
406. **BrowserSDK must be a singleton** — create one instance per app, never multiple
417. **Import `AddressType` from `@phantom/browser-sdk` only**
428. **Use devnet for testing, mainnet-beta for production** — never test against mainnet with real funds
439. **Never expose private keys** — Phantom handles all signing internally
4410. **Embedded wallet spending limit**: $1,000 USD per day per app per user
4511. **Social login sessions persist 7 days** from last auth event — handle expiration gracefully
46
47## Quick Start
48
49### React SDK
50
51```tsx
52import { PhantomProvider, useModal, usePhantom, darkTheme } from "@phantom/react-sdk";
53import { AddressType } from "@phantom/browser-sdk";
54
55function App() {
56 return (
57 <PhantomProvider
58 config={{
59 providers: ["google", "apple", "injected"],
60 appId: "your-app-id",
61 addressTypes: [AddressType.solana],
62 authOptions: { redirectUrl: "https://yourapp.com/callback" },
63 }}
64 theme={darkTheme}
65 >
66 <YourApp />
67 </PhantomProvider>
68 );
69}
70```
71
72### React Native SDK
73
74```tsx
75// CRITICAL: Must be first import
76import "react-native-get-random-values";
77import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";
78
79// Requires app.json: { "expo": { "scheme": "myapp", "plugins": [...] } }
80```
81
82### Browser SDK
83
84```ts
85import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
86
87const sdk = new BrowserSDK({
88 providers: ["google", "apple", "injected"],
89 appId: "your-app-id",
90 addressTypes: [AddressType.solana],
91 autoConnect: true,
92});
93```
94
95## Reference Docs
96
97For detailed implementation patterns, read these files:
98
99- [references/react-sdk.md](references/react-sdk.md) — Complete React SDK reference (hooks, components, theming)
100- [references/react-native-sdk.md](references/react-native-sdk.md) — Mobile setup, Expo config, deep links
101- [references/browser-sdk.md](references/browser-sdk.md) — Vanilla JS patterns, events, wallet discovery
102- [references/transactions.md](references/transactions.md) — Solana transaction patterns (SOL, SPL tokens)
103- [references/payments.md](references/payments.md) — Crypto payment flows (SOL, USDC, backend verification)
104- [references/token-gating.md](references/token-gating.md) — Token-gated access (client-side, server-side, NFT)
105- [references/nft-minting.md](references/nft-minting.md) — NFT mint pages, Metaplex Core, compressed NFTs
106
107## Common Issues
108
109| Issue | Solution |
110|-------|----------|
111| "appId required" | Add appId from Phantom Portal when using google/apple providers |
112| Redirect not working | Allowlist redirectUrl in Phantom Portal |
113| React Native crashes | Import `react-native-get-random-values` as FIRST import |
114| Extension not detected | Use `waitForPhantomExtension()` with timeout |
115| `signTransaction` error | Use `signAndSendTransaction` instead — embedded wallets don't support `signTransaction` |
116
117## Resources
118
119- [Phantom Portal](https://phantom.com/portal) — App registration
120- [Phantom Docs](https://docs.phantom.com) — Full documentation
121- [SDK Examples](https://github.com/phantom/wallet-sdk/tree/main/examples) — Working demos
122- [MCP Server](https://docs.phantom.com/resources/mcp-server) — AI docs access
majiayu000