NextJS Auth + Phantom Wallet Integration

A comprehensive Next.js application featuring Google/Email authentication via NextAuth and Phantom wallet integration for Solana-based transactions.

Features

• ✅ Google OAuth Authentication - Secure login with Google accounts
• ✅ Email Authentication - Magic link authentication via email
• ✅ Phantom Wallet Integration - Connect and verify Solana wallets
• ✅ Mobile Responsive - Optimized for both desktop and mobile devices
• ✅ Security First - Rate limiting, CSRF protection, and input validation
• ✅ Performance Optimized - Service worker caching and lazy loading
• ✅ Session Management - Secure JWT-based sessions
• ✅ Wallet Verification - Cryptographic signature verification

Tech Stack

• Next.js 13.5.6 - React framework with App Router
• NextAuth.js 4.24.5 - Authentication library
• Prisma - Database ORM
• Solana Web3.js - Solana blockchain integration
• Tailwind CSS - Styling framework
• TypeScript - Type safety

Prerequisites

• Node.js 18+
• PostgreSQL database
• Google OAuth credentials
• Email service (Gmail recommended)

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd nextjs-auth-wallet-connect

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Fill in your environment variables:

   # NextAuth Configuration
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-secret-key-here
   
   # Google OAuth
   GOOGLE_CLIENT_ID=your-google-client-id
   GOOGLE_CLIENT_SECRET=your-google-client-secret
   
   # Database
   DATABASE_URL="postgresql://username:password@localhost:5432/nextjs_auth_wallet"
   
   # Email Configuration
   EMAIL_SERVER_HOST=smtp.gmail.com
   EMAIL_SERVER_PORT=587
   EMAIL_SERVER_USER=your-email@gmail.com
   EMAIL_SERVER_PASSWORD=your-app-password
   EMAIL_FROM=noreply@yourapp.com
   
   # Solana Configuration
   SOLANA_RPC_URL=https://api.mainnet-beta.solana.com
   SOLANA_NETWORK=mainnet-beta

4. Set up the database

   npx prisma generate
   npx prisma db push

5. Run the development server

   npm run dev

Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URIs:
   • http://localhost:3000/api/auth/callback/google (development)
   • https://yourdomain.com/api/auth/callback/google (production)

Email Authentication Setup

1. Enable 2-factor authentication on your Gmail account
2. Generate an App Password:
   • Go to Google Account settings
   • Security → 2-Step Verification → App passwords
   • Generate password for "Mail"
3. Use the generated password in EMAIL_SERVER_PASSWORD

Phantom Wallet Integration

The app automatically detects and connects to Phantom wallets. Users can:

1. Connect Wallet - Click "Connect Phantom Wallet" button
2. Sign Message - Wallet signs a verification message
3. Verify Ownership - Cryptographic verification of wallet ownership
4. Disconnect - Remove wallet connection

API Endpoints

Authentication

• GET /api/auth/signin - Sign in page
• POST /api/auth/signin/google - Google OAuth
• POST /api/auth/signin/email - Email authentication

Wallet Operations

• POST /api/wallet/connect - Connect and verify wallet
• POST /api/wallet/disconnect - Disconnect wallet
• POST /api/wallet/verify - Verify wallet signature

Protected Routes

• GET /api/protected/example - Example protected endpoint

Security Features

• Rate Limiting - Prevents brute force attacks
• CSRF Protection - Cross-site request forgery prevention
• Input Validation - Sanitizes all user inputs
• Signature Verification - Cryptographic wallet verification
• Secure Headers - Security headers for all responses
• Session Management - Secure JWT-based sessions

Mobile Optimization

• Touch-friendly UI - Optimized for mobile interactions
• Responsive Design - Works on all screen sizes
• Progressive Web App - Service worker for offline functionality
• Mobile Wallet Support - Phantom mobile app integration

Performance Optimizations

• Service Worker Caching - Static asset caching
• Lazy Loading - Component lazy loading
• Image Optimization - Optimized image delivery
• Bundle Splitting - Code splitting for faster loads
• Resource Hints - Preconnect to external domains

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Set environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

Troubleshooting

Common Issues

1. "Phantom wallet not found"

   • Ensure Phantom extension is installed
   • Check if extension is enabled

2. Database connection errors

   • Verify DATABASE_URL is correct
   • Ensure PostgreSQL is running
   • Run npx prisma db push

3. Google OAuth errors

   • Check client ID and secret
   • Verify redirect URIs
   • Ensure Google+ API is enabled

4. Email authentication not working

   • Verify email credentials
   • Check if App Password is correct
   • Ensure 2FA is enabled on Gmail

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For support, please open an issue on GitHub or contact the development team.

---

Note: This project is compatible with Next.js 13.5.6 and includes optimizations for older versions. For the latest Next.js features, consider upgrading to Next.js 14+.