Email + password login scheme set up, mailgun sending set up.

2026-04-02 14:29:56 -05:00
parent d3021014ed
commit f13035f8c5
10 changed files with 241 additions and 41 deletions
--- a/App.tsx
+++ b/App.tsx
@@ -44,7 +44,7 @@ export default function App() {
    if (isPending) return;

    if (!session) {
-      setView('login');
+      if (view !== 'signup' && view !== 'forgot-password') setView('login');
      return;
    }

--- a/components/auth/ForgotPassword.tsx
+++ b/components/auth/ForgotPassword.tsx
@@ -3,7 +3,7 @@ import { Button } from '../ui/button';
 import { Card, CardContent } from '../ui/card';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-import { forgetPassword } from '../../lib/auth-client';
+import { requestPasswordReset } from '../../lib/auth-client';
 import { ArrowLeft } from 'lucide-react';

 const logo = '/logo.png';
@@ -22,7 +22,7 @@ export function ForgotPassword({ onBack }: Props) {
    e.preventDefault();
    setError('');
    setLoading(true);
-    const res = await forgetPassword({
+    const res = await requestPasswordReset({
      email,
      redirectTo: `${window.location.origin}/reset-password`,
    });
--- a/components/auth/LoginForm.tsx
+++ b/components/auth/LoginForm.tsx
@@ -1,9 +1,9 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Button } from '../ui/button';
 import { Card, CardContent } from '../ui/card';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-import { signIn } from '../../lib/auth-client';
+import { signIn, sendVerificationEmail } from '../../lib/auth-client';
 import {
  Package,
  FileCheck,
@@ -52,9 +52,24 @@ export function LoginForm({ onSignUp, onForgotPassword }: Props) {
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const [resendLoading, setResendLoading] = useState(false);
  const aboutRef = useRef<HTMLElement>(null);
  const heroRef = useRef<HTMLElement>(null);

+  useEffect(() => {
+    if (resendCooldown <= 0) return;
+    const t = setTimeout(() => setResendCooldown(c => c - 1), 1000);
+    return () => clearTimeout(t);
+  }, [resendCooldown]);
+
+  async function handleResend() {
+    setResendLoading(true);
+    await sendVerificationEmail({ email, callbackURL: window.location.origin });
+    setResendLoading(false);
+    setResendCooldown(60);
+  }
+
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('');
@@ -145,7 +160,25 @@ export function LoginForm({ onSignUp, onForgotPassword }: Props) {
                  autoComplete="current-password"
                />
              </div>
-              {error && <p className="text-sm text-red-600">{error}</p>}
+              {error && (
+                <div className="space-y-1">
+                  <p className="text-sm text-red-600">{error}</p>
+                  {error === 'Email not verified' && (
+                    <button
+                      type="button"
+                      onClick={handleResend}
+                      disabled={resendLoading || resendCooldown > 0}
+                      className="text-sm text-primary hover:underline disabled:opacity-50 disabled:no-underline"
+                    >
+                      {resendLoading
+                        ? 'Sending…'
+                        : resendCooldown > 0
+                        ? `Resend verification email (${resendCooldown}s)`
+                        : 'Resend verification email'}
+                    </button>
+                  )}
+                </div>
+              )}
              <Button type="submit" className="w-full" disabled={loading}>
                {loading ? 'Signing in…' : 'Sign in'}
              </Button>
--- a/components/auth/SignUpForm.tsx
+++ b/components/auth/SignUpForm.tsx
@@ -3,7 +3,16 @@ import { Button } from '../ui/button';
 import { Card, CardContent } from '../ui/card';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-import { signUp } from '../../lib/auth-client';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '../ui/dialog';
+import { signUp, sendVerificationEmail } from '../../lib/auth-client';
+import { useEffect } from 'react';

 const logo = '/logo.png';

@@ -12,13 +21,29 @@ interface Props {
  onVerify: () => void;
 }

-export function SignUpForm({ onLogin, onVerify }: Props) {
+export function SignUpForm({ onLogin }: Props) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
+  const [showVerifyDialog, setShowVerifyDialog] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const [resendLoading, setResendLoading] = useState(false);
+
+  useEffect(() => {
+    if (resendCooldown <= 0) return;
+    const t = setTimeout(() => setResendCooldown(c => c - 1), 1000);
+    return () => clearTimeout(t);
+  }, [resendCooldown]);
+
+  async function handleResend() {
+    setResendLoading(true);
+    await sendVerificationEmail({ email, callbackURL: window.location.origin });
+    setResendLoading(false);
+    setResendCooldown(60);
+  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
@@ -42,11 +67,47 @@ export function SignUpForm({ onLogin, onVerify }: Props) {
    if (res.error) {
      setError(res.error.message || 'Failed to create account');
    } else {
-      onVerify();
+      setShowVerifyDialog(true);
    }
  }

  return (
+    <>
+    <Dialog open={showVerifyDialog} onOpenChange={open => { if (!open) onLogin(); }}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Check your inbox</DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-2 text-sm text-muted-foreground">
+              <p>
+                We sent a verification link to{' '}
+                <span className="font-medium text-foreground">{email}</span>.
+              </p>
+              <p>
+                Click the link in the email to activate your account. If you don't see it, check your spam folder.
+              </p>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="flex-col gap-2 sm:flex-col">
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={handleResend}
+            disabled={resendLoading || resendCooldown > 0}
+          >
+            {resendLoading
+              ? 'Sending…'
+              : resendCooldown > 0
+              ? `Resend in ${resendCooldown}s`
+              : 'Resend verification email'}
+          </Button>
+          <Button className="w-full" onClick={onLogin}>
+            Back to sign in
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
    <div className="flex h-screen items-center justify-center bg-secondary">
      <Card className="w-full max-w-sm">
        <CardContent className="p-8 space-y-6">
@@ -118,5 +179,6 @@ export function SignUpForm({ onLogin, onVerify }: Props) {
        </CardContent>
      </Card>
    </div>
+    </>
  );
 }
--- a/lib/auth-client.ts
+++ b/lib/auth-client.ts
@@ -9,7 +9,7 @@ export const {
  signOut,
  signUp,
  useSession,
-  forgetPassword,
+  requestPasswordReset,
  resetPassword,
  sendVerificationEmail,
 } = authClient;
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
    "@radix-ui/react-toggle": "^1.1.2",
    "@radix-ui/react-toggle-group": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.8",
-    "better-auth": "^1.0.0",
+    "better-auth": "^1.5.5",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
--- a/server/package.json
+++ b/server/package.json
@@ -9,14 +9,16 @@
    "db:migrate": "tsx src/db/migrate.ts"
  },
  "dependencies": {
-    "@aws-sdk/client-ses": "^3.1013.0",
    "@better-auth/kysely-adapter": "^1.5.6",
+    "@node-rs/argon2": "^2.0.2",
    "better-auth": "^1.5.5",
    "cors": "^2.8.5",
    "dotenv": "^17.3.1",
    "express": "^4.21.2",
    "express-rate-limit": "^7.5.0",
+    "form-data": "^4.0.1",
    "kysely": "^0.28.15",
+    "mailgun.js": "^11.1.0",
    "multer": "^2.0.0",
    "pg": "^8.13.3"
  },
--- a/server/src/auth/auth.ts
+++ b/server/src/auth/auth.ts
@@ -1,4 +1,5 @@
 import { betterAuth } from 'better-auth';
+import { hash as argon2Hash, verify as argon2Verify } from '@node-rs/argon2';
 import { kyselyAdapter } from '@better-auth/kysely-adapter';
 import { Kysely, PostgresDialect } from 'kysely';
 import { Pool } from 'pg';
@@ -29,6 +30,10 @@ export const auth = betterAuth({
  emailAndPassword: {
    enabled: true,
    requireEmailVerification: true,
+    password: {
+      hash: (password) => argon2Hash(password, { memoryCost: 65536, timeCost: 3, parallelism: 4, algorithm: 2 }),
+      verify: ({ hash, password }) => argon2Verify(hash, password),
+    },
    sendResetPassword: async ({ user, url }) => {
      await sendEmail({
        to: user.email,
--- a/server/src/auth/email.ts
+++ b/server/src/auth/email.ts
@@ -1,7 +1,14 @@
-import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses';
+import FormData from 'form-data';
+import Mailgun from 'mailgun.js';

-const ses = new SESClient({ region: process.env.AWS_REGION || 'us-east-1' });
-const FROM = process.env.FROM_EMAIL || 'noreply@labwise.wahwa.com';
+const mailgun = new Mailgun(FormData);
+const mg = mailgun.client({
+  username: 'api',
+  key: process.env.MAILGUN_API_KEY || '',
+});
+
+const DOMAIN = process.env.MAILGUN_DOMAIN || 'sandbox06aa4efa8cc342878b7470a7c9113df3.mailgun.org';
+const FROM = process.env.FROM_EMAIL || `LabWise <postmaster@${DOMAIN}>`;

 export async function sendEmail({
  to,
@@ -12,36 +19,127 @@ export async function sendEmail({
  subject: string;
  html: string;
 }) {
-  await ses.send(
-    new SendEmailCommand({
-      Source: FROM,
-      Destination: { ToAddresses: [to] },
-      Message: {
-        Subject: { Data: subject },
-        Body: { Html: { Data: html } },
-      },
-    })
-  );
+  await mg.messages.create(DOMAIN, {
+    from: FROM,
+    to: [to],
+    subject,
+    html,
+  });
 }

+/* ------------------------------------------------------------------ */
+/*  Shared email layout                                                */
+/* ------------------------------------------------------------------ */
+
+function emailLayout(body: string) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body style="margin:0;padding:0;background:#f0f5f3;font-family:'Inter',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f0f5f3;padding:40px 16px">
+    <tr>
+      <td align="center">
+        <table role="presentation" width="480" cellpadding="0" cellspacing="0" style="max-width:480px;width:100%">
+          <!-- Header -->
+          <tr>
+            <td align="center" style="padding-bottom:24px">
+              <table role="presentation" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="background:#2d5a4a;border-radius:10px;padding:10px 20px">
+                    <span style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:20px;font-weight:700;color:#ffffff;letter-spacing:-0.3px">LabWise</span>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <!-- Card -->
+          <tr>
+            <td style="background:#ffffff;border-radius:12px;border:1px solid rgba(45,90,74,0.12);padding:40px 36px">
+              ${body}
+            </td>
+          </tr>
+          <!-- Footer -->
+          <tr>
+            <td align="center" style="padding-top:24px">
+              <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#5a7a6f;margin:0">
+                &copy; ${new Date().getFullYear()} LabWise &mdash; AI-powered lab management
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Email templates                                                    */
+/* ------------------------------------------------------------------ */
+
 export function verificationEmailHtml(url: string) {
-  return `
-    <div style="font-family:sans-serif;max-width:480px;margin:0 auto;padding:32px">
-      <h2 style="color:#2d5a4a;margin-bottom:8px">Verify your email</h2>
-      <p style="color:#555;margin-bottom:24px">Click the button below to verify your email address and activate your LabWise account.</p>
-      <a href="${url}" style="display:inline-block;background:#5a9584;color:white;padding:12px 28px;border-radius:6px;text-decoration:none;font-weight:600">Verify Email</a>
-      <p style="color:#aaa;font-size:12px;margin-top:32px">If you didn't create a LabWise account, you can ignore this email.</p>
+  return emailLayout(`
+    <h2 style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:22px;font-weight:700;color:#1a3a2e;margin:0 0 8px">
+      Verify your email
+    </h2>
+    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;color:#5a7a6f;line-height:1.6;margin:0 0 28px">
+      Thanks for creating a LabWise account. Click the button below to verify your email address and get started.
+    </p>
+    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 0 28px">
+      <tr>
+        <td style="background:#2d5a4a;border-radius:8px">
+          <a href="${url}" style="display:inline-block;padding:14px 32px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;color:#ffffff;text-decoration:none">
+            Verify Email
+          </a>
+        </td>
+      </tr>
+    </table>
+    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#5a7a6f;line-height:1.5;margin:0 0 8px">
+      Or copy and paste this link into your browser:
+    </p>
+    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#2d5a4a;word-break:break-all;line-height:1.5;margin:0 0 28px">
+      ${url}
+    </p>
+    <div style="border-top:1px solid rgba(45,90,74,0.12);padding-top:20px">
+      <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#9ab0a8;margin:0">
+        If you didn't create a LabWise account, you can safely ignore this email.
+      </p>
    </div>
-  `;
+  `);
 }

 export function resetPasswordEmailHtml(url: string) {
-  return `
-    <div style="font-family:sans-serif;max-width:480px;margin:0 auto;padding:32px">
-      <h2 style="color:#2d5a4a;margin-bottom:8px">Reset your password</h2>
-      <p style="color:#555;margin-bottom:24px">Click the button below to reset your LabWise password. This link expires in 1 hour.</p>
-      <a href="${url}" style="display:inline-block;background:#5a9584;color:white;padding:12px 28px;border-radius:6px;text-decoration:none;font-weight:600">Reset Password</a>
-      <p style="color:#aaa;font-size:12px;margin-top:32px">If you didn't request this, you can ignore this email.</p>
+  return emailLayout(`
+    <h2 style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:22px;font-weight:700;color:#1a3a2e;margin:0 0 8px">
+      Reset your password
+    </h2>
+    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;color:#5a7a6f;line-height:1.6;margin:0 0 28px">
+      We received a request to reset your LabWise password. Click the button below to choose a new one. This link expires in 1 hour.
+    </p>
+    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 0 28px">
+      <tr>
+        <td style="background:#2d5a4a;border-radius:8px">
+          <a href="${url}" style="display:inline-block;padding:14px 32px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;color:#ffffff;text-decoration:none">
+            Reset Password
+          </a>
+        </td>
+      </tr>
+    </table>
+    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#5a7a6f;line-height:1.5;margin:0 0 8px">
+      Or copy and paste this link into your browser:
+    </p>
+    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#2d5a4a;word-break:break-all;line-height:1.5;margin:0 0 28px">
+      ${url}
+    </p>
+    <div style="border-top:1px solid rgba(45,90,74,0.12);padding-top:20px">
+      <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#9ab0a8;margin:0">
+        If you didn't request a password reset, you can safely ignore this email. Your password won't be changed.
+      </p>
    </div>
-  `;
+  `);
 }
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -1,8 +1,8 @@
 {
  "compilerOptions": {
    "target": "ES2022",
-    "module": "CommonJS",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "node16",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,