From 6fe91c748cae3fe189807d34988cb64531a1c075 Mon Sep 17 00:00:00 2001
From: Barcode Betty <noreply@cartsnitch.com>
Date: Wed, 15 Apr 2026 03:30:44 +0000
Subject: [PATCH 1/2] feat(auth): enable email verification with Resend

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 src/App.tsx               |   2 +
 src/pages/Register.tsx    |  56 ++++++++++++++++---
 src/pages/VerifyEmail.tsx | 113 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 162 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/VerifyEmail.tsx

diff --git a/src/App.tsx b/src/App.tsx
index ee4c2dc..953553a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index c75e2d6..f40ea2d 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -9,6 +9,9 @@ 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)
 
@@ -38,15 +41,7 @@ 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)
@@ -59,6 +54,49 @@ export function Register() {
     }
   }
 
+  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>
diff --git a/src/pages/VerifyEmail.tsx b/src/pages/VerifyEmail.tsx
new file mode 100644
index 0000000..64da657
--- /dev/null
+++ b/src/pages/VerifyEmail.tsx
@@ -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>
+  );
+}
\ No newline at end of file

From 7651e0e72c67aee5d122810aaaaf5e8942096637 Mon Sep 17 00:00:00 2001
From: Barcode Betty <barcode.betty@cartsnitch.com>
Date: Tue, 14 Apr 2026 13:18:13 +0000
Subject: [PATCH 2/2] Enable Better-Auth email verification with Resend

- Add emailVerification.sendVerificationEmail config to auth/src/auth.ts
  using Resend to send verification emails on sign-up
- Add resend npm package to auth/package.json
- Update auth/.env.example with RESEND_API_KEY and FROM_EMAIL
- Create VerifyEmail.tsx page with token verification flow,
  spinner UX, success/Error states, and resend option
- Update Register.tsx to redirect to /verify-email after signup
  instead of auto-navigating to dashboard
- Add /verify-email route to App.tsx
- Frontend shows 'check your email' step after registration

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 src/pages/VerifyEmail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/VerifyEmail.tsx b/src/pages/VerifyEmail.tsx
index 64da657..d1c5fb3 100644
--- a/src/pages/VerifyEmail.tsx
+++ b/src/pages/VerifyEmail.tsx
@@ -110,4 +110,4 @@ export function VerifyEmail() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}