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

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`,
     });

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>

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