If you haven’t set up Privy yet, follow our React quickstart guide
to get your app ID and configure your app.
Privy’s React SDK provides a secure way to authenticate users and manage wallets in your frontend application. Learn more about getting started with React.
For the Privy React SDK to work with Next.js using webpack, you need to add a custom webpack configuration. If you are not using Yarn, you can skip this step. Add the code below to your next.config.ts file:
In order to detect external Solana wallets, your app needs to enable Solana connectors.
If you also wish to use Privy wallets to send transactions, then you must define solana RPC clients for Privy to use.
Report incorrect code
Copy
Ask AI
// components/providers.tsx'use client';import {PrivyProvider} from '@privy-io/react-auth';import {toSolanaWalletConnectors} from '@privy-io/react-auth/solana';import {createSolanaRpc, createSolanaRpcSubscriptions} from '@solana/kit';import {ReactNode} from 'react';export function Providers({children}: {children: ReactNode}) { return ( <PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID} config={{ solana: { rpcs: { 'solana:mainnet': { rpc: createSolanaRpc('https://api.mainnet-beta.solana.com'), // or your custom RPC endpoint rpcSubscriptions: createSolanaRpcSubscriptions('wss://api.mainnet-beta.solana.com') // or your custom RPC endpoint } } }, appearance: { showWalletLoginFirst: true, walletChainType: 'solana-only' }, loginMethods: ['wallet', 'email'], externalWallets: { solana: { connectors: toSolanaWalletConnectors() // For detecting EOA browser wallets } }, embeddedWallets: { createOnLogin: 'all-users' } }} > {children} </PrivyProvider> );}
config.solana.rpcs is only required when using Privy’s embedded wallet UIs (UI signTransaction
and signAndSendTransaction). If your app only uses external Solana wallets, you can omit the
solana.rpcs configuration and prepare/send transactions directly via your chosen RPC client.
With Privy now integrated into your app, you can leverage its hooks to authenticate users, generate embedded wallets, and facilitate message and transaction signing.
To create a Solana embedded wallet, you can use the useWallets hook from @privy-io/react-auth/solana. This hook provides a createWallet function to create an embedded wallet.
Report incorrect code
Copy
Ask AI
// components/createWalletButton.tsx'use client';import {useWallets, useCreateWallet} from '@privy-io/react-auth/solana';export function CreateWalletButton(props: {createAdditional: boolean}) { const {ready} = useWallets(); const {createWallet} = useCreateWallet(); if (!ready) { return <div>Loading...</div>; } const handleCreateWallet = async () => { try { // If createAdditional is true, it will create an additional HD wallet for the user. const wallet = await createWallet({createAdditional: props.createAdditional}); console.log('Embedded wallet created:', wallet); } catch (error) { console.error('Error creating embedded wallet:', error); } }; return <button onClick={handleCreateWallet}>Create Embedded Wallet</button>;}
Privy provides the useSignMessage, useSignTransaction, and useSignAndSendTransaction hooks to sign messages and transactions with embedded wallets. You can also use linked EOA wallets directly for signing messages and transactions.
This guide has shown you how to integrate Privy with Solana into an application. You can now log in users, create embedded wallets, and sign messages and transactions using the Privy React SDK.