Fix Google OAuth hanging issue with clean Supabase SSR implementation

.claude/settings.local.json

@@ -0,0 +1,42 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(ls:*)",
+      "Bash(npm run dev:*)",
+      "Bash(curl:*)",
+      "Bash(tmux kill-session:*)",
+      "Bash(true)",
+      "Bash(tmux new-session:*)",
+      "Bash(tmux list-sessions:*)",
+      "Bash(brew install:*)",
+      "Bash(tmux capture-pane:*)",
+      "Bash(grep:*)",
+      "Bash(claude mcp add:*)",
+      "Bash(claude mcp:*)",
+      "Bash(tmux send-keys:*)",
+      "Bash(mkdir:*)",
+      "Bash(cp:*)",
+      "WebFetch(domain:supabase.com)",
+      "Bash(rm:*)",
+      "Bash(npm run build:*)",
+      "Bash(mv:*)",
+      "Bash(npm run rev --debug)",
+      "Bash(npm run:*)",
+      "Bash(tmux attach-session:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "Bash(gh pr create:*)",
+      "Bash(gh pr:*)",
+      "Bash(git fetch:*)",
+      "Bash(git rebase:*)",
+      "Bash(gh run list:*)",
+      "Bash(gh run view:*)",
+      "Bash(npm run lint)",
+      "Bash(git pull:*)",
+      "Bash(npm run type-check:*)"
+    ],
+    "deny": []
+  }
+}

CLAUDE.md

@@ -0,0 +1,175 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Core Development
+- `npm run dev` - Start development server
+- `npm run build` - Production build with type checking
+- `npm run lint` - ESLint checking
+- `npm run type-check` - TypeScript validation
+
+### Testing Suite
+- `npm test` - Unit tests with Jest
+- `npm run test:ci` - CI testing with coverage
+- `npm run test:e2e` - Playwright E2E tests (Chrome, Firefox, Safari, Mobile)
+- `npm run test:cross-browser` - Multi-browser testing
+- `npm run coverage` - Generate test coverage reports
+
+### Single Test Execution
+- `npm test -- --testNamePattern="test name"` - Run specific Jest test
+- `npx playwright test tests/specific-test.spec.ts` - Run specific E2E test
+
+### Testing Credentials
+- **Email/Password**: `jackson_rhoden@outlook.com` / `numfIt-8rorpo-fumwym`
+- **Google OAuth**: `jacksonrhoden64@googlemail.com`
+- **Test Events**: `/events/75c8904e-671f-426c-916d-4e275806e277`
+
+## Architecture Overview
+
+### Tech Stack
+- **Next.js 15** with App Router and React 19
+- **TypeScript** with strict mode
+- **Supabase** for database, auth, and real-time features
+- **Stripe** for payment processing with webhooks
+- **Google Calendar API** integration (primary client requirement)
+- **Tailwind CSS** + **Shadcn/UI** components
+
+### Key Directory Structure
+```
+/app/                      # Next.js App Router pages
+├── api/                   # API routes (auth, events, calendar, checkout, webhooks)
+├── events/                # Event discovery and details
+├── staff/                 # Staff dashboard
+└── auth/                  # Authentication pages
+
+/components/
+├── ui/                    # Shadcn/UI base components
+├── auth/                  # Authentication components
+├── events/                # Event-specific components
+└── dashboard/             # Dashboard components
+
+/lib/
+├── database/             # Schema, migrations, types
+├── auth.ts              # Authentication logic
+├── google-calendar.ts   # Google Calendar integration
+├── stripe.ts            # Stripe integration
+└── supabase.ts          # Supabase client configuration
+```
+
+### Authentication & Security
+- **Supabase Auth** with Google OAuth 2.0
+- **Row Level Security (RLS)** policies on all database tables
+- **Middleware protection** for `/dashboard`, `/profile`, `/admin` routes
+- **Google Calendar tokens** encrypted and stored securely
+- User roles: `user`, `organizer`, `admin`
+
+### Database Architecture
+- **PostgreSQL** via Supabase with real-time subscriptions
+- **Migrations** in `/lib/database/migrations/`
+- **Type generation** from database schema
+- **RLS policies** for multi-tenant security
+
+### Google Calendar Integration
+This is a **primary client requirement**:
+- **OAuth 2.0 flow** with PKCE for security
+- **Token refresh** handling with encryption
+- **Two-way sync**: create, update, delete events
+- **Fallback to .ics files** when OAuth unavailable
+- Implementation in `/lib/google-calendar.ts`
+
+### Payment Processing
+- **Stripe Checkout** integration
+- **Webhook handling** with signature verification at `/api/webhooks/stripe`
+- **Multiple ticket types** with pricing and capacity
+- **Refund system** with automated processing
+
+### Testing Strategy
+- **Unit tests**: Jest with jsdom environment
+- **E2E tests**: Playwright across Chrome, Firefox, Safari, Mobile
+- **Load testing**: K6 configuration available
+- **Coverage reporting**: HTML, LCOV, JSON formats
+- Tests run in parallel for CI optimization
+
+#### Test Coverage Requirements
+- **CRITICAL**: 100% coverage for payment flows (Stripe integration)
+- **CRITICAL**: 100% coverage for RSVP flows (including Google Calendar)
+- **Comprehensive E2E tests** with Playwright for complete user journeys
+- **Unit tests** for all utility functions and API routes
+
+#### Test Patterns
+```typescript
+// E2E test structure
+test('RSVP flow with Google Calendar integration', async ({ page }) => {
+  await page.goto('/events/test-event');
+  await page.click('[data-testid="rsvp-button"]');
+  await page.click('[data-testid="add-to-calendar"]');
+  // Verify complete user journey
+});
+```
+
+### Development Rules & Patterns
+
+#### Code Style & Structure
+- **TypeScript Standards**: Use strict mode, define interfaces for all data structures, implement proper error handling with typed errors
+- **File Organization**: Use lowercase with dashes for directories (e.g., `components/auth-wizard`)
+- **Component Patterns**: Use functional and declarative programming patterns, avoid classes, use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`)
+- **Code Length**: Don't create files longer than 300 lines (split into modules)
+
+#### Next.js 15 App Router Patterns
+- Use App Router (`app/` directory) exclusively
+- Server Components by default, Client Components only when needed
+- Minimize use of `'use client'`, `useEffect`, and `setState`
+- Implement proper SEO with metadata API
+- Use dynamic imports for code splitting and optimization
+
+#### Supabase Integration (CRITICAL)
+- **ALWAYS use @supabase/ssr** for Next.js integration
+- **NEVER use deprecated @supabase/auth-helpers-nextjs**
+- **CRITICAL**: Use ONLY `getAll` and `setAll` cookie methods
+- **NEVER use** individual cookie methods (`get`, `set`, `remove`)
+- Use Row-Level Security (RLS) policies for all tables
+- Implement proper database types with `supabase gen types typescript`
+
+#### Component Patterns
+- Use Shadcn/ui for base components with semantic Tailwind classes
+- Text color logic: `className={hasActiveFilter ? 'text-foreground' : 'text-muted-foreground'}`
+- Implement proper loading states and optimistic updates
+- Use react-hook-form with Zod validation for forms
+- Design for touch-friendly mobile interaction (44px minimum)
+
+#### Error Handling & Security
+- Use early returns for error conditions and guard clauses
+- Implement custom error types for consistent error handling
+- Never expose sensitive data in client code or logs
+- Validate all API inputs and implement proper CORS policies
+- Handle sensitive data (calendar tokens) with encryption
+
+#### Development Methodology
+- **System 2 Thinking**: Approach problems with analytical rigor, break down requirements into manageable parts
+- **Tree of Thoughts**: Evaluate multiple solutions and their consequences before implementation
+- **Iterative Refinement**: Consider improvements, edge cases, and optimizations before finalizing code
+
+#### Performance Optimization
+- **Next.js Optimization**: Use Server Components for data fetching, implement proper caching strategies, optimize images with Next.js Image component
+- **Database Optimization**: Use proper indexing for Supabase queries, implement pagination for event listings, cache frequently accessed data
+- **Mobile Performance**: Minimize JavaScript bundle size, use progressive loading, optimize for slow networks
+
+#### Business Logic Patterns
+- **Event Management**: Support both free RSVP and paid ticketing, implement capacity management, handle event status (upcoming, in-progress, past, full)
+- **User Flows**: Guest checkout must work seamlessly, account creation should be optional but encouraged, calendar integration should work for both guests and registered users
+- **Mobile-First**: Design for mobile viewport first (320px+), use touch-friendly interactive elements, implement swipe gestures where appropriate
+
+### Environment Configuration
+Required environment variables:
+- `NEXT_PUBLIC_SUPABASE_URL` and `SUPABASE_SERVICE_ROLE_KEY`
+- `STRIPE_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET`
+- `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET`
+- `RESEND_API_KEY` for transactional emails
+
+### Deployment
+- **Platform**: Vercel with auto-deployment on main branch
+- **Live URL**: https://local-loop-qa.vercel.app
+- **CI/CD**: 6 active GitHub workflows including performance testing and monitoring
+- **Database backups**: Automated daily backups configured

app/api/debug-oauth/route.ts

@@ -1,25 +1,79 @@
 import { NextResponse } from 'next/server'
 import { createGoogleCalendarService } from '@/lib/google-calendar'
+import { supabase } from '@/lib/supabase'
 
 export async function GET() {
     try {
+        console.log('🔍 [Debug] OAuth debug endpoint called')
+
+        // Test Google Calendar service (this is working fine)
         const googleCalendarService = createGoogleCalendarService()
         const authUrl = googleCalendarService.getAuthUrl('debug-test')
 
-        return NextResponse.json({
+        // Test Supabase Auth configuration
+        let supabaseAuthTest = null
+        let supabaseAuthError = null
+
+        try {
+            // Test if we can initialize OAuth flow with Supabase
+            const { data: authData, error: authError } = await supabase.auth.signInWithOAuth({
+                provider: 'google',
+                options: {
+                    redirectTo: `${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/auth/callback`,
+                    skipBrowserRedirect: true
+                }
+            })
+
+            supabaseAuthTest = {
+                hasData: !!authData,
+                hasUrl: !!authData?.url,
+                provider: authData?.provider,
+                hasError: !!authError
+            }
+
+            if (authError) {
+                supabaseAuthError = authError as any // Type assertion to handle the error properly
+            }
+        } catch (err: any) {
+            supabaseAuthError = err
+        }
+
+        const response = {
             success: true,
-            authUrl,
+            timestamp: new Date().toISOString(),
+            googleCalendar: {
+                authUrl,
+                configured: true
+            },
+            supabaseAuth: {
+                test: supabaseAuthTest,
+                error: supabaseAuthError?.message || null,
+                config: {
+                    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL ? 'SET' : 'NOT SET',
+                    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ? 'SET' : 'NOT SET'
+                }
+            },
             environment: {
                 NODE_ENV: process.env.NODE_ENV,
                 GOOGLE_REDIRECT_URI: process.env.GOOGLE_REDIRECT_URI || 'NOT SET',
                 NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL || 'NOT SET',
-                GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID ? 'SET' : 'NOT SET'
+                GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID ? 'SET' : 'NOT SET',
+                NEXT_PUBLIC_ENABLE_GOOGLE_AUTH: process.env.NEXT_PUBLIC_ENABLE_GOOGLE_AUTH || 'default(true)'
+            },
+            pkceInfo: {
+                note: 'PKCE is handled automatically by Supabase Auth',
+                checkClientSide: 'Check browser storage for supabase.auth.code_verifier'
             }
-        })
+        }
+
+        console.log('🔍 [Debug] OAuth debug response:', response)
+        return NextResponse.json(response)
     } catch (error) {
+        console.error('💥 [Debug] OAuth debug error:', error)
         return NextResponse.json({
             success: false,
             error: String(error),
+            timestamp: new Date().toISOString(),
             environment: {
                 NODE_ENV: process.env.NODE_ENV,
                 GOOGLE_REDIRECT_URI: process.env.GOOGLE_REDIRECT_URI || 'NOT SET',

app/auth/auth-code-error/page.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+
+export default function AuthCodeError() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="w-full max-w-sm space-y-4 text-center">
+        <h1 className="text-2xl font-bold">Authentication Error</h1>
+        <p className="text-muted-foreground">
+          Sorry, we couldn&apos;t sign you in. This could be due to:
+        </p>
+        <ul className="text-sm text-muted-foreground space-y-1">
+          <li>• The authorization code was invalid or expired</li>
+          <li>• There was a network issue during sign-in</li>
+          <li>• The OAuth flow was interrupted</li>
+        </ul>
+        <div className="pt-4">
+          <Link
+            href="/auth/login"
+            className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-8 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          >
+            Try Again
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}