feat: add dedicated billing-portal endpoint for on-demand portal URL generation

Author: brandonkachen

web/src/app/api/user/billing-portal/route.ts

@@ -0,0 +1,40 @@
+import { env } from '@codebuff/internal/env'
+import { stripeServer } from '@codebuff/internal/util/stripe'
+import { NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+
+import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options'
+import { logger } from '@/util/logger'
+
+export async function POST() {
+  const session = await getServerSession(authOptions)
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const stripeCustomerId = session.user.stripe_customer_id
+  if (!stripeCustomerId) {
+    return NextResponse.json(
+      { error: 'No Stripe customer ID found' },
+      { status: 400 }
+    )
+  }
+
+  try {
+    const portalSession = await stripeServer.billingPortal.sessions.create({
+      customer: stripeCustomerId,
+      return_url: `${env.NEXT_PUBLIC_CODEBUFF_APP_URL}/profile`,
+    })
+
+    return NextResponse.json({ url: portalSession.url })
+  } catch (error) {
+    logger.error(
+      { userId: session.user.id, error },
+      'Failed to create billing portal session'
+    )
+    return NextResponse.json(
+      { error: 'Failed to create billing portal session' },
+      { status: 500 }
+    )
+  }
+}

web/src/app/profile/components/subscription-section.tsx

@@ -55,9 +55,33 @@ function SubscriptionActive({ data, email }: { data: ActiveSubscriptionResponse;
   const { subscription, rateLimit, fallbackToALaCarte } = data
   const isCanceling = subscription.cancelAtPeriodEnd
   const fallbackPortalUrl = `${env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL}?prefilled_email=${encodeURIComponent(email)}`
-  const billingPortalUrl = data.billingPortalUrl ?? fallbackPortalUrl
   const queryClient = useQueryClient()
 
+  const billingPortalMutation = useMutation({
+    mutationFn: async () => {
+      const res = await fetch('/api/user/billing-portal', {
+        method: 'POST',
+      })
+      if (!res.ok) {
+        const error = await res.json().catch(() => ({ error: 'Failed to open billing portal' }))
+        throw new Error(error.error || 'Failed to open billing portal')
+      }
+      const data = await res.json()
+      return data.url as string
+    },
+    onSuccess: (url) => {
+      window.open(url, '_blank', 'noopener,noreferrer')
+    },
+    onError: (err: Error) => {
+      // Fall back to the prefilled email portal URL on error
+      window.open(fallbackPortalUrl, '_blank', 'noopener,noreferrer')
+      toast({
+        title: 'Note',
+        description: 'Opened billing portal - you may need to sign in.',
+      })
+    },
+  })
+
   const updatePreferenceMutation = useMutation({
     mutationFn: async (newValue: boolean) => {
       const res = await fetch('/api/user/preferences', {
@@ -116,15 +140,23 @@ function SubscriptionActive({ data, email }: { data: ActiveSubscriptionResponse;
               </span>
             )}
           </CardTitle>
-          <a
-            href={billingPortalUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
+          <button
+            onClick={() => billingPortalMutation.mutate()}
+            disabled={billingPortalMutation.isPending}
+            className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 disabled:opacity-50"
           >
-            Manage
-            <ExternalLink className="h-3.5 w-3.5" />
-          </a>
+            {billingPortalMutation.isPending ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Opening...
+              </>
+            ) : (
+              <>
+                Manage
+                <ExternalLink className="h-3.5 w-3.5" />
+              </>
+            )}
+          </button>
         </div>
       </CardHeader>
       <CardContent className="space-y-5">