https://github.com/naveensing575/next-pay-flow
A modern subscription management platform built with Next.js 15, featuring secure payment processing with Razorpay and Google OAuth authentication.
https://github.com/naveensing575/next-pay-flow
framer-motion googleoauth hmac-authentication mongodb nextauth nextjs payment-gateway razorpay shadcn-ui tailwindcss typescript
Last synced: about 2 months ago
JSON representation
A modern subscription management platform built with Next.js 15, featuring secure payment processing with Razorpay and Google OAuth authentication.
- Host: GitHub
- URL: https://github.com/naveensing575/next-pay-flow
- Owner: naveensing575
- Created: 2025-09-12T09:46:55.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-10-04T08:28:24.000Z (8 months ago)
- Last Synced: 2025-10-08T04:33:16.924Z (8 months ago)
- Topics: framer-motion, googleoauth, hmac-authentication, mongodb, nextauth, nextjs, payment-gateway, razorpay, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://next-pay-flow.vercel.app
- Size: 311 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next Pay Flow
A modern subscription management platform built with Next.js 15, featuring secure payment processing with Razorpay and Google OAuth authentication.
## ScreenShots
### Login Page
### Dashboard Page
### Payment for professional plan
### Updated Subscription
## Features
- **Authentication System**
- Google OAuth integration with NextAuth.js
- Google One Tap login support
- Secure session management with MongoDB adapter
- **Payment Integration**
- Razorpay payment gateway integration
- Secure payment verification with HMAC signature validation
- Multiple subscription plans (Basic, Professional, Business)
- Real-time payment status updates
- Payment history with invoice generation
- PDF invoice downloads for completed transactions
- Advanced rate limiting protection for payment endpoints
- **Dashboard & UI**
- Modern, responsive dashboard with Framer Motion animations
- Dark/Light theme support
- Real-time subscription status display
- Account management interface
- Custom error pages (404, 500)
- Interactive plan comparison table
- **User Management**
- Account settings page with profile updates
- Subscription management and billing history
- Account deletion with GDPR compliance
- User preferences management
- **Support System**
- Beautiful contact form with glass morphism design
- Email notifications via Resend
- User information auto-populated in support requests
- Direct email communication channel
- **Database Integration**
- MongoDB for user and subscription data
- Optimized database queries with proper ObjectId handling
- Session-based user plan updates
## Tech Stack
- **Frontend**: Next.js 15, React 19, TypeScript, Tailwind CSS 4
- **Animation**: Framer Motion
- **Authentication**: NextAuth.js with Google OAuth
- **Database**: MongoDB with official Node.js driver
- **Payments**: Razorpay
- **Email**: Resend for transactional emails
- **PDF Generation**: jsPDF with jsPDF-AutoTable
- **UI Components**: Shadcn/ui, Lucide React icons
- **Styling**: Tailwind CSS with custom theme support
- **Notifications**: Sonner for toast notifications
- **Rate Limiting**: Upstash Redis with @upstash/ratelimit for production-grade API protection
## Project Structure
```
src/
├── app/
│ ├── api/
│ │ ├── auth/[...nextauth]/ # NextAuth configuration
│ │ ├── payments/ # Payment API routes
│ │ │ ├── create-order/ # Order creation
│ │ │ ├── verify-payment/ # Payment verification
│ │ │ ├── history/ # Payment history
│ │ │ └── invoice/ # PDF invoice generation
│ │ ├── user/ # User management APIs
│ │ │ ├── update-profile/ # Profile updates
│ │ │ └── delete-account/ # Account deletion
│ │ └── support/ # Support system
│ │ └── send-message/ # Email support requests
│ ├── dashboard/ # User dashboard
│ │ ├── billing/ # Payment history & invoices
│ │ ├── settings/ # Account settings
│ │ └── support/ # Support contact page
│ ├── login/ # Login page
│ ├── error.tsx # Global error handler
│ └── not-found.tsx # 404 page
├── components/
│ ├── auth/ # Authentication components
│ ├── dashboard/ # Dashboard comparison table
│ ├── providers/ # React providers
│ ├── theme/ # Theme toggle components
│ └── ui/ # Reusable UI components
└── lib/ # Utility functions and configurations
├── mongodb.ts # MongoDB client configuration
├── razorpay.ts # Razorpay client setup
└── rate-limit.ts # Rate limiting configuration
```
## Setup Instructions
1. **Clone the repository**
```bash
git clone https://github.com/yourusername/next-pay-flow.git
cd next-pay-flow
```
2. **Install dependencies**
```bash
npm install
```
3. **Environment Variables**
Create a `.env` file in the root directory with the following variables:
```env
# MongoDB Configuration
MONGODB_URI=your-mongodb-connection-string
# Google OAuth (Server-side)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# Google OAuth (Client-side - Only Client ID is safe to expose)
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
# NextAuth Configuration
NEXTAUTH_SECRET=your-nextauth-secret-key
# Razorpay Configuration
RAZORPAY_KEY_ID=your-razorpay-key-id
RAZORPAY_KEY_SECRET=your-razorpay-secret-key
NEXT_PUBLIC_RAZORPAY_KEY_ID=your-razorpay-key-id
RAZORPAY_WEBHOOK_SECRET=your-webhook-secret (optional)
# Email Configuration (Resend)
RESEND_API_KEY=your-resend-api-key
# Upstash Redis Configuration (for Rate Limiting)
UPSTASH_REDIS_REST_URL=your-upstash-redis-url
UPSTASH_REDIS_REST_TOKEN=your-upstash-redis-token
# Application Environment
NODE_ENV=development
```
**Important Notes:**
- Get Resend API key from: https://resend.com (Free tier: 3,000 emails/month)
- Get Google OAuth credentials from: https://console.cloud.google.com
- Get Razorpay keys from: https://dashboard.razorpay.com
- Get Upstash Redis credentials from: https://upstash.com (Free tier: 10,000 requests/day)
- Never expose `GOOGLE_CLIENT_SECRET` or `RAZORPAY_KEY_SECRET` to the client
- Generate `NEXTAUTH_SECRET` using: `openssl rand -base64 32`
**Setting up Upstash Redis:**
1. Go to https://upstash.com and create a free account
2. Create a new Redis database (select any region close to you)
3. Copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` from the database details
4. Add them to your `.env` file
4. **Run the development server**
```bash
npm run dev
```
5. **Open your browser**
Navigate to `http://localhost:3000`
## Key Implementation Details
### Authentication Flow
- Integrated NextAuth.js with MongoDB adapter for persistent sessions
- Custom session callbacks to include user subscription data
- Google OAuth and Google One Tap for seamless login experience
### Payment Processing
- Secure order creation with Razorpay API
- Client-side payment modal integration
- Server-side payment verification using HMAC signatures
- Automatic user plan updates upon successful payment
### Database Design
- User documents with embedded subscription objects
- Proper ObjectId handling for MongoDB queries
- Session-based real-time data updates
### Security Features
- CSRF protection with NextAuth
- Payment signature verification
- Environment variable protection for sensitive data
- Secure API route implementations
- Production-grade rate limiting with Upstash Redis
- **Serverless-compatible** - Works perfectly in Vercel/Netlify/AWS Lambda
- **User-based rate limiting** for authenticated endpoints (prevents per-user abuse)
- **IP-based rate limiting** for public endpoints (webhook protection)
- **Sliding window algorithm** - More accurate than fixed windows
- Configurable limits per endpoint:
- Create Order: 5 requests/minute per user
- Verify Payment: 10 requests/minute per user
- Webhook: 100 requests/minute per IP
- Advanced headers: `Retry-After`, `X-RateLimit-Limit`, `X-RateLimit-Reset`
- Built-in analytics for monitoring rate limit hits
## API Endpoints
### Authentication
- `/api/auth/*` - NextAuth endpoints (sign in, sign out, session)
### Payments
- `POST /api/payments/create-order` - Create Razorpay order (Rate limited: 5 req/min per user)
- `POST /api/payments/verify-payment` - Verify and process payment (Rate limited: 10 req/min per user)
- `GET /api/payments/history` - Get user payment history
- `POST /api/payments/invoice` - Generate and download PDF invoice
- `POST /api/payments/webhook` - Handle Razorpay webhooks (Rate limited: 100 req/min per IP)
### User Management
- `POST /api/user/update-profile` - Update user profile information
- `DELETE /api/user/delete-account` - Delete user account (GDPR compliant)
### Support
- `POST /api/support/send-message` - Send support request via email
## Deployment
The application is ready for deployment on platforms like Vercel, with proper environment variable configuration for production MongoDB and Razorpay credentials.
## Contributing
1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request
## License
MIT License - see LICENSE file for details