Integrate #36, #38, #37 with resolved auth conflicts

src/context/AuthContext.tsx

@@ -28,11 +28,20 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
   const fetchUser = async () => {
     try {
-      const res = await fetch(`${BASE_URL}/profile`, {
+      const sessionRes = await fetch(`${BASE_URL}/api/auth/get-session`, {
         credentials: "include",
       });
-      if (res.ok) {
-        const data: any = await res.json();
+      const sessionData = sessionRes.ok ? await sessionRes.json() : null;
+
+      if (!sessionData?.session) {
+        setUser(null);
+        return;
+      }
+      const profileRes = await fetch(`${BASE_URL}/profile`, {
+        credentials: "include",
+      });
+      if (profileRes.ok) {
+        const data: any = await profileRes.json();
         setUser(data);
       } else {
         setUser(null);

src/pages/Checkout.tsx

@@ -57,20 +57,40 @@ function isObject(val: unknown): val is Record<string, unknown> {
   return typeof val === "object" && val !== null;
 }
 
-function parsePaymentIntentResponse(obj: unknown): PaymentIntentResponse | null {
+function parsePaymentIntentResponse(
+  obj: unknown,
+): PaymentIntentResponse | null {
   if (!isObject(obj)) return null;
   const record = obj as Record<string, unknown>;
-  const checkout_url = typeof record.checkout_url === "string" ? record.checkout_url : undefined;
-  const clientSecret = typeof record.clientSecret === "string" ? record.clientSecret : undefined;
-  const client_secret = typeof record.client_secret === "string" ? record.client_secret : undefined;
+  const checkout_url =
+    typeof record.checkout_url === "string" ? record.checkout_url : undefined;
+  const clientSecret =
+    typeof record.clientSecret === "string" ? record.clientSecret : undefined;
+  const client_secret =
+    typeof record.client_secret === "string" ? record.client_secret : undefined;
   const amount = typeof record.amount === "number" ? record.amount : undefined;
-  const currency = typeof record.currency === "string" ? record.currency : undefined;
+  const currency =
+    typeof record.currency === "string" ? record.currency : undefined;
   const orderId =
     typeof record.orderId === "string" || typeof record.orderId === "number"
       ? (record.orderId as string | number)
       : undefined;
-  if (checkout_url || clientSecret || client_secret || amount || currency || orderId)
-    return { checkout_url, clientSecret, client_secret, amount, currency, orderId };
+  if (
+    checkout_url ||
+    clientSecret ||
+    client_secret ||
+    amount ||
+    currency ||
+    orderId
+  )
+    return {
+      checkout_url,
+      clientSecret,
+      client_secret,
+      amount,
+      currency,
+      orderId,
+    };
   return null;
 }
 
@@ -216,7 +236,9 @@ export default function Checkout() {
       });
       if (!res.ok) {
         const text = await res.text();
-        throw new Error(`Payment intent request failed (${res.status}): ${text}`);
+        throw new Error(
+          `Payment intent request failed (${res.status}): ${text}`,
+        );
       }
       const dataJson: unknown = await res.json();
       const data = parsePaymentIntentResponse(dataJson);
@@ -240,7 +262,9 @@ export default function Checkout() {
         navigate(`/order/${data.orderId}`);
       }
     } catch (err: unknown) {
-      setCartError(err instanceof Error ? err.message : "Payment intent failed");
+      setCartError(
+        err instanceof Error ? err.message : "Payment intent failed",
+      );
     } finally {
       setCartLoading(false);
     }

src/pages/OrderComplete.tsx

@@ -1,25 +1,30 @@
-import { Link } from "react-router-dom";
 import { useEffect } from "react";
+import { Link } from "react-router-dom";
 
 export default function OrderComplete() {
   useEffect(() => {
     try {
       localStorage.removeItem("cartId");
     } catch (e) {
       // ignore localStorage errors in some environments
-      console.log('Could not clear cartId from localStorage', e);
+      console.log("Could not clear cartId from localStorage", e);
     }
   }, []);
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12">
       <div className="max-w-xl w-full bg-white shadow rounded-lg p-8 text-center">
-        <h1 className="text-2xl font-semibold mb-4">Thank you — your order is complete</h1>
+        <h1 className="text-2xl font-semibold mb-4">
+          Thank you — your order is complete
+        </h1>
         <p className="text-gray-600 mb-6">
-          We received your payment. You will receive an email confirmation shortly.
+          We received your payment. You will receive an email confirmation
+          shortly.
         </p>
         <div className="flex justify-center gap-4">
-          <Link to="/" className="rounded-md bg-indigo-600 text-white px-4 py-2">
+          <Link
+            to="/"
+            className="rounded-md bg-indigo-600 text-white px-4 py-2">
             Back to shop
           </Link>
           <Link to="/profile" className="rounded-md border px-4 py-2">

src/pages/Payment.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { loadStripe, type PaymentIntentResult } from "@stripe/stripe-js";
 import {
   Elements,
   PaymentElement,
-  useStripe,
   useElements,
+  useStripe,
 } from "@stripe/react-stripe-js";
+import { loadStripe, type PaymentIntentResult } from "@stripe/stripe-js";
+import { useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const publishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY as string;
 const stripePromise = loadStripe(publishableKey);
@@ -79,9 +79,7 @@ export default function PaymentPage() {
   }
 
   if (!clientSecret) {
-    return (
-      <div className="p-8 text-center">No payment session available.</div>
-    );
+    return <div className="p-8 text-center">No payment session available.</div>;
   }
 
   const options = useMemo(() => ({ clientSecret }), [clientSecret]);

src/pages/Profile.tsx

@@ -1,7 +1,8 @@
 import { type ChangeEvent, type FormEvent, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import InputField from "../components/InputField";
-import { BASE_URL, DOMAIN } from "../config";
+import { BASE_URL } from "../config";
+import { base64urlToUint8Array, bufferToBase64url } from "../utils/webauthn";
 
 // Small internal display component for read-only profile fields
 const Info = ({
@@ -49,7 +50,7 @@ const Profile = () => {
   };
 
   const getAuthenticators = async () => {
-    const res = await fetch(`${BASE_URL}/webauthn/authenticators`, {
+    const res = await fetch(`${BASE_URL}/api/auth/passkey/list-user-passkeys`, {
       credentials: "include",
     });
     if (!res.ok) throw new Error("Failed to fetch authenticators");
@@ -60,96 +61,93 @@ const Profile = () => {
   const handleAddPasskey = async () => {
     try {
       setMessage("Starting passkey registration...");
-      const beginRes = await fetch(`${BASE_URL}/webauthn/register/begin`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ email: profile?.email }),
-      });
+      const beginRes = await fetch(
+        `${BASE_URL}/api/auth/passkey/generate-register-options`,
+        {
+          method: "GET",
+          credentials: "include",
+        },
+      );
 
       if (!beginRes.ok) {
-        setMessage("Begin registration failed");
+        const body = (await beginRes.json().catch(() => ({}))) as {
+          message?: string;
+          code?: string;
+        };
+        setMessage(
+          body.message || body.code || "Failed to get registration options",
+        );
         return;
       }
 
-      const options = (await beginRes.json()) as {
+      const options = (await beginRes.json()) as PublicKeyCredentialCreationOptions & {
         challenge: string;
-        user: { id: string; [key: string]: any };
-        [key: string]: any;
+        user: { id: string; [key: string]: unknown };
       };
 
-      // Convert Base64URL to Base64
-      const base64ToBase64Url = (base64url: string): string => {
-        return base64url
-          .replace(/-/g, "+")
-          .replace(/_/g, "/")
-          .padEnd(base64url.length + ((4 - (base64url.length % 4)) % 4), "=");
+      const publicKey: PublicKeyCredentialCreationOptions = {
+        ...options,
+        challenge: base64urlToUint8Array(options.challenge).slice(0)
+          .buffer as ArrayBuffer,
+        user: {
+          ...options.user,
+          id: base64urlToUint8Array(options.user.id).slice(0)
+            .buffer as ArrayBuffer,
+        },
       };
 
-      const challengeBase64 = base64ToBase64Url(options.challenge);
-
-      const credential = (await navigator.credentials
-        .create({
-          publicKey: {
-            ...options,
-            challenge: Uint8Array.from(atob(challengeBase64), (c) =>
-              c.charCodeAt(0),
-            ),
-
-            user: {
-              ...options.user,
-              id: Uint8Array.from(String(options.user.id), (c) =>
-                c.charCodeAt(0),
-              ),
-              displayName: "",
-              name: "",
-            },
-            pubKeyCredParams: [
-              { alg: -8, type: "public-key" },
-              { alg: -7, type: "public-key" },
-              { alg: -257, type: "public-key" },
-            ],
-            // rp: { id: 'rc-store.benhalverson.dev', name: "Lulu's Raceshop" },
-            rp: { id: `${DOMAIN}`, name: "Lulu's Raceshop" },
-          },
-        })
-        .catch((err) => {
-          console.error("Error creating credential:", err);
-          setMessage("Error creating credential");
-        })) as PublicKeyCredential | null;
+      const credential = (await navigator.credentials.create({
+        publicKey,
+      })) as PublicKeyCredential | null;
 
       if (!credential) {
         setMessage("User cancelled passkey creation");
         return;
       }
 
+      const attestationResponse =
+        credential.response as AuthenticatorAttestationResponse;
+
       const credentialResponse = {
         id: credential.id,
-        rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))),
+        rawId: bufferToBase64url(credential.rawId),
         type: credential.type,
         response: {
-          clientDataJSON: btoa(
-            String.fromCharCode(
-              ...new Uint8Array(credential.response.clientDataJSON),
-            ),
-          ),
-          attestationObject: btoa(
-            String.fromCharCode(
-              ...new Uint8Array((credential.response as any).attestationObject),
-            ),
+          clientDataJSON: bufferToBase64url(attestationResponse.clientDataJSON),
+          attestationObject: bufferToBase64url(
+            attestationResponse.attestationObject,
           ),
+          transports: attestationResponse.getTransports
+            ? attestationResponse.getTransports()
+            : [],
         },
+        clientExtensionResults: credential.getClientExtensionResults(),
       };
 
-      const finishRes = await fetch(`${BASE_URL}/webauthn/register/finish`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify(credentialResponse),
-      });
+      const verifyPayload = {
+        ...credentialResponse,
+        credentialId: credentialResponse.id,
+        credential: credentialResponse,
+      };
+
+      const finishRes = await fetch(
+        `${BASE_URL}/api/auth/passkey/verify-registration`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify(verifyPayload),
+        },
+      );
 
       if (!finishRes.ok) {
-        setMessage("Finish registration failed");
+        const body = (await finishRes.json().catch(() => ({}))) as {
+          message?: string;
+          code?: string;
+        };
+        setMessage(
+          body.message || body.code || "Passkey registration failed",
+        );
         return;
       }
 
@@ -161,11 +159,23 @@ const Profile = () => {
       );
     }
   };
+
   const handleRemove = async (id: string) => {
-    await fetch(`${BASE_URL}/webauthn/authenticators/${id}`, {
-      method: "DELETE",
-      credentials: "include",
+    const res = await fetch(`${BASE_URL}/api/auth/passkey/delete-passkey`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+        credentials: "include",
+      body: JSON.stringify({ id }),
     });
+
+    if (!res.ok) {
+      const body = (await res.json().catch(() => ({}))) as {
+        message?: string;
+        code?: string;
+      };
+      throw new Error(body.message || body.code || "Failed to remove passkey");
+    }
+
     await getAuthenticators();
   };