chore: promote UAT to production (CAR-662, audit logging middleware)

2026-04-15 04:29:39 +00:00
parent 836b8509d5 87b39d6ef4
commit 3e8eeb108a
9 changed files with 267 additions and 75 deletions
@@ -10,7 +10,6 @@ test.describe('J1: Registration and Login', () => {
    await page.fill('[placeholder="Password (min. 8 characters)"]', 'TestPass123!');
    await page.click('button[type="submit"]');

-    // With VITE_MOCK_AUTH=true the app navigates to "/" on success
    await expect(page).toHaveURL('http://localhost:5173/');
    await expect(page.getByRole('heading', { name: /cart/i })).toBeVisible();
  });
@@ -38,7 +38,7 @@
        "tailwindcss": "^4.0.0",
        "typescript": "^5.7.3",
        "typescript-eslint": "^8.56.1",
-        "vite": "^6.3.5",
+        "vite": "^6.4.2",
        "vite-plugin-pwa": "^0.21.2",
        "vitest": "^3.2.4"
      }
@@ -1867,6 +1867,40 @@
        "node": ">=18"
      }
    },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.25.12",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -2669,6 +2703,25 @@
        "node": ">=18"
      }
    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.3.tgz",
+      "integrity": "sha512-xK9sGVbJWYb08+mTJt3/YV24WxvxpXcXtP6B172paPZ+Ts69Re9dAr7lKwJoeIx8OoeuimEiRZ7umkiUVClmmQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
    "node_modules/@noble/ciphers": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-2.1.1.tgz",
@@ -3659,6 +3712,17 @@
        }
      }
    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@types/aria-query": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -4166,33 +4230,6 @@
        "url": "https://opencollective.com/vitest"
      }
    },
-    "node_modules/@vitest/mocker": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
-      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/spy": "3.2.4",
-        "estree-walker": "^3.0.3",
-        "magic-string": "^0.30.17"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "msw": "^2.4.9",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "msw": {
-          "optional": true
-        },
-        "vite": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@vitest/pretty-format": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
@@ -9473,6 +9510,14 @@
        "typescript": ">=4.8.4"
      }
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -10020,6 +10065,33 @@
        }
      }
    },
+    "node_modules/vitest/node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/w3c-xmlserializer": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -43,7 +43,7 @@
    "tailwindcss": "^4.0.0",
    "typescript": "^5.7.3",
    "typescript-eslint": "^8.56.1",
-    "vite": "^6.3.5",
+    "vite": "^6.4.2",
    "vite-plugin-pwa": "^0.21.2",
    "vitest": "^3.2.4"
  },
@@ -9,7 +9,7 @@ export default defineConfig({
    },
  ],
  webServer: {
-    command: 'VITE_MOCK_AUTH=true npm run dev',
+    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
@@ -15,6 +15,7 @@ import { AccountLinking } from './pages/AccountLinking.tsx'
 import { Login } from './pages/Login.tsx'
 import { Register } from './pages/Register.tsx'
 import { ForgotPassword } from './pages/ForgotPassword.tsx'
+import { VerifyEmail } from './pages/VerifyEmail.tsx'

 const queryClient = new QueryClient({
  defaultOptions: {
@@ -47,6 +48,7 @@ export default function App() {
          <Route path="login" element={<Login />} />
          <Route path="register" element={<Register />} />
          <Route path="forgot-password" element={<ForgotPassword />} />
+          <Route path="verify-email" element={<VerifyEmail />} />
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
@@ -1,25 +1,8 @@
-import { useEffect } from 'react'
 import { Navigate, Outlet } from 'react-router-dom'
 import { authClient } from '../lib/auth-client.ts'
-import { useAuthStore } from '../stores/auth.ts'

 export function ProtectedRoute() {
-  const isMockAuth = import.meta.env.VITE_MOCK_AUTH === 'true'
  const { data: session, isPending } = authClient.useSession()
-  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
-  const setAuthenticated = useAuthStore((s) => s.setAuthenticated)
-
-  useEffect(() => {
-    if (!isMockAuth) {
-      setAuthenticated(!!session)
-    }
-  }, [session, setAuthenticated, isMockAuth])
-
-  // In mock auth mode, rely on Zustand store (set by Login/Register pages)
-  if (isMockAuth) {
-    if (!isAuthenticated) return <Navigate to="/login" replace />
-    return <Outlet />
-  }

  if (isPending) {
    return (
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { authClient } from '../lib/auth-client.ts'
-import { useAuthStore } from '../stores/auth.ts'

 export function Login() {
  const [email, setEmail] = useState('')
@@ -9,7 +8,6 @@ export function Login() {
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()
-  const setAuthenticated = useAuthStore((s) => s.setAuthenticated)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
@@ -40,12 +38,7 @@ export function Login() {
        setError('Sign in failed. Please try again.')
      }
    } catch {
-      if (import.meta.env.VITE_MOCK_AUTH === 'true') {
-        setAuthenticated(true)
-        navigate('/')
-      } else {
-        setError('Invalid email or password. Please try again.')
-      }
+      setError('Invalid email or password. Please try again.')
    } finally {
      setLoading(false)
    }
@@ -1,7 +1,6 @@
 import { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { authClient } from '../lib/auth-client.ts'
-import { useAuthStore } from '../stores/auth.ts'

 export function Register() {
  const [name, setName] = useState('')
@@ -9,8 +8,9 @@ export function Register() {
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
-  const navigate = useNavigate()
-  const setAuthenticated = useAuthStore((s) => s.setAuthenticated)
+  const [registrationComplete, setRegistrationComplete] = useState(false)
+  const [resendLoading, setResendLoading] = useState(false)
+  const [resendMessage, setResendMessage] = useState('')

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
@@ -38,27 +38,57 @@ export function Register() {
        throw new Error(authError.message ?? 'Registration failed')
      }

-      // After successful signUp, force a session fetch to confirm the cookie is set
-      // before navigating to the protected route
-      const sessionResult = await authClient.getSession()
-      if (sessionResult.data) {
-        navigate('/')
-      } else {
-        // Session not established — show success message and link to login
-        setError('Account created! Please sign in.')
-      }
+      setRegistrationComplete(true)
    } catch {
-      if (import.meta.env.VITE_MOCK_AUTH === 'true') {
-        setAuthenticated(true)
-        navigate('/')
-      } else {
-        setError('Registration failed. Please try again.')
-      }
+      setError('Registration failed. Please try again.')
    } finally {
      setLoading(false)
    }
  }

+  async function handleResendVerification() {
+    setResendLoading(true)
+    setResendMessage('')
+    try {
+      const { error } = await authClient.sendVerificationEmail({ email })
+      if (error) {
+        setResendMessage('Failed to resend. Please try again.')
+      } else {
+        setResendMessage('Verification email sent!')
+      }
+    } finally {
+      setResendLoading(false)
+    }
+  }
+
+  if (registrationComplete) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center px-4">
+        <h1 className="mb-2 text-3xl font-bold text-gray-900">Check your email</h1>
+        <p className="mb-8 text-sm text-gray-500">
+          We sent a verification link to {email}. Click it to activate your account.
+        </p>
+        <button
+          type="button"
+          onClick={handleResendVerification}
+          disabled={resendLoading}
+          className="min-h-12 rounded-xl bg-brand-blue px-6 py-3 text-base font-medium text-white active:bg-brand-blue/90 disabled:opacity-60"
+        >
+          {resendLoading ? 'Sending...' : 'Resend email'}
+        </button>
+        {resendMessage && (
+          <p className="mt-4 text-sm text-gray-500">{resendMessage}</p>
+        )}
+        <p className="mt-6 text-sm text-gray-500">
+          Already have an account?{' '}
+          <Link to="/login" className="text-brand-blue">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    )
+  }
+
  return (
    <div className="flex min-h-screen flex-col items-center justify-center px-4">
      <h1 className="mb-2 text-3xl font-bold text-gray-900">Create Account</h1>
@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { authClient } from "../lib/auth-client.ts";
+
+export function VerifyEmail() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [status, setStatus] = useState<"verifying" | "success" | "error">("verifying");
+  const [resendEmail, setResendEmail] = useState("");
+  const [showResend, setShowResend] = useState(false);
+  const [resending, setResending] = useState(false);
+  const [resendMessage, setResendMessage] = useState("");
+
+  useEffect(() => {
+    const token = searchParams.get("token");
+    const callbackURL = searchParams.get("callbackURL") || "/";
+
+    if (!token) {
+      setStatus("error");
+      return;
+    }
+
+    authClient.verifyEmail({ query: { token } })
+      .then(() => {
+        setStatus("success");
+        setTimeout(() => {
+          navigate(callbackURL);
+        }, 2000);
+      })
+      .catch(() => {
+        setStatus("error");
+      });
+  }, [searchParams, navigate]);
+
+  async function handleResend() {
+    if (!resendEmail) {
+      setResendMessage("Please enter your email address.");
+      return;
+    }
+
+    setResending(true);
+    setResendMessage("");
+
+    try {
+      const { error } = await authClient.sendVerificationEmail({ email: resendEmail });
+      if (error) {
+        setResendMessage("Failed to resend. Please try again.");
+      } else {
+        setResendMessage("Verification email sent!");
+        setShowResend(false);
+      }
+    } finally {
+      setResending(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+      {status === "verifying" && (
+        <>
+          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-brand-blue" />
+          <h1 className="mb-2 text-2xl font-bold text-gray-900">Verifying your email...</h1>
+          <p className="text-sm text-gray-500">Please wait while we verify your email address.</p>
+        </>
+      )}
+
+      {status === "success" && (
+        <>
+          <h1 className="mb-2 text-2xl font-bold text-gray-900">Email verified!</h1>
+          <p className="text-sm text-gray-500">Redirecting you shortly...</p>
+        </>
+      )}
+
+      {status === "error" && (
+        <>
+          <h1 className="mb-2 text-2xl font-bold text-gray-900">Verification failed</h1>
+          <p className="mb-6 text-sm text-gray-500">The verification link may have expired or is invalid.</p>
+
+          {!showResend ? (
+            <button
+              type="button"
+              onClick={() => setShowResend(true)}
+              className="min-h-12 rounded-xl bg-brand-blue px-6 py-3 text-base font-medium text-white active:bg-brand-blue/90"
+            >
+              Resend verification email
+            </button>
+          ) : (
+            <div className="w-full max-w-sm space-y-4">
+              <input
+                type="email"
+                placeholder="Your email address"
+                value={resendEmail}
+                onChange={(e) => setResendEmail(e.target.value)}
+                className="min-h-12 w-full rounded-xl border border-gray-200 px-4 text-base focus:border-brand-blue focus:outline-none focus:ring-1 focus:ring-brand-blue"
+              />
+              <button
+                type="button"
+                onClick={handleResend}
+                disabled={resending}
+                className="min-h-12 w-full rounded-xl bg-brand-blue px-4 py-3 text-base font-medium text-white active:bg-brand-blue/90 disabled:opacity-60"
+              >
+                {resending ? "Sending..." : "Send verification email"}
+              </button>
+              {resendMessage && (
+                <p className="text-sm text-gray-500">{resendMessage}</p>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}