Fix Discord OAuth redirect URI, add Stripe subscription sync, and portal hover effects

- Fix Discord OAuth redirect URI mismatch (/auth → /api/auth/discord/callback)
- Add /auth/discord/callback to middleware protected paths
- Add syncSubscriptionFromStripe to handle missed webhooks and race conditions
- Verify and subscribe pages now sync with Stripe API before redirecting
- Add hover effects and transitions to portal dashboard cards
- Add 5 new tests for syncSubscriptionFromStripe (72 total)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: barckcode

src/lib/stripe.test.ts

@@ -3,12 +3,15 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 const mockCreate = vi.fn().mockResolvedValue({ id: 'cs_test_123', url: 'https://checkout.stripe.com/...' });
 const mockConstructEvent = vi.fn();
 const mockCancel = vi.fn().mockResolvedValue({ id: 'sub_123', status: 'canceled' });
+const mockCustomersList = vi.fn().mockResolvedValue({ data: [] });
+const mockSubscriptionsList = vi.fn().mockResolvedValue({ data: [] });
 
 vi.mock('stripe', () => ({
   default: class {
     checkout = { sessions: { create: mockCreate } };
     webhooks = { constructEvent: mockConstructEvent };
-    subscriptions = { cancel: mockCancel };
+    subscriptions = { cancel: mockCancel, list: mockSubscriptionsList };
+    customers = { list: mockCustomersList };
   },
 }));
 
@@ -34,9 +37,16 @@ function createMockDb() {
     limit: vi.fn().mockResolvedValue([]),
   };
 
+  const mockUpdateChain = {
+    set: vi.fn().mockReturnThis(),
+    where: vi.fn().mockResolvedValue(undefined),
+  };
+
   return {
     select: vi.fn().mockReturnValue(mockChain),
+    update: vi.fn().mockReturnValue(mockUpdateChain),
     _chain: mockChain,
+    _updateChain: mockUpdateChain,
   } as any;
 }
 
@@ -167,4 +177,117 @@ describe('stripe.ts', () => {
       expect(mockCancel).toHaveBeenCalledWith('sub_123');
     });
   });
+
+  describe('syncSubscriptionFromStripe', () => {
+    it('should return true immediately when member is already active with subscription', async () => {
+      const { getStripeClient, syncSubscriptionFromStripe } = await import('./stripe');
+      const stripe = getStripeClient('sk_test_xxx');
+      const db = createMockDb();
+
+      const member = {
+        id: 'member-1',
+        email: 'test@example.com',
+        status: 'active',
+        stripeCustomerId: 'cus_123',
+        stripeSubscriptionId: 'sub_123',
+      };
+
+      const result = await syncSubscriptionFromStripe(member, stripe, db);
+      expect(result).toBe(true);
+      expect(mockCustomersList).not.toHaveBeenCalled();
+      expect(mockSubscriptionsList).not.toHaveBeenCalled();
+    });
+
+    it('should return false when no Stripe customer found', async () => {
+      const { getStripeClient, syncSubscriptionFromStripe } = await import('./stripe');
+      const stripe = getStripeClient('sk_test_xxx');
+      const db = createMockDb();
+      mockCustomersList.mockResolvedValueOnce({ data: [] });
+
+      const member = {
+        id: 'member-1',
+        email: 'test@example.com',
+        status: 'pending',
+        stripeCustomerId: null,
+        stripeSubscriptionId: null,
+      };
+
+      const result = await syncSubscriptionFromStripe(member, stripe, db);
+      expect(result).toBe(false);
+      expect(mockCustomersList).toHaveBeenCalledWith({ email: 'test@example.com', limit: 1 });
+    });
+
+    it('should sync and return true when Stripe has active subscription', async () => {
+      const { getStripeClient, syncSubscriptionFromStripe } = await import('./stripe');
+      const stripe = getStripeClient('sk_test_xxx');
+      const db = createMockDb();
+      // countActivePaidMembers query
+      db._chain.where.mockReturnValueOnce([{ total: 5 }]);
+      mockCustomersList.mockResolvedValueOnce({ data: [{ id: 'cus_456' }] });
+      mockSubscriptionsList.mockResolvedValueOnce({ data: [{ id: 'sub_789' }] });
+
+      const member = {
+        id: 'member-1',
+        email: 'test@example.com',
+        status: 'pending',
+        stripeCustomerId: null,
+        stripeSubscriptionId: null,
+      };
+
+      const result = await syncSubscriptionFromStripe(member, stripe, db);
+      expect(result).toBe(true);
+      expect(db.update).toHaveBeenCalled();
+      expect(db._updateChain.set).toHaveBeenCalledWith({
+        stripeCustomerId: 'cus_456',
+        stripeSubscriptionId: 'sub_789',
+        tier: 'early',
+        status: 'active',
+      });
+    });
+
+    it('should use existing stripeCustomerId without looking up by email', async () => {
+      const { getStripeClient, syncSubscriptionFromStripe } = await import('./stripe');
+      const stripe = getStripeClient('sk_test_xxx');
+      const db = createMockDb();
+      db._chain.where.mockReturnValueOnce([{ total: 5 }]);
+      mockSubscriptionsList.mockResolvedValueOnce({ data: [{ id: 'sub_789' }] });
+
+      const member = {
+        id: 'member-1',
+        email: 'test@example.com',
+        status: 'pending',
+        stripeCustomerId: 'cus_existing',
+        stripeSubscriptionId: null,
+      };
+
+      const result = await syncSubscriptionFromStripe(member, stripe, db);
+      expect(result).toBe(true);
+      expect(mockCustomersList).not.toHaveBeenCalled();
+      expect(mockSubscriptionsList).toHaveBeenCalledWith({
+        customer: 'cus_existing',
+        status: 'active',
+        limit: 1,
+      });
+    });
+
+    it('should return false when customer exists but no active subscription', async () => {
+      const { getStripeClient, syncSubscriptionFromStripe } = await import('./stripe');
+      const stripe = getStripeClient('sk_test_xxx');
+      const db = createMockDb();
+      mockCustomersList.mockResolvedValueOnce({ data: [{ id: 'cus_456' }] });
+      mockSubscriptionsList.mockResolvedValueOnce({ data: [] });
+
+      const member = {
+        id: 'member-1',
+        email: 'test@example.com',
+        status: 'pending',
+        stripeCustomerId: null,
+        stripeSubscriptionId: null,
+      };
+
+      const result = await syncSubscriptionFromStripe(member, stripe, db);
+      expect(result).toBe(false);
+      expect(db.update).not.toHaveBeenCalled();
+    });
+  });
 });

src/lib/stripe.ts

@@ -72,3 +72,53 @@ export async function cancelSubscription(
 ): Promise<Stripe.Subscription> {
   return stripe.subscriptions.cancel(subscriptionId);
 }
+
+/**
+ * Syncs subscription status from Stripe for members whose local DB
+ * may be out of date (e.g. webhook delay, local dev without webhook).
+ * Looks up the customer by email and checks for active subscriptions.
+ * Returns true if the member was found to have an active subscription.
+ */
+export async function syncSubscriptionFromStripe(
+  member: { id: string; email: string; status: string; stripeCustomerId: string | null; stripeSubscriptionId: string | null },
+  stripe: Stripe,
+  db: Database,
+): Promise<boolean> {
+  // Already active with subscription — nothing to sync
+  if (member.status === 'active' && member.stripeSubscriptionId) {
+    return true;
+  }
+
+  // Look up customer by existing ID or by email
+  let customerId = member.stripeCustomerId;
+
+  if (!customerId) {
+    const customers = await stripe.customers.list({ email: member.email, limit: 1 });
+    if (customers.data.length === 0) return false;
+    customerId = customers.data[0].id;
+  }
+
+  const subscriptions = await stripe.subscriptions.list({
+    customer: customerId,
+    status: 'active',
+    limit: 1,
+  });
+
+  if (subscriptions.data.length === 0) return false;
+
+  const sub = subscriptions.data[0];
+  const activePaidCount = await countActivePaidMembers(db);
+  const tier = selectTier(activePaidCount);
+
+  await db
+    .update(members)
+    .set({
+      stripeCustomerId: customerId,
+      stripeSubscriptionId: sub.id,
+      tier,
+      status: 'active',
+    })
+    .where(eq(members.id, member.id));
+
+  return true;
+}

src/middleware.ts

@@ -6,7 +6,7 @@ import { validateSession, clearSessionCookie } from './lib/auth';
 export const onRequest = defineMiddleware(async (context, next) => {
   const { pathname } = context.url;
 
-  const protectedPaths = ['/portal', '/api/auth/discord/link'];
+  const protectedPaths = ['/portal', '/api/auth/discord/link', '/auth/discord/callback'];
   const isProtected = protectedPaths.some((p) => pathname.startsWith(p));
 
   if (!isProtected) {

src/pages/api/auth/discord/link.ts

@@ -9,7 +9,7 @@ export async function GET(context: APIContext) {
   }
 
   const baseUrl = env.PUBLIC_URL || context.url.origin;
-  const redirectUri = `${baseUrl}/auth/discord/callback`;
+  const redirectUri = `${baseUrl}/api/auth/discord/callback`;
 
   const state = generateOAuthState();
 

src/pages/auth/discord/callback.astro

@@ -24,7 +24,7 @@ if (!code || !state || !storedState || state !== storedState) {
   error = 'invalid_state';
 } else {
   const baseUrl = env.PUBLIC_URL || Astro.url.origin;
-  const redirectUri = `${baseUrl}/auth/discord/callback`;
+  const redirectUri = `${baseUrl}/api/auth/discord/callback`;
 
   try {
     const accessToken = await exchangeCode({

src/pages/auth/verify.astro

@@ -2,6 +2,7 @@
 import { env } from 'cloudflare:workers';
 import { getDb } from '../../lib/db';
 import { validateMagicToken, markTokenUsed, createSession, setSessionCookie } from '../../lib/auth';
+import { getStripeClient, syncSubscriptionFromStripe } from '../../lib/stripe';
 import { members, sessions } from '../../../db/schema';
 import { eq } from 'drizzle-orm';
 
@@ -34,7 +35,14 @@ let isActive = false;
 
 if (existingMember.length > 0) {
   memberId = existingMember[0].id;
-  isActive = existingMember[0].status === 'active';
+
+  if (existingMember[0].status === 'active') {
+    isActive = true;
+  } else {
+    // Sync with Stripe in case webhook was missed
+    const stripe = getStripeClient(env.STRIPE_SECRET_KEY);
+    isActive = await syncSubscriptionFromStripe(existingMember[0], stripe, db);
+  }
 } else {
   const { nanoid } = await import('nanoid');
   memberId = nanoid(21);

src/pages/portal/index.astro

@@ -55,7 +55,7 @@ const joinedDate = member?.joinedAt
   </h1>
 
   <div class="grid gap-6 sm:grid-cols-2">
-    <div class="bg-neutral-900/50 border border-neutral-800 rounded-xl p-6">
+    <div class="bg-neutral-900/50 border border-neutral-800 rounded-xl p-6 hover:border-neutral-700 hover:shadow-[0_0_30px_rgba(0,0,0,0.4)] transition-all duration-300">
       <h2 class="text-xs text-violet-400 uppercase tracking-wide mb-4 font-mono">Account</h2>
       <dl class="space-y-4">
         <div>

src/pages/subscribe.astro

@@ -3,7 +3,7 @@ import { env } from 'cloudflare:workers';
 import Base from '../layouts/Base.astro';
 import { getDb } from '../lib/db';
 import { validateSession } from '../lib/auth';
-import { countActivePaidMembers, EARLY_MEMBER_LIMIT } from '../lib/stripe';
+import { countActivePaidMembers, EARLY_MEMBER_LIMIT, getStripeClient, syncSubscriptionFromStripe } from '../lib/stripe';
 
 // Auth check — must be logged in
 const sessionId = Astro.cookies.get('session')?.value;
@@ -29,6 +29,13 @@ if (member.status === 'active' && member.stripeSubscriptionId) {
   return Astro.redirect('/portal');
 }
 
+// Sync with Stripe in case webhook was missed (local dev, race condition)
+const stripe = getStripeClient(env.STRIPE_SECRET_KEY);
+const isSynced = await syncSubscriptionFromStripe(member, stripe, db);
+if (isSynced) {
+  return Astro.redirect('/portal');
+}
+
 // Pricing
 const activePaidCount = await countActivePaidMembers(db);
 const earlySpots = Math.max(0, EARLY_MEMBER_LIMIT - activePaidCount);