Stripe Integration and Authentication Implementation

Overview

This PR implements Stripe payment integration and authentication features into our Next.js application, enabling subscription-based features, payment processing, and user authentication.

Changes Made

1. Authentication Implementation

Firebase Authentication

• Configured Firebase authentication in src/lib/firebase.ts
• Implemented Google Sign-In authentication
• Added authentication state management

Components

• Created ProfileDropdown.tsx for user profile management:
  • User avatar display
  • Login/Logout options
  • Profile settings access
• Added authentication UI elements:
  • Login button
  • User profile section
  • Logout functionality

Profile Management

• Added src/app/profile/page.tsx for user profile management
• Added user settings and preferences

2. Environment Configuration

Added Stripe API keys and webhook secret:

STRIPE_SECRET_KEY
STRIPE_PUBLISHABLE_KEY
STRIPE_WEBHOOK_SECRET

3. Stripe Integration

Stripe Configuration

• Created src/lib/stripe.ts to initialize and export the Stripe instance
• Configured Stripe with the latest API version (2025-01-27.acacia)

API Routes Implementation

• Created src/app/api/stripe/create-checkout/route.ts:
  • Implements POST endpoint for creating Stripe checkout sessions
  • Handles different subscription plans (pro/basic)
  • Configures success and cancel URLs for the checkout flow
  • Returns checkout session URL for client-side redirection
• Created src/app/api/stripe/webhooks/route.ts:
  • Implements POST endpoint for handling Stripe webhook events
  • Processes checkout.session.completed events
  • Processes invoice.payment_succeeded events
  • Updates user subscription status in Firestore
  • Implements security verification using Stripe signatures

4. Database Updates

Added new fields to user documents in Firestore:

Authentication data:

• User profile information
• Authentication state
• Profile picture URL

Stripe-related data:

• stripeCustomerId: Unique identifier for the customer in Stripe
• stripeSubscriptionId: Active subscription ID
• stripePriceId: Current price plan ID
• stripeCurrentPeriodEnd: Subscription period end date
• stripeSubscriptionStatus: Current status of the subscription

Dependencies Added

• Firebase Authentication for user management
• Firebase/Firestore for database operations
• Stripe SDK for payment processing

Fixes #1751