Privy Integration Setup Guide

Overview

This guide covers the proper setup and configuration of Privy in the ƒxyz Network App, based on the latest Privy documentation.

Key Issues Fixed

1. Content Security Policy (CSP)

Added missing WalletConnect explorer API domain to CSP in next.config.js:

connect-src 'self' 
  https://*.privy.io 
  wss://*.privy.io 
  https://explorer-api.walletconnect.com  // ADDED
  https://pulse.walletconnect.org 
  https://api.web3modal.org 
  https://*.walletconnect.org 
  wss://*.walletconnect.org 
  https://*.reown.com;

2. GraphQL Endpoint Configuration

Fixed GraphQL client to use correct port in development:

url: process.env.NODE_ENV === 'production' 
  ? '/graphql' 
  : 'http://localhost:3002/api/graphql'  // Fixed port and endpoint

Required Environment Variables

# Privy Configuration
NEXT_PUBLIC_PRIVY_APP_ID=your-privy-app-id
PRIVY_APP_ID=your-privy-app-id
PRIVY_APP_SECRET=your-privy-app-secret

# WalletConnect
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your-walletconnect-project-id

# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:3000

Privy Provider Configuration

The Privy provider is configured in packages/auth/provider.tsx with:

Authentication Methods: wallet, twitter, telegram
Embedded Wallets: Created for all users on login
Solana Support: Enabled with connectors
WalletConnect: Enabled with proper project ID
Error Handling: Comprehensive error suppression for WalletConnect issues

Key Privy Documentation References

Based on Privy's troubleshooting guide:

1. HTTPS Requirement

Embedded wallets require HTTPS in production (WebCrypto API requirement)
localhost is treated as secure context
Deployment MUST use https:// protocol

2. CORS and Rate Limiting

Base RPC URL CORS errors often indicate rate limiting
Use proper RPC endpoints with appropriate rate limits

3. Installation Requirements

From Privy installation docs:

React 18+ required
TypeScript 5+ required
For yarn users: Must install Solana dependencies or add to webpack externals

4. Quickstart Implementation

Based on Privy quickstart:

Use useLoginWithEmail for email authentication
Embedded wallets can be created automatically or manually
Support for both EVM and Solana transactions

Architecture Recommendations

1. Authentication Flow

Use Privy's built-in token management
Implement proper error boundaries
Handle missing tokens gracefully

2. GraphQL Integration

Consider implementing a proper GraphQL server (Apollo Server)
Add authentication middleware
Define proper GraphQL schema

3. Security Best Practices

Always use HTTPS in production
Configure CSP properly for all required domains
Handle authentication tokens consistently
Implement proper error boundaries

Files Cleaned Up

privy-live-config-new.json - Empty unused file
debug-env.js - Unused debug script
auth-drift-ci-summary.txt - Old CI summary
auth-drift-report.md - Old auth drift report
sentry.edge.config.js - Unused Sentry config
sentry.server.config.js - Unused Sentry config

Next Steps

Ensure all environment variables are properly set
Test authentication flow with all login methods
Verify embedded wallet creation
Test transactions on both EVM and Solana
Monitor for any WalletConnect CSP violations
Consider implementing proper GraphQL server instead of mock

Troubleshooting

Common Issues

"TypeError: Failed to fetch"
- Check CSP configuration
- Verify all required domains are whitelisted
- Check for rate limiting on RPC endpoints
Port conflicts
- Kill existing processes: lsof -ti:3000 | xargs kill -9
- Use different port if needed
WalletConnect errors
- Ensure project ID is valid
- Check CSP includes all WalletConnect domains
- Verify HTTPS in production

Privy Integration Setup Guide

On this page