feat(auth): enable email verification with Resend (#173)

feat(auth): enable email verification with Resend

auth/.env.example

@@ -9,3 +9,7 @@ DATABASE_URL=postgresql://cartsnitch:cartsnitch@localhost:5432/cartsnitch
 
 # Port the auth service listens on
 PORT=3001
+
+# Resend email provider for transactional email
+RESEND_API_KEY=re_your_api_key_here
+FROM_EMAIL=CartSnitch <noreply@cartsnitch.com>

auth/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "bcrypt": "^6.0.0",
         "better-auth": "^1.2.0",
-        "pg": "^8.13.0"
+        "pg": "^8.13.0",
+        "resend": "^6.11.0"
       },
       "devDependencies": {
         "@types/bcrypt": "^6.0.0",
@@ -633,6 +634,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -858,6 +865,12 @@
         "@esbuild/win32-x64": "0.27.4"
       }
     },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1028,6 +1041,12 @@
         "split2": "^4.1.0"
       }
     },
+    "node_modules/postal-mime": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/postal-mime/-/postal-mime-2.7.4.tgz",
+      "integrity": "sha512-0WdnFQYUrPGGTFu1uOqD2s7omwua8xaeYGdO6rb88oD5yJ/4pPHDA4sdWqfD8wQVfCny563n/HQS7zTFft+f/g==",
+      "license": "MIT-0"
+    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
@@ -1067,6 +1086,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resend": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.11.0.tgz",
+      "integrity": "sha512-S9gxOccfwc+E6Cr3q28Gu8NkiIjYlYPlj9rqk4zkIuzlEoh8sWu/IvJSg7U7t+o3g0Ov2IOCzcneUaCi/M/WdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postal-mime": "2.7.4",
+        "svix": "1.90.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@@ -1098,6 +1138,26 @@
         "node": ">= 10.x"
       }
     },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
+    "node_modules/svix": {
+      "version": "1.90.0",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.90.0.tgz",
+      "integrity": "sha512-ljkZuyy2+IBEoESkIpn8sLM+sxJHQcPxlZFxU+nVDhltNfUMisMBzWX/UR8SjEnzoI28ZjCzMbmYAPwSTucoMw==",
+      "license": "MIT",
+      "dependencies": {
+        "standardwebhooks": "1.0.0",
+        "uuid": "^10.0.0"
+      }
+    },
     "node_modules/tsx": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
@@ -1139,6 +1199,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

auth/package.json

@@ -10,15 +10,16 @@
     "generate": "npx @better-auth/cli generate"
   },
   "dependencies": {
+    "bcrypt": "^6.0.0",
     "better-auth": "^1.2.0",
     "pg": "^8.13.0",
-    "bcrypt": "^6.0.0"
+    "resend": "^6.11.0"
   },
   "devDependencies": {
+    "@types/bcrypt": "^6.0.0",
     "@types/node": "^22.0.0",
     "@types/pg": "^8.11.0",
-    "@types/bcrypt": "^6.0.0",
     "tsx": "^4.19.0",
     "typescript": "^5.7.0"
   }
-}
+}

auth/src/auth.ts

@@ -1,6 +1,7 @@
 import { betterAuth } from "better-auth";
 import bcrypt from "bcrypt";
 import pg from "pg";
+import { Resend } from "resend";
 
 const { Pool } = pg;
 
@@ -21,6 +22,9 @@ export const pool = new Pool({
   connectionString: databaseUrl ?? "postgresql://cartsnitch:cartsnitch@localhost:5432/cartsnitch",
 });
 
+const resend = new Resend(process.env.RESEND_API_KEY);
+const fromEmail = process.env.FROM_EMAIL || "CartSnitch <noreply@cartsnitch.com>";
+
 export const auth = betterAuth({
   database: pool,
   basePath: "/auth",
@@ -41,6 +45,19 @@ export const auth = betterAuth({
     },
   },
 
+  emailVerification: {
+    sendOnSignUp: true,
+    autoSignInAfterVerification: true,
+    sendVerificationEmail: async ({ user, url }) => {
+      await resend.emails.send({
+        from: fromEmail,
+        to: user.email,
+        subject: "Verify your CartSnitch email",
+        html: `<p>Hi ${user.name || ""},</p><p>Click the link below to verify your email address:</p><p><a href="${url}">Verify Email</a></p><p>This link expires in 1 hour.</p><p>— CartSnitch</p>`,
+      });
+    },
+  },
+
   session: {
     modelName: "sessions",
     fields: {
@@ -103,4 +120,4 @@ export const auth = betterAuth({
     "https://cartsnitch.dev.farh.net",
     "https://cartsnitch.uat.farh.net",
   ],
-});
+});

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>

src/pages/Register.tsx

@@ -8,6 +8,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()
 
   async function handleSubmit(e: React.FormEvent) {
@@ -36,15 +39,7 @@ export function Register() {
         throw new Error(authError.message ?? 'Registration failed')
       }
 
-      // After successful signUp, force a session fetch to confirm the cookie is set
+      setRegistrationComplete(true)
-      // 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.')
-      }
     } catch {
       setError('Registration failed. Please try again.')
     } finally {
@@ -52,6 +47,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>

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>
+  );
+}