refactor: extract shared auth helper, fix error handling in Edge Functions

- Extract duplicated auth code from create-checkout and create-portal
  into _shared/auth.ts
- Fix catch blocks to handle non-Error thrown values (use instanceof
  check instead of accessing .message directly)
- Add demo/README.md with local development instructions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: tomusdrw

demo/README.md

@@ -0,0 +1,27 @@
+# Shared UI Demo
+
+A minimal app that tests the Supabase integration end-to-end: authentication, subscription status, quota-gated features, and Stripe checkout.
+
+Deployed at: https://fluffylabs.dev/shared-ui/demo/
+
+## Local development
+
+```bash
+# From the repo root
+cp .env.stripe.example .env.stripe  # or create with your values
+
+# Set Supabase env vars
+export VITE_SUPABASE_URL=https://your-project.supabase.co
+export VITE_SUPABASE_ANON_KEY=your-anon-key
+
+# Run the demo
+npx vite --config demo/vite.config.ts
+```
+
+## What it tests
+
+- **Login/Register** — AuthFlow component with email+password
+- **User Menu** — compact UserMenu in the header with settings/sign-out
+- **Settings** — theme selector + SubscriptionStatus with upgrade/manage buttons
+- **Pricing** — PricingCard component with checkout flow
+- **Quota-Gated Feature** — QuotaGate with 5 free uses/month, progress bar, and upgrade prompt

supabase/functions/_shared/auth.ts

@@ -0,0 +1,39 @@
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
+import type { User } from "https://esm.sh/@supabase/supabase-js@2";
+import { corsHeaders } from "./cors.ts";
+
+/**
+ * Authenticate the user from the request's Authorization header.
+ * Returns the user on success, or a 401 Response on failure.
+ */
+export async function authenticateUser(req: Request): Promise<{ user: User } | { response: Response }> {
+  const authHeader = req.headers.get("Authorization");
+  if (!authHeader) {
+    return {
+      response: new Response(JSON.stringify({ error: "Missing Authorization header" }), {
+        status: 401,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      }),
+    };
+  }
+
+  const supabase = createClient(Deno.env.get("SUPABASE_URL")!, Deno.env.get("SUPABASE_ANON_KEY")!, {
+    global: { headers: { Authorization: authHeader } },
+  });
+
+  const {
+    data: { user },
+    error,
+  } = await supabase.auth.getUser();
+
+  if (error || !user) {
+    return {
+      response: new Response(JSON.stringify({ error: "Unauthorized" }), {
+        status: 401,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      }),
+    };
+  }
+
+  return { user };
+}

supabase/functions/create-checkout/index.ts

@@ -10,34 +10,20 @@
 //   SUPABASE_ANON_KEY     — (auto-set by Supabase)
 //   SUPABASE_SERVICE_ROLE_KEY — (auto-set by Supabase)
 
-import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
 import { corsHeaders } from "../_shared/cors.ts";
 import { stripe } from "../_shared/stripe.ts";
 import { supabaseAdmin } from "../_shared/supabase-admin.ts";
+import { authenticateUser } from "../_shared/auth.ts";
 
 Deno.serve(async (req) => {
-  // Handle CORS preflight
   if (req.method === "OPTIONS") {
     return new Response("ok", { headers: corsHeaders });
   }
 
   try {
-    // Authenticate the user from the Authorization header
-    const authHeader = req.headers.get("Authorization")!;
-    const supabase = createClient(Deno.env.get("SUPABASE_URL")!, Deno.env.get("SUPABASE_ANON_KEY")!, {
-      global: { headers: { Authorization: authHeader } },
-    });
-
-    const {
-      data: { user },
-      error: authError,
-    } = await supabase.auth.getUser();
-    if (authError || !user) {
-      return new Response(JSON.stringify({ error: "Unauthorized" }), {
-        status: 401,
-        headers: { ...corsHeaders, "Content-Type": "application/json" },
-      });
-    }
+    const auth = await authenticateUser(req);
+    if ("response" in auth) return auth.response;
+    const { user } = auth;
 
     // Check if user already has a Stripe customer ID
     const { data: subscription } = await supabaseAdmin
@@ -56,7 +42,6 @@ Deno.serve(async (req) => {
       });
       customerId = customer.id;
 
-      // Store the customer ID
       await supabaseAdmin.from("subscriptions").upsert(
         {
           user_id: user.id,
@@ -67,20 +52,13 @@ Deno.serve(async (req) => {
       );
     }
 
-    // Parse optional return URL from request body
     const body = await req.json().catch(() => ({}));
     const returnUrl = body.returnUrl || Deno.env.get("SITE_URL") || "http://localhost:5173";
 
-    // Create Checkout Session
     const session = await stripe.checkout.sessions.create({
       customer: customerId,
       mode: "subscription",
-      line_items: [
-        {
-          price: Deno.env.get("STRIPE_PRICE_ID")!,
-          quantity: 1,
-        },
-      ],
+      line_items: [{ price: Deno.env.get("STRIPE_PRICE_ID")!, quantity: 1 }],
       success_url: `${returnUrl}?checkout=success`,
       cancel_url: `${returnUrl}?checkout=cancelled`,
     });
@@ -89,8 +67,9 @@ Deno.serve(async (req) => {
       headers: { ...corsHeaders, "Content-Type": "application/json" },
     });
   } catch (err) {
+    const message = err instanceof Error ? err.message : "Internal server error";
     console.error("create-checkout error:", err);
-    return new Response(JSON.stringify({ error: err.message }), {
+    return new Response(JSON.stringify({ error: message }), {
       status: 500,
       headers: { ...corsHeaders, "Content-Type": "application/json" },
     });

supabase/functions/create-portal/index.ts

@@ -9,33 +9,20 @@
 //   SUPABASE_ANON_KEY     — (auto-set by Supabase)
 //   SUPABASE_SERVICE_ROLE_KEY — (auto-set by Supabase)
 
-import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
 import { corsHeaders } from "../_shared/cors.ts";
 import { stripe } from "../_shared/stripe.ts";
 import { supabaseAdmin } from "../_shared/supabase-admin.ts";
+import { authenticateUser } from "../_shared/auth.ts";
 
 Deno.serve(async (req) => {
   if (req.method === "OPTIONS") {
     return new Response("ok", { headers: corsHeaders });
   }
 
   try {
-    // Authenticate the user
-    const authHeader = req.headers.get("Authorization")!;
-    const supabase = createClient(Deno.env.get("SUPABASE_URL")!, Deno.env.get("SUPABASE_ANON_KEY")!, {
-      global: { headers: { Authorization: authHeader } },
-    });
-
-    const {
-      data: { user },
-      error: authError,
-    } = await supabase.auth.getUser();
-    if (authError || !user) {
-      return new Response(JSON.stringify({ error: "Unauthorized" }), {
-        status: 401,
-        headers: { ...corsHeaders, "Content-Type": "application/json" },
-      });
-    }
+    const auth = await authenticateUser(req);
+    if ("response" in auth) return auth.response;
+    const { user } = auth;
 
     // Get the user's Stripe customer ID
     const { data: subscription } = await supabaseAdmin
@@ -54,7 +41,6 @@ Deno.serve(async (req) => {
     const body = await req.json().catch(() => ({}));
     const returnUrl = body.returnUrl || Deno.env.get("SITE_URL") || "http://localhost:5173";
 
-    // Create a portal session
     const portalSession = await stripe.billingPortal.sessions.create({
       customer: subscription.stripe_customer_id,
       return_url: returnUrl,
@@ -64,8 +50,9 @@ Deno.serve(async (req) => {
       headers: { ...corsHeaders, "Content-Type": "application/json" },
     });
   } catch (err) {
+    const message = err instanceof Error ? err.message : "Internal server error";
     console.error("create-portal error:", err);
-    return new Response(JSON.stringify({ error: err.message }), {
+    return new Response(JSON.stringify({ error: message }), {
       status: 500,
       headers: { ...corsHeaders, "Content-Type": "application/json" },
     });

supabase/functions/stripe-webhook/index.ts

@@ -93,8 +93,9 @@ Deno.serve(async (req) => {
       headers: { "Content-Type": "application/json" },
     });
   } catch (err) {
+    const message = err instanceof Error ? err.message : "Webhook processing failed";
     console.error("stripe-webhook error:", err);
-    return new Response(JSON.stringify({ error: err.message }), {
+    return new Response(JSON.stringify({ error: message }), {
       status: 400,
       headers: { "Content-Type": "application/json" },
     });