Fix Google OAuth redirect to use authorization code flow with PKCE

.env.example

@@ -6,6 +6,9 @@ RAZORPAY_KEY_SECRET=your_razorpay_secret
 # Supabase
 NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+# Note: In Supabase Dashboard > Authentication > URL Configuration, add:
+# - Site URL: https://your-production-domain.com (or http://localhost:3000 for dev)
+# - Redirect URLs: https://your-production-domain.com/auth/callback (or http://localhost:3000/auth/callback for dev)
 
 # SMTP / Email
 SMTP_HOST=smtp.gmail.com

.gitignore

@@ -41,4 +41,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.eslintcache.env.local
+# cache files
+.eslintcache

README.md

@@ -80,7 +80,14 @@
 4. **Supabase Setup**
 
    - Create a new project at [Supabase Dashboard](https://supabase.com/dashboard)
-   - Enable Authentication providers (Email, etc.)
+   - Enable Authentication providers:
+     * Go to Authentication > Providers
+     * Enable Email provider
+     * Enable Google OAuth provider and configure with your Google OAuth credentials
+   - Configure Authentication URLs:
+     * Go to Authentication > URL Configuration
+     * Add your Site URL (e.g., `https://your-domain.com` or `http://localhost:3000`)
+     * Add Redirect URL: `https://your-domain.com/auth/callback` (or `http://localhost:3000/auth/callback` for development)
    - Create storage bucket: `assignments`
 
 5. **Run the development server**

src/app/auth/callback/route.ts

@@ -0,0 +1,35 @@
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const requestUrl = new URL(request.url)
+  const code = requestUrl.searchParams.get('code')
+  const origin = requestUrl.origin
+
+  if (code) {
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+
+    if (!supabaseUrl || !supabaseAnonKey) {
+      return NextResponse.redirect(`${origin}/sign?error=missing_env_vars`)
+    }
+
+    const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+      auth: {
+        flowType: 'pkce'
+      }
+    })
+
+    try {
+      const { error } = await supabase.auth.exchangeCodeForSession(code)
+      if (error) throw error
+    } catch (error) {
+      console.error('Error exchanging code for session:', error)
+      return NextResponse.redirect(`${origin}/sign?error=code_exchange_failed`)
+    }
+  }
+
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(`${origin}/dashboard`)
+}

src/components/signup.tsx

@@ -65,7 +65,7 @@ export default function SignupFormDemo() {
       const { error } = await supabase.auth.signInWithOAuth({
         provider: "google",
         options: {
-          redirectTo: `${window.location.origin}/dashboard`,
+          redirectTo: `${window.location.origin}/auth/callback`,
         },
       });
       if (error) throw error;

src/lib/supabaseclient.ts

@@ -6,5 +6,12 @@ const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || 'placeholde
 
 // Only create client if we have valid environment variables
 export const supabase = supabaseUrl !== 'https://placeholder.supabase.co' && supabaseAnonKey !== 'placeholder-key' 
-  ? createClient(supabaseUrl, supabaseAnonKey)
+  ? createClient(supabaseUrl, supabaseAnonKey, {
+      auth: {
+        flowType: 'pkce',
+        autoRefreshToken: true,
+        persistSession: true,
+        detectSessionInUrl: true
+      }
+    })
   : null