@carrierllc/mcp 0.2.17 → 0.2.18

package/templates/storefront/src/app/sign-up/[[...sign-up]]/StorefrontSignUpClient.tsx

@@ -0,0 +1,199 @@
+"use client";
+/**
+ * StorefrontSignUpClient
+ *
+ * MANGO-6/7: Custom email + password sign-up for the storefront.
+ * Phone number is NEVER required. It is collected optionally on /activate/[orderId].
+ *
+ * Clerk v6 API (storefront uses @clerk/nextjs ^6):
+ *   useSignUp()  → { signUp, isLoaded }
+ *   useClerk()   → { setActive }
+ */
+import { useState, FormEvent } from "react";
+import { useSignUp } from "@clerk/nextjs/legacy";
+import { useClerk } from "@clerk/nextjs";
+import { useSearchParams, useRouter } from "next/navigation";
+import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
+import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";
+
+type FlowStep = "credentials" | "verify" | "complete";
+
+export function StorefrontSignUpClient() {
+  const searchParams = useSearchParams();
+  const rawRedirect = searchParams.get("redirect_url") ?? undefined;
+  const redirectTarget = sanitizeAuthRedirect(rawRedirect, "/dashboard");
+
+  const { signUp, isLoaded } = useSignUp();
+  const { setActive } = useClerk();
+  const router = useRouter();
+
+  const [step, setStep] = useState<FlowStep>("credentials");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  function clerkErrMsg(err: unknown): string {
+    const e = err as { errors?: Array<{ longMessage?: string; message?: string }> };
+    return (
+      e?.errors?.[0]?.longMessage ??
+      e?.errors?.[0]?.message ??
+      "Something went wrong. Please try again."
+    );
+  }
+
+  async function handleCredentials(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!isLoaded || !signUp) return;
+    setError(null);
+    setLoading(true);
+    try {
+      await signUp.create({ emailAddress: email, password });
+      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
+      setStep("verify");
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleVerify(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!isLoaded || !signUp) return;
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await signUp.attemptEmailAddressVerification({ code });
+      const completion = await completeEmailSignUpAfterVerify(signUp, result);
+      if (completion.status === "complete") {
+        setStep("complete");
+        await setActive({ session: completion.sessionId });
+        router.replace(redirectTarget);
+      } else {
+        setError(completion.message);
+      }
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
+      {step === "credentials" && (
+        <>
+          <h1 className="text-xl font-bold text-white mb-1">Create account</h1>
+          <p className="text-xs text-white/40 mb-6">Email and password — no phone required.</p>
+          <form onSubmit={handleCredentials} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-email">
+                Email address
+              </label>
+              <input
+                id="sf-email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                placeholder="you@example.com"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-password">
+                Password
+              </label>
+              <input
+                id="sf-password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={8}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                placeholder="Min. 8 characters"
+              />
+            </div>
+            {error && (
+              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                {error}
+              </p>
+            )}
+            <button
+              type="submit"
+              disabled={loading || !isLoaded}
+              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              {loading ? "Creating account…" : "Continue"}
+            </button>
+          </form>
+          <p className="mt-4 text-center text-xs text-white/30">
+            Already have an account?{" "}
+            <a href="/sign-in" className="text-[var(--brand-accent)] hover:underline">
+              Sign in
+            </a>
+          </p>
+        </>
+      )}
+
+      {step === "verify" && (
+        <>
+          <h1 className="text-xl font-bold text-white mb-1">Check your email</h1>
+          <p className="text-xs text-white/40 mb-6">
+            We sent a 6-digit code to <span className="text-white/70">{email}</span>.
+          </p>
+          <form onSubmit={handleVerify} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-code">
+                Verification code
+              </label>
+              <input
+                id="sf-code"
+                type="text"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                required
+                maxLength={6}
+                value={code}
+                onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
+                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-center text-lg tracking-[0.4em] text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                placeholder="000000"
+              />
+            </div>
+            {error && (
+              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                {error}
+              </p>
+            )}
+            <button
+              type="submit"
+              disabled={loading || code.length < 6}
+              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              {loading ? "Verifying…" : "Verify email"}
+            </button>
+          </form>
+          <button
+            type="button"
+            onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
+            className="mt-4 w-full text-center text-xs text-white/30 hover:text-white/50"
+          >
+            ← Back
+          </button>
+        </>
+      )}
+
+      {step === "complete" && (
+        <div className="text-center space-y-3 py-4">
+          <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
+          <p className="text-sm text-white/60">Setting up your account…</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/storefront/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -1,13 +1,28 @@
 export const dynamic = "force-dynamic";
-
-import { SignUp } from "@clerk/nextjs";
+/**
+ * /sign-up — Custom email + password sign-up flow for the storefront.
+ *
+ * MANGO-6/7: Phone number is never required here. It is collected optionally
+ * on /activate/[orderId] after purchase.
+ */
+import { Suspense } from "react";
+import { StorefrontSignUpClient } from "./StorefrontSignUpClient";
 
 export const metadata = { title: "Sign up" };
 
 export default function SignUpPage() {
   return (
     <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
-      <SignUp signInUrl="/sign-in" redirectUrl="/dashboard" />
+      <Suspense
+        fallback={
+          <div className="text-center space-y-3">
+            <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
+            <p className="text-sm text-white/60">Loading…</p>
+          </div>
+        }
+      >
+        <StorefrontSignUpClient />
+      </Suspense>
     </div>
   );
 }

package/templates/storefront/src/lib/checkout-order-claim.ts

@@ -0,0 +1,127 @@
+import { clerkClient } from "@clerk/nextjs/server";
+import { verifyCheckoutSession } from "@/lib/verify-checkout-session";
+
+type StripeSession = {
+  metadata?: Record<string, string>;
+  customer_email?: string | null;
+  customer_details?: { email?: string | null };
+};
+
+async function fetchStripeSession(sessionId: string): Promise<StripeSession | null> {
+  const stripeKey = process.env.STRIPE_SECRET_KEY;
+  if (!stripeKey) return null;
+
+  const resp = await fetch(`https://api.stripe.com/v1/checkout/sessions/${sessionId}`, {
+    headers: { Authorization: `Bearer ${stripeKey}` },
+  });
+  if (!resp.ok) return null;
+  return (await resp.json()) as StripeSession;
+}
+
+async function setStripeClaimedBy(sessionId: string, userId: string): Promise<boolean> {
+  const stripeKey = process.env.STRIPE_SECRET_KEY;
+  if (!stripeKey) return false;
+
+  const formBody = new URLSearchParams({
+    "metadata[claimedByUserId]": userId,
+  });
+
+  const resp = await fetch(`https://api.stripe.com/v1/checkout/sessions/${sessionId}`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${stripeKey}`,
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: formBody.toString(),
+  });
+
+  return resp.ok;
+}
+
+function claimedOrderIds(metadata: Record<string, unknown> | undefined): string[] {
+  const value = metadata?.claimedOrderIds;
+  return Array.isArray(value) ? value.filter((id): id is string => typeof id === "string") : [];
+}
+
+function sessionPurchaserEmail(session: StripeSession): string | null {
+  return session.customer_details?.email ?? session.customer_email ?? null;
+}
+
+async function userMatchesSessionPurchaser(session: StripeSession, userId: string): Promise<boolean> {
+  const purchaserEmail = sessionPurchaserEmail(session);
+  if (!purchaserEmail) return true;
+
+  const client = await clerkClient();
+  const user = await client.users.getUser(userId);
+  const normalizedPurchaserEmail = purchaserEmail.toLowerCase();
+  return user.emailAddresses.some(
+    (address) => address.emailAddress.toLowerCase() === normalizedPurchaserEmail,
+  );
+}
+
+async function addClaimedOrderToUser(userId: string, orderId: string): Promise<void> {
+  const client = await clerkClient();
+  const user = await client.users.getUser(userId);
+  const existing = claimedOrderIds(user.privateMetadata as Record<string, unknown> | undefined);
+  if (existing.includes(orderId)) return;
+
+  await client.users.updateUserMetadata(userId, {
+    privateMetadata: { claimedOrderIds: [...existing, orderId] },
+  });
+}
+
+export async function claimCheckoutOrder(
+  userId: string,
+  sessionId: string,
+  templateId: string,
+): Promise<{ ok: true; orderId: string } | { ok: false; status: number; error: string }> {
+  const verification = await verifyCheckoutSession(sessionId, templateId);
+  if (!verification.ok) {
+    return { ok: false, status: 400, error: "Invalid or unpaid checkout session" };
+  }
+
+  const orderId = verification.orderId;
+
+  if (sessionId !== "mock" && process.env.STRIPE_SECRET_KEY) {
+    const session = await fetchStripeSession(sessionId);
+    if (!session) {
+      return { ok: false, status: 400, error: "Invalid or unpaid checkout session" };
+    }
+
+    if (!(await userMatchesSessionPurchaser(session, userId))) {
+      return { ok: false, status: 403, error: "This order is linked to another account" };
+    }
+
+    const claimedBy = session.metadata?.claimedByUserId;
+    if (claimedBy && claimedBy !== userId) {
+      return { ok: false, status: 403, error: "This order is linked to another account" };
+    }
+    if (!claimedBy) {
+      const updated = await setStripeClaimedBy(sessionId, userId);
+      if (!updated) {
+        return { ok: false, status: 502, error: "Failed to claim order" };
+      }
+
+      const afterClaim = await fetchStripeSession(sessionId);
+      if (afterClaim?.metadata?.claimedByUserId !== userId) {
+        return { ok: false, status: 403, error: "This order is linked to another account" };
+      }
+    }
+  }
+
+  await addClaimedOrderToUser(userId, orderId);
+  return { ok: true, orderId };
+}
+
+export async function userOwnsOrder(userId: string, orderId: string): Promise<boolean> {
+  if (process.env.STRIPE_SECRET_KEY && orderId.startsWith("cs_")) {
+    const session = await fetchStripeSession(orderId);
+    return session?.metadata?.claimedByUserId === userId;
+  }
+
+  const client = await clerkClient();
+  const user = await client.users.getUser(userId);
+  return claimedOrderIds(user.privateMetadata as Record<string, unknown> | undefined).includes(
+    orderId,
+  );
+}

package/templates/storefront/src/lib/complete-email-sign-up.ts

@@ -0,0 +1,50 @@
+type SignUpVerificationResult = {
+  status: string;
+  createdSessionId: string | null;
+};
+
+type SignUpForEmailVerify = {
+  missingFields?: string[];
+  unverifiedFields?: string[];
+  update: (params: Record<string, never>) => Promise<SignUpVerificationResult>;
+};
+
+export type EmailSignUpCompletion =
+  | { status: "complete"; sessionId: string }
+  | { status: "incomplete"; message: string };
+
+export async function completeEmailSignUpAfterVerify(
+  signUp: SignUpForEmailVerify,
+  result: SignUpVerificationResult,
+): Promise<EmailSignUpCompletion> {
+  if (result.status === "complete" && result.createdSessionId) {
+    return { status: "complete", sessionId: result.createdSessionId };
+  }
+
+  if (result.status === "missing_requirements") {
+    const missingFields = signUp.missingFields ?? [];
+    const unverifiedFields = signUp.unverifiedFields ?? [];
+    const onlyPhoneMissing =
+      missingFields.length === 1 &&
+      missingFields[0] === "phone_number" &&
+      unverifiedFields.length === 0;
+
+    if (onlyPhoneMissing) {
+      try {
+        const updated = await signUp.update({});
+        if (updated.status === "complete" && updated.createdSessionId) {
+          return { status: "complete", sessionId: updated.createdSessionId };
+        }
+      } catch {
+        // Fall through to generic incomplete message.
+      }
+    }
+
+    return {
+      status: "incomplete",
+      message: "One more step required. Please complete your profile to continue.",
+    };
+  }
+
+  return { status: "incomplete", message: "Verification incomplete. Please try again." };
+}

package/templates/storefront/src/lib/verify-checkout-session.ts

@@ -0,0 +1,53 @@
+type StripeCheckoutSession = {
+  payment_status?: string;
+  customer_email?: string | null;
+  customer_details?: { email?: string | null };
+};
+
+function sessionPurchaserEmail(session: StripeCheckoutSession): string | null {
+  return session.customer_details?.email ?? session.customer_email ?? null;
+}
+
+type VerifyResult =
+  | { ok: true; orderId: string; purchaserEmail: string | null }
+  | { ok: false };
+
+/**
+ * Confirms a Stripe Checkout session is paid before allowing post-payment flows.
+ * Mock sessions are only accepted when Stripe is not configured (local/dev builds).
+ */
+export async function verifyCheckoutSession(
+  sessionId: string,
+  templateId: string,
+): Promise<VerifyResult> {
+  if (sessionId === "mock") {
+    if (process.env.STRIPE_SECRET_KEY || !templateId) {
+      return { ok: false };
+    }
+    return { ok: true, orderId: templateId, purchaserEmail: null };
+  }
+
+  if (!sessionId) {
+    return { ok: false };
+  }
+
+  const stripeKey = process.env.STRIPE_SECRET_KEY;
+  if (!stripeKey) {
+    return { ok: false };
+  }
+
+  const resp = await fetch(`https://api.stripe.com/v1/checkout/sessions/${sessionId}`, {
+    headers: { Authorization: `Bearer ${stripeKey}` },
+  });
+
+  if (!resp.ok) {
+    return { ok: false };
+  }
+
+  const session = (await resp.json()) as StripeCheckoutSession;
+  if (session.payment_status !== "paid") {
+    return { ok: false };
+  }
+
+  return { ok: true, orderId: sessionId, purchaserEmail: sessionPurchaserEmail(session) };
+}

package/templates/storefront/src/middleware.ts

@@ -9,6 +9,12 @@ const isPublicRoute = createRouteMatcher([
   "/sign-in(.*)",
   "/sign-up(.*)",
   "/api/health",
+  // MANGO-8/9: guest checkout API and post-payment success page are public
+  // (user has not yet created an account at this point in the purchase flow)
+  "/api/checkout/guest",
+  "/checkout/success(.*)",
+  // The checkout page itself is public — unauthenticated users can initiate payment
+  "/checkout/(.*)",
 ]);
 
 export default clerkMiddleware(async (auth, req) => {