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:
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 useSolanaWallets hook from @privy-io/react-auth. This hook provides a createWallet function to create an embedded wallet.
Copy
Ask AI
// components/createWalletButton.tsx'use client';import {useSolanaWallets} from '@privy-io/react-auth/solana';export function CreateWalletButton(props: {createAdditional: boolean}) { const {createWallet, ready} = useSolanaWallets(); 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 useSendTransaction hooks to sign messages and transactions with embedded wallets. You can also use linked EOA wallets directly for signing messages and transactions.
Before signing or sending a transaction, you need to prepare it. Here’s how you can create a simple SOL transfer transaction:
Copy
Ask AI
import {Transaction, SystemProgram, PublicKey, Connection} from '@solana/web3.js';const generateTransaction = async () => { // Simple SOL transfer transaction const transferInstruction = SystemProgram.transfer({ fromPubkey: new PublicKey(wallets[0].address), // Replace with the sender's address toPubkey: new PublicKey('RecipientPublicKeyHere'), // Replace with the recipient's address lamports: 1000000 // Amount in lamports (1 SOL = 1,000,000,000 lamports) }); const tx = new Transaction().add(transferInstruction); const connection = new Connection('https://api.mainnet-beta.solana.com'); // Replace with your Solana RPC endpoint const recentBlockhash = await connection.getLatestBlockhash(); tx.feePayer = new PublicKey(wallets[0].address); // Set fee payer tx.recentBlockhash = recentBlockhash.blockhash; // Replace with a recent blockhash return tx;};
This code creates a transaction object that can be signed or sent later. Replace the placeholder values with actual addresses.
In the case of EOA wallets, you can use the wallet methods directly from the wallet object. For example, to sign a message with an EOA wallet, you can use the signMessage method from the wallet object:
Copy
Ask AI
// ... code from previous exampleconst handleSignMessageWithEOA = async () => { try { const wallet = wallets.find((w) => w.connectorType === 'solana_adapter'); // Find the first EOA wallet if (!wallet) throw new Error('No EOA wallet found'); const signature = await wallet.signMessage(new TextEncoder().encode('Hello from Privy!')); console.log('Message signed with EOA wallet:', signature); } catch (error) { console.error('Error signing message with EOA wallet:', error); }};const handleSendTransactionWithEOA = async () => { try { const wallet = wallets.find((w) => w.connectorType === 'solana_adapter'); // Find the first EOA wallet if (!wallet) throw new Error('No EOA wallet found'); const transaction = await generateTransaction(); // The transaction prepared earlier const transactionSignature = await wallet.sendTransaction(transaction, connection); console.log('Transaction sent with EOA wallet:', transactionSignature); } catch (error) { console.error('Error sending transaction with EOA wallet:', error); }};
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.