cartsnitch/app
12
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #213 from cartsnitch/dev

Browse Source 
Promote to UAT: vite, mock-auth, Redis rate-limit, Redis cache, email verification
This commit is contained in:
cartsnitch-cto[bot]
2026-04-15 03:33:42 +00:00
committed by GitHub
parent 65528213b8 bef0e8fc3e
commit 1b9acf1f30
7 changed files with 165 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/journeys/j1-registration-login.spec.ts
-1
View File
@@ -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();
});
playwright.config.ts
+1 -1
View File
@@ -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,
},
src/App.tsx
+2
View File
@@ -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>
src/components/ProtectedRoute.tsx
-17
View File
@@ -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 (
src/pages/Login.tsx
+1 -8
View File
@@ -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)
}
src/pages/Register.tsx
+48 -17
View File
@@ -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 Register() {
const [name, setName] = useState('')
@@ -9,8 +8,10 @@ export function Register() {
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const [registrationComplete, setRegistrationComplete] = useState(false)
const [resendLoading, setResendLoading] = useState(false)
const [resendMessage, setResendMessage] = useState('')
const navigate = useNavigate()
const setAuthenticated = useAuthStore((s) => s.setAuthenticated)
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
@@ -38,27 +39,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>
src/pages/VerifyEmail.tsx
+113
View File
@@ -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>
);
}