privy-integration
Privy Integration
Privy provides authentication and wallet infrastructure for apps built on crypto rails. Embed self-custodial wallets, authenticate users via email/SMS/socials/passkeys/wallets, and transact on EVM and Solana chains.
Key packages:
@privy-io/react-auth- React SDK (auth + wallets)@privy-io/react-auth/solana- Solana wallet hooks@privy-io/react-auth/smart-wallets- Smart wallets (ERC-4337)@privy-io/wagmi- wagmi v2 connector@privy-io/node- Server-side SDK (replaces deprecated@privy-io/server-auth)
Docs index: https://docs.privy.io/llms.txt
Quick Start (React + Next.js)
1. Install
npm i @privy-io/react-auth
2. Wrap app with PrivyProvider
'use client';
import {PrivyProvider} from '@privy-io/react-auth';
export default function Providers({children}: {children: React.ReactNode}) {
return (
<PrivyProvider
appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
config={{
embeddedWallets: {
ethereum: {createOnLogin: 'users-without-wallets'}
}
}}
>
{children}
</PrivyProvider>
);
}
3. Check readiness before using hooks
import {usePrivy} from '@privy-io/react-auth';
function App() {
const {ready, authenticated, user} = usePrivy();
if (!ready) return <div>Loading...</div>;
// Safe to use Privy hooks now
}
4. Login (email OTP example)
import {useLoginWithEmail} from '@privy-io/react-auth';
function LoginForm() {
const {sendCode, loginWithCode} = useLoginWithEmail();
// sendCode({email}) then loginWithCode({code})
}
5. Send a transaction (EVM)
import {useSendTransaction} from '@privy-io/react-auth';
function SendButton() {
const {sendTransaction} = useSendTransaction();
return (
<button onClick={() => sendTransaction({to: '0x...', value: 100000})}>
Send
</button>
);
}
PrivyProvider Config
config={{
// Auth methods enabled for login
loginMethods: ['email', 'sms', 'wallet', 'google', 'apple', 'twitter',
'github', 'discord', 'farcaster', 'telegram', 'passkey'],
// Embedded wallet creation
embeddedWallets: {
ethereum: {createOnLogin: 'users-without-wallets'}, // or 'all-users' | 'off'
solana: {createOnLogin: 'users-without-wallets'}
},
// UI appearance
appearance: {
showWalletLoginFirst: false,
walletChainType: 'ethereum-and-solana', // or 'ethereum-only' | 'solana-only'
theme: 'light', // or 'dark'
accentColor: '#6A6FF5',
logo: 'https://your-logo.png'
},
// External wallet connectors (Solana)
externalWallets: {
solana: {connectors: toSolanaWalletConnectors()}
},
// Solana RPC config (required for embedded wallet UIs)
solana: {
rpcs: {
'solana:mainnet': {
rpc: createSolanaRpc('https://api.mainnet-beta.solana.com'),
rpcSubscriptions: createSolanaRpcSubscriptions('wss://api.mainnet-beta.solana.com')
}
}
}
}}
Wagmi Integration
Import createConfig and WagmiProvider from @privy-io/wagmi (NOT from wagmi).
npm i @privy-io/react-auth @privy-io/wagmi wagmi @tanstack/react-query
import {PrivyProvider} from '@privy-io/react-auth';
import {WagmiProvider, createConfig} from '@privy-io/wagmi';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {mainnet, base} from 'viem/chains';
import {http} from 'wagmi';
const queryClient = new QueryClient();
const wagmiConfig = createConfig({
chains: [mainnet, base],
transports: {[mainnet.id]: http(), [base.id]: http()}
});
// Nesting order: PrivyProvider > QueryClientProvider > WagmiProvider
export default function Providers({children}: {children: React.ReactNode}) {
return (
<PrivyProvider appId="your-app-id" config={privyConfig}>
<QueryClientProvider client={queryClient}>
<WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>
</QueryClientProvider>
</PrivyProvider>
);
}
Use wagmi hooks (useAccount, useSendTransaction, etc.) for read/write actions. Use Privy hooks for wallet connection/creation.
Server-Side Token Verification
npm i @privy-io/node
import {PrivyClient} from '@privy-io/node';
const privy = new PrivyClient({
appId: process.env.PRIVY_APP_ID!,
appSecret: process.env.PRIVY_APP_SECRET!
});
// Verify access token from Authorization header
const {userId} = await privy.verifyAuthToken(accessToken);
Whitelabel Authentication
All auth flows can be fully whitelabeled with custom UI. Key hooks:
| Hook | Auth method |
|---|---|
useLoginWithEmail |
Email OTP (sendCode, loginWithCode) |
useLoginWithSms |
SMS OTP |
useLoginWithOAuth |
Social logins (initOAuth({provider: 'google'})) |
useLoginWithPasskey |
Passkeys |
useSignupWithPasskey |
Passkey signup |
useLoginWithTelegram |
Telegram |
useLogin |
General login with callbacks |
Reference Docs
Read the appropriate reference file for detailed integration guides:
- references/react-sdk.md - All React hooks, PrivyProvider config, wagmi/viem setup, appearance config, whitelabel patterns, wallet UI components
- references/server-sdk.md - Node.js SDK (
@privy-io/node), token types and verification, user management API, REST API, webhooks - references/wallets.md - Embedded wallets (EVM + Solana), smart wallets (ERC-4337), gas sponsorship, external connectors, policies and controls, funding, wallet export
- references/solana.md - Solana-specific setup, connectors, @solana/kit and @solana/web3.js integration, transaction signing, gas sponsorship via fee payer
Key Documentation URLs
More from tenequm/claude-plugins
chrome-extension-wxt
Build Chrome extensions using WXT framework with TypeScript, React, Vue, or Svelte. Use when creating browser extensions, developing cross-browser add-ons, or working with Chrome Web Store projects. Triggers on phrases like "chrome extension", "browser extension", "WXT framework", "manifest v3", or file patterns like wxt.config.ts.
96shadcn-tailwind
Build UIs with Tailwind CSS v4 and shadcn/ui. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tailwind, styling shadcn/ui components, implementing themes, or working with utility-first CSS. Triggers on tailwind, shadcn, utility classes, CSS variables, OKLCH, component styling, theming, dark mode, radix ui.
75gh-cli
GitHub CLI for remote repository analysis, file fetching, codebase comparison, and discovering trending code/repos. Use when analyzing repos without cloning, comparing codebases, or searching for popular GitHub projects.
43skill-factory
Autonomous skill creation agent that analyzes requests, automatically selects the best creation method (documentation scraping via Skill_Seekers, manual TDD construction, or hybrid), ensures quality compliance with Anthropic best practices, and delivers production-ready skills without requiring user decision-making or navigation
33solana-development
Build Solana programs with Anchor framework or native Rust. Use when developing Solana smart contracts, implementing token operations, testing programs, deploying to networks, or working with Solana development. Covers both high-level Anchor framework (recommended) and low-level native Rust for advanced use cases.
30react-typescript
Build React 19 applications with TypeScript. Covers Actions, Activity, use() hook, React Compiler, ref-as-prop, useEffectEvent, and strict TypeScript patterns. Use when creating components, managing state, typing props, handling events, using hooks, or working with React 19 features. Triggers on react, typescript, tsx, component types, hook types, react 19, react compiler, actions, use hook, useEffectEvent, activity, import defer.
19