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/Signin.test.tsx

@@ -0,0 +1,201 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
+import { vi } from "vitest";
+import SigninPage from "./Signin";
+
+vi.mock("../config", () => ({
+  BASE_URL: "http://test.local",
+  DOMAIN: "test.local",
+}));
+
+const mockFetchUser = vi.fn();
+vi.mock("../context/AuthContext", () => ({
+  useAuth: () => ({ fetchUser: mockFetchUser }),
+}));
+
+vi.mock("react-hot-toast", () => {
+  const toast = Object.assign(vi.fn(), {
+    loading: vi.fn(() => "toast-id"),
+    success: vi.fn(),
+    error: vi.fn(),
+  });
+  return { default: toast };
+});
+
+const mockNavigate = vi.fn();
+vi.mock("react-router-dom", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("react-router-dom")>();
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+function renderSignin() {
+  const router = createMemoryRouter([{ path: "/", element: <SigninPage /> }], {
+    initialEntries: ["/"],
+  });
+  render(<RouterProvider router={router} />);
+}
+
+describe("Signin – password tab", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    mockFetchUser.mockReset();
+    mockNavigate.mockReset();
+  });
+
+  it("renders email and password inputs", () => {
+    renderSignin();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+  });
+
+  it("calls /auth/signin, fetches user, and navigates on success", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    } as Response);
+    mockFetchUser.mockResolvedValueOnce(undefined);
+
+    renderSignin();
+    const user = userEvent.setup();
+
+    await user.type(screen.getByLabelText(/email/i), "user@example.com");
+    await user.type(screen.getByLabelText(/password/i), "password123");
+    await user.click(screen.getByRole("button", { name: /sign in with password/i }));
+
+    await waitFor(() => expect(mockFetchUser).toHaveBeenCalledTimes(1));
+    expect(mockNavigate).toHaveBeenCalledWith("/profile");
+  });
+
+  it("shows backend error message on failed sign-in", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: "Invalid credentials" }),
+    } as Response);
+
+    const toast = await import("react-hot-toast");
+
+    renderSignin();
+    const user = userEvent.setup();
+
+    await user.type(screen.getByLabelText(/email/i), "bad@example.com");
+    await user.type(screen.getByLabelText(/password/i), "wrongpassword");
+    await user.click(screen.getByRole("button", { name: /sign in with password/i }));
+
+    await waitFor(() =>
+      expect(toast.default.error).toHaveBeenCalledWith(
+        expect.stringContaining("Invalid credentials"),
+        expect.anything(),
+      ),
+    );
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+});
+
+describe("Signin – passkey tab", () => {
+  beforeEach(() => {
+    Object.defineProperty(globalThis.navigator, "credentials", {
+      value: { get: vi.fn() },
+      configurable: true,
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    mockFetchUser.mockReset();
+    mockNavigate.mockReset();
+  });
+
+  async function switchToPasskeyTab() {
+    renderSignin();
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: /passkey/i }));
+    return user;
+  }
+
+  it("renders the passkey button after switching tabs", async () => {
+    await switchToPasskeyTab();
+    expect(
+      screen.getByRole("button", { name: /passkey login/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows error when generate-authenticate-options request fails", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: "No passkey registered" }),
+    } as Response);
+
+    const toast = await import("react-hot-toast");
+    const user = await switchToPasskeyTab();
+
+    await user.click(screen.getByRole("button", { name: /passkey login/i }));
+
+    await waitFor(() =>
+      expect(toast.default.error).toHaveBeenCalledWith(
+        expect.stringContaining("No passkey registered"),
+        expect.anything(),
+      ),
+    );
+  });
+
+  it("sends correct payload to verify-authentication and navigates on success", async () => {
+    const fakeOptions = {
+      challenge: "dGVzdC1jaGFsbGVuZ2U",
+      allowCredentials: [{ id: "Y3JlZC1pZA", type: "public-key" }],
+      timeout: 60000,
+    };
+
+    const fakeCredential = {
+      id: "cred-id-base64url",
+      rawId: new Uint8Array([1, 2, 3]).buffer,
+      type: "public-key",
+      response: {
+        authenticatorData: new Uint8Array([4, 5, 6]).buffer,
+        clientDataJSON: new Uint8Array([7, 8, 9]).buffer,
+        signature: new Uint8Array([10, 11, 12]).buffer,
+        userHandle: null,
+      },
+      getClientExtensionResults: () => ({}),
+    } as unknown as PublicKeyCredential;
+
+    const fetchSpy = vi.spyOn(globalThis, "fetch")
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => fakeOptions,
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ verified: true }),
+      } as Response);
+
+    (navigator.credentials.get as ReturnType<typeof vi.fn>).mockResolvedValueOnce(
+      fakeCredential,
+    );
+    mockFetchUser.mockResolvedValueOnce(undefined);
+
+    const user = await switchToPasskeyTab();
+    await user.click(screen.getByRole("button", { name: /passkey login/i }));
+
+    await waitFor(() => expect(mockFetchUser).toHaveBeenCalledTimes(1));
+
+    // Verify the verify-authentication request body structure
+    const verifyCall = fetchSpy.mock.calls[1];
+    expect(verifyCall[0]).toContain("/api/auth/passkey/verify-authentication");
+    const body = JSON.parse(verifyCall[1]?.body as string);
+    expect(body).toMatchObject({
+      id: "cred-id-base64url",
+      type: "public-key",
+      response: {
+        authenticatorData: expect.any(String),
+        clientDataJSON: expect.any(String),
+        signature: expect.any(String),
+      },
+      clientExtensionResults: {},
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith("/profile");
+  });
+});