From 584015e4a174223726a99d6f23ea77788b252eb6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 17 Jan 2026 10:50:28 +0000
Subject: [PATCH] fix(auth,credits): enhance oauth error logging and integrate
 credits display

- Improved error logging in auth callback to diagnose 401 Unauthorized issues.
- Integrated CreditsDisplay component into the history sidebar.
- Fixed the upgrade button in PurchaseCreditsPopup to redirect to Stripe checkout.
- Added required Supabase environment variables to .env.example.
- Installed the stripe package to support payment processing.
- Ensured successful production build and clean repository state.
---
 .env.example                                  |  4 ++++
 app/auth/callback/route.ts                    | 10 +++++++++-
 bun.lock                                      |  4 +++-
 components/credits/purchase-credits-popup.tsx |  7 ++++---
 components/history.tsx                        |  2 ++
 package.json                                  |  1 +
 6 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/.env.example b/.env.example
index 0f8444ca..4eef0359 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,7 @@
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
+
 # Stripe Configuration
 STANDARD_TIER_PRICE_ID=price_placeholder # must be real Stripe price ID in prod
 STANDARD_TIER_CREDITS=8000
diff --git a/app/auth/callback/route.ts b/app/auth/callback/route.ts
index d6cd1824..fffab410 100644
--- a/app/auth/callback/route.ts
+++ b/app/auth/callback/route.ts
@@ -31,7 +31,15 @@ export async function GET(request: Request) {
       }
     )
     const { error } = await supabase.auth.exchangeCodeForSession(code)
-    if (!error) {
+    if (error) {
+      console.error('[Auth Callback] Exchange code error:', {
+        message: error.message,
+        status: error.status,
+        name: error.name,
+        code: code?.substring(0, 10) + '...'
+      })
+      return NextResponse.redirect(`${origin}/auth/auth-code-error?error=${encodeURIComponent(error.message)}`)
+    } else {
       try {
         const { data: { user }, error: userErr } = await supabase.auth.getUser()
         if (!userErr && user) {
diff --git a/bun.lock b/bun.lock
index 61509cd3..d342f7e2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "QCX",
@@ -80,6 +79,7 @@
         "remark-gfm": "^4.0.1",
         "remark-math": "^6.0.0",
         "sonner": "^1.7.4",
+        "stripe": "^20.2.0",
         "supabase": "^2.66.0",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
@@ -2329,6 +2329,8 @@
 
     "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
 
+    "stripe": ["stripe@20.2.0", "", { "dependencies": { "qs": "^6.14.1" }, "peerDependencies": { "@types/node": ">=16" }, "optionalPeers": ["@types/node"] }, "sha512-m8niTfdm3nPP/yQswRWMwQxqEUcTtB3RTJQ9oo6NINDzgi7aPOadsH/fPXIIfL1Sc5+lqQFKSk7WiO6CXmvaeA=="],
+
     "strnum": ["strnum@1.1.2", "", {}, "sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA=="],
 
     "strtok3": ["strtok3@10.3.4", "", { "dependencies": { "@tokenizer/token": "^0.3.0" } }, "sha512-KIy5nylvC5le1OdaaoCJ07L+8iQzJHGH6pWDuzS+d07Cu7n1MZ2x26P8ZKIWfbK02+XIL8Mp4RkWeqdUCrDMfg=="],
diff --git a/components/credits/purchase-credits-popup.tsx b/components/credits/purchase-credits-popup.tsx
index ebc0dfbb..1078ab8d 100644
--- a/components/credits/purchase-credits-popup.tsx
+++ b/components/credits/purchase-credits-popup.tsx
@@ -50,9 +50,10 @@ export function PurchaseCreditsPopup() {
   }, [user]);
 
   const handleUpgrade = (tier: string) => {
-      // Placeholder for upgrade logic
-      // In a real app, this would likely redirect to Stripe Checkout
-      console.log(`Upgrading to ${tier}`);
+      // Redirect to Stripe checkout
+      const stripeUrl = 'https://buy.stripe.com/3cIaEX3tRcur9EM7ss';
+      window.open(stripeUrl, '_blank');
+      setIsOpen(false);
   }
 
   const standardTier = TIER_CONFIGS[TIERS.STANDARD];
diff --git a/components/history.tsx b/components/history.tsx
index 179b83de..9018e8e1 100644
--- a/components/history.tsx
+++ b/components/history.tsx
@@ -12,6 +12,7 @@ import { History as HistoryIcon } from 'lucide-react'
 import { ChatHistoryClient } from './sidebar/chat-history-client' // Updated import
 import { Suspense } from 'react'
 import { HistorySkeleton } from './history-skelton'
+import { CreditsDisplay } from './credits/credits-display'
 
 type HistoryProps = {
   location: 'sidebar' | 'header'
@@ -39,6 +40,7 @@ export function History({ location }: HistoryProps) {
             History
           </SheetTitle>
         </SheetHeader>
+        <CreditsDisplay className="mb-4" />
         <div className="my-2 h-full pb-12 md:pb-10">
           <Suspense fallback={<HistorySkeleton />}>
             <ChatHistoryClient />
diff --git a/package.json b/package.json
index 29001c7d..ed73d5e9 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "sonner": "^1.7.4",
+    "stripe": "^20.2.0",
     "supabase": "^2.66.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",