feat(2fa): implement google authenticator 2fa

- add otplib and qrcode dependencies
- update user model with 2fa fields
- add twoFactorCode to validation schema
- implement api routes for setup, enable, disable
- add 2fa verification in auth flow
- add 2fa management ui in settings
- implement 2fa challenge in login page

8 files changed, 940 insertions, 77 deletions

diff --git a/src/app/api/user/2fa/route.ts b/src/app/api/user/2fa/route.ts
new file mode 100644
index 0000000..c5fcf83
--- /dev/null
+++ b/src/app/api/user/2fa/route.ts
@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getServerSession } from "next-auth"
+import { authenticator } from "otplib"
+import QRCode from "qrcode"
+import dbConnect from "@/lib/mongodb"
+import User from "@/model/User"
+import { authOptions } from "@/lib/auth"
+
+export async function POST(req: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const { code, secret } = await req.json()
+
+    if (!code || !secret) {
+      return NextResponse.json(
+        { error: "Code and secret are required" },
+        { status: 400 }
+      )
+    }
+
+    const isValid = authenticator.check(code, secret)
+
+    if (!isValid) {
+      return NextResponse.json(
+        { error: "Invalid two-factor code" },
+        { status: 400 }
+      )
+    }
+
+    await dbConnect()
+    await User.findByIdAndUpdate(session.user.id, {
+      twoFactorEnabled: true,
+      twoFactorSecret: secret,
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("2FA enable error:", error)
+    return NextResponse.json(
+      { error: "Failed to enable two-factor authentication" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE() {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    await dbConnect()
+    await User.findByIdAndUpdate(session.user.id, {
+      twoFactorEnabled: false,
+      $unset: { twoFactorSecret: 1 },
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("2FA disable error:", error)
+    return NextResponse.json(
+      { error: "Failed to disable two-factor authentication" },
+      { status: 500 }
+    )
+  }
+}
+
+// Generate new secret and QR code for setup
+export async function PUT() {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const secret = authenticator.generateSecret()
+    const otpauth = authenticator.keyuri(
+      session.user.email,
+      "Next-Boilerplate",
+      secret
+    )
+    const qrCode = await QRCode.toDataURL(otpauth)
+
+    return NextResponse.json({ secret, qrCode })
+  } catch (error) {
+    console.error("2FA setup error:", error)
+    return NextResponse.json(
+      { error: "Failed to generate two-factor setup" },
+      { status: 500 }
+    )
+  }
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index ae89e63..c8a80f1 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -22,11 +22,14 @@ export default function SignInPage() {
   const [error, setError] = useState("")
   const router = useRouter()
 
+  const [showTwoFactor, setShowTwoFactor] = useState(false)
+
   const form = useForm<LoginInput>({
     resolver: zodResolver(loginSchema),
     defaultValues: {
       email: "",
       password: "",
+      twoFactorCode: "",
     },
   })
 
@@ -38,11 +41,17 @@ export default function SignInPage() {
       const result = await signIn("credentials", {
         email: data.email,
         password: data.password,
+        twoFactorCode: data.twoFactorCode,
         redirect: false,
       })
 
       if (result?.error) {
-        setError("Invalid email or password")
+        if (result.error === "2FA_REQUIRED") {
+          setShowTwoFactor(true)
+          // Don't clear password here so user can just enter code
+        } else {
+          setError(result.error)
+        }
       } else if (result?.ok) {
         router.push("/")
         router.refresh()
@@ -62,7 +71,9 @@ export default function SignInPage() {
         <CardHeader className="space-y-1">
           <CardTitle className="text-2xl text-center">Sign In</CardTitle>
           <CardDescription className="text-center">
-            Enter your email and password to access your account
+            {showTwoFactor 
+              ? "Enter the code from your authenticator app"
+              : "Enter your email and password to access your account"}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -74,76 +85,117 @@ export default function SignInPage() {
 
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="email"
-                        placeholder="john@example.com"
-                        autoComplete="email"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <div className="relative">
+              {!showTwoFactor ? (
+                <>
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="email"
+                            placeholder="john@example.com"
+                            autoComplete="email"
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Password</FormLabel>
+                        <FormControl>
+                          <div className="relative">
+                            <Input
+                              type={showPassword ? "text" : "password"}
+                              placeholder="Enter your password"
+                              autoComplete="current-password"
+                              {...field}
+                            />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                              onClick={() => setShowPassword(!showPassword)}
+                            >
+                              {showPassword ? (
+                                <EyeOff className="h-4 w-4" />
+                              ) : (
+                                <Eye className="h-4 w-4" />
+                              )}
+                            </Button>
+                          </div>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </>
+              ) : (
+                <FormField
+                  control={form.control}
+                  name="twoFactorCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Two-Factor Code</FormLabel>
+                      <FormControl>
                         <Input
-                          type={showPassword ? "text" : "password"}
-                          placeholder="Enter your password"
-                          autoComplete="current-password"
+                          placeholder="000000"
+                          autoComplete="one-time-code"
+                          maxLength={6}
                           {...field}
+                          autoFocus
                         />
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                          onClick={() => setShowPassword(!showPassword)}
-                        >
-                          {showPassword ? (
-                            <EyeOff className="h-4 w-4" />
-                          ) : (
-                            <Eye className="h-4 w-4" />
-                          )}
-                        </Button>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              
               <Button type="submit" className="w-full" disabled={isLoading}>
                 {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                Sign In
+                {showTwoFactor ? "Verify" : "Sign In"}
               </Button>
             </form>
           </Form>
 
-          <div className="text-center text-sm">
-            <span className="text-muted-foreground">Don&apos;t have an account? </span>
-            <Link href="/signup" className="text-primary hover:underline font-medium">
-              Sign up
-            </Link>
-          </div>
+          {!showTwoFactor && (
+            <>
+              <div className="text-center text-sm">
+                <span className="text-muted-foreground">Don&apos;t have an account? </span>
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Sign up
+                </Link>
+              </div>
 
-          <div className="text-center">
-            <Button variant="link" className="text-sm text-muted-foreground">
-              Forgot your password?
-            </Button>
-          </div>
+              <div className="text-center">
+                <Button variant="link" className="text-sm text-muted-foreground">
+                  Forgot your password?
+                </Button>
+              </div>
+            </>
+          )}
+          
+          {showTwoFactor && (
+             <div className="text-center">
+                <Button 
+                  variant="link" 
+                  className="text-sm text-muted-foreground"
+                  onClick={() => setShowTwoFactor(false)}
+                >
+                  Back to login
+                </Button>
+              </div>
+          )}
         </CardContent>
       </Card>
     </div>
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 5d5fd92..75d9d3d 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -1,21 +1,31 @@
-import { redirect } from "next/navigation"
 import { getServerSession } from "next-auth"
-
-import Navbar from "@/components/Navbar"
+import { redirect } from "next/navigation"
+import dbConnect from "@/lib/mongodb"
+import User from "@/model/User"
 import { authOptions } from "@/lib/auth"
-import { SettingsForm } from "@/app/settings/settings-form"
+import SettingsContent from "./settings-content"
 
 export default async function SettingsPage() {
   const session = await getServerSession(authOptions)
 
-  if (!session?.user) {
+  if (!session?.user?.email) {
     redirect("/login")
   }
 
-  return (
-    <div className="min-h-screen bg-background">
-      <Navbar />
-      <SettingsForm user={session.user} />
-    </div>
-  )
+  await dbConnect()
+  const user = await User.findOne({ email: session.user.email }).lean() as any
+
+  if (!user) {
+    redirect("/login")
+  }
+
+  // Sanitize user object for client component
+  const initialUser = {
+    name: user.name,
+    email: user.email,
+    image: user.profileImage?.url || null,
+    twoFactorEnabled: !!user.twoFactorEnabled,
+  }
+
+  return <SettingsContent initialUser={initialUser} />
 }
diff --git a/src/app/settings/settings-content.tsx b/src/app/settings/settings-content.tsx
new file mode 100644
index 0000000..8916b9e
--- /dev/null
+++ b/src/app/settings/settings-content.tsx
@@ -0,0 +1,537 @@
+"use client"
+
+import { useState } from "react"
+import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { Shield, Loader2, Copy } from "lucide-react"
+import { toast } from "sonner"
+import Image from "next/image"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Separator } from "@/components/ui/separator"
+import Navbar from "@/components/Navbar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Camera, Lock, Save, Trash2, Upload, User } from "lucide-react"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { updateProfileSchema, updatePasswordSchema, type UpdateProfileInput } from "@/lib/validation"
+import { z } from "zod"
+
+// Re-using existing types and schemas from previous implementation
+const passwordChangeSchema = updatePasswordSchema.extend({
+  confirmPassword: z.string()
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+})
+
+type ProfileFormData = UpdateProfileInput
+type PasswordFormData = z.infer<typeof passwordChangeSchema>
+
+interface SettingsContentProps {
+  initialUser: {
+    name: string
+    email: string
+    image: string | null
+    twoFactorEnabled: boolean
+  }
+}
+
+export default function SettingsContent({ initialUser }: SettingsContentProps) {
+  const { update } = useSession()
+  const router = useRouter()
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(initialUser.twoFactorEnabled)
+  const [is2FALoading, setIs2FALoading] = useState(false)
+  const [setupData, setSetupData] = useState<{ secret: string;qrCode: string } | null>(null)
+  const [verificationCode, setVerificationCode] = useState("")
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  
+  // Existing state for other forms
+  const [isLoading, setIsLoading] = useState(false)
+  const [isImageLoading, setIsImageLoading] = useState(false)
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(initialUser.image)
+  
+  const profileForm = useForm<ProfileFormData>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: {
+      name: initialUser.name,
+      email: initialUser.email,
+    },
+  })
+
+  const passwordForm = useForm<PasswordFormData>({
+    resolver: zodResolver(passwordChangeSchema),
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+    },
+  })
+
+  // 2FA Handlers
+  const start2FASetup = async () => {
+    setIs2FALoading(true)
+    try {
+      const res = await fetch("/api/user/2fa", { method: "PUT" })
+      const data = await res.json()
+      if (data.error) throw new Error(data.error)
+      setSetupData(data)
+      setIsDialogOpen(true)
+    } catch (error) {
+      toast.error("Failed to start 2FA setup")
+    } finally {
+      setIs2FALoading(false)
+    }
+  }
+
+  const verifyAndEnable2FA = async () => {
+    if (verificationCode.length !== 6) {
+      toast.error("Please enter a 6-digit code")
+      return
+    }
+
+    setIs2FALoading(true)
+    try {
+      const res = await fetch("/api/user/2fa", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          code: verificationCode,
+          secret: setupData?.secret,
+        }),
+      })
+      const data = await res.json()
+      
+      if (data.error) throw new Error(data.error)
+      
+      setTwoFactorEnabled(true)
+      setIsDialogOpen(false)
+      toast.success("Two-factor authentication enabled")
+      router.refresh()
+    } catch (error) {
+      toast.error("Invalid verification code")
+    } finally {
+      setIs2FALoading(false)
+      setVerificationCode("")
+    }
+  }
+
+  const disable2FA = async () => {
+    if (!confirm("Are you sure you want to disable 2FA? This will make your account less secure.")) return
+
+    setIs2FALoading(true)
+    try {
+      const res = await fetch("/api/user/2fa", { method: "DELETE" })
+      const data = await res.json()
+      
+      if (data.error) throw new Error(data.error)
+      
+      setTwoFactorEnabled(false)
+      toast.success("Two-factor authentication disabled")
+      router.refresh()
+    } catch (error) {
+      toast.error("Failed to disable 2FA")
+    } finally {
+      setIs2FALoading(false)
+    }
+  }
+
+  const copyToClipboard = () => {
+    if (setupData?.secret) {
+      navigator.clipboard.writeText(setupData.secret)
+      toast.success("Secret copied to clipboard")
+    }
+  }
+
+  // Existing Handlers (Profile, Password, Image)
+  const onProfileSubmit = async (data: ProfileFormData) => {
+    setIsLoading(true)
+    try {
+      const response = await fetch("/api/user/profile", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      })
+      const result = await response.json()
+      if (!response.ok) {
+        toast.error(result.error || "Failed to update profile")
+        return
+      }
+      await update({ name: data.name, email: data.email })
+      toast.success("Profile updated successfully!")
+    } catch {
+      toast.error("An unexpected error occurred")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const onPasswordSubmit = async (data: PasswordFormData) => {
+    setIsLoading(true)
+    try {
+      const response = await fetch("/api/user/password", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          currentPassword: data.currentPassword,
+          newPassword: data.newPassword,
+        }),
+      })
+      const result = await response.json()
+      if (!response.ok) {
+        toast.error(result.error || "Failed to update password")
+        return
+      }
+      toast.success("Password updated successfully!")
+      passwordForm.reset()
+    } catch {
+      toast.error("An unexpected error occurred")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0]
+      if (!file) return
+      setIsImageLoading(true)
+      try {
+        const formData = new FormData()
+        formData.append('image', file)
+        const response = await fetch('/api/user/profile-image', {
+          method: 'POST',
+          body: formData,
+        })
+        const result = await response.json()
+        if (!response.ok) {
+          toast.error(result.error || 'Failed to upload image')
+          return
+        }
+        setProfileImageUrl(result.profileImage.url)
+        toast.success('Profile image uploaded successfully!')
+        await update({ image: result.profileImage.url })
+      } catch {
+        toast.error('An unexpected error occurred')
+      } finally {
+        setIsImageLoading(false)
+      }
+    }
+  
+    const handleImageDelete = async () => {
+      setIsImageLoading(true)
+      try {
+        const response = await fetch('/api/user/profile-image', { method: 'DELETE' })
+        const result = await response.json()
+        if (!response.ok) {
+          toast.error(result.error || 'Failed to delete image')
+          return
+        }
+        setProfileImageUrl(null)
+        toast.success('Profile image deleted successfully!')
+        await update({ image: null })
+      } catch {
+        toast.error('An unexpected error occurred')
+      } finally {
+        setIsImageLoading(false)
+      }
+    }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar />
+      
+      <div className="container mx-auto px-4 py-8 max-w-2xl">
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold">Account Settings</h1>
+            <p className="text-muted-foreground">
+              Manage your account information and security settings
+            </p>
+          </div>
+
+          {/* Profile Information */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <User className="mr-2 h-5 w-5" />
+                Profile Information
+              </CardTitle>
+              <CardDescription>Update your personal information</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form {...profileForm}>
+                <form onSubmit={profileForm.handleSubmit(onProfileSubmit)} className="space-y-4">
+                  <FormField
+                    control={profileForm.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Full Name</FormLabel>
+                        <FormControl>
+                          <Input placeholder="John Doe" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={profileForm.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email Address</FormLabel>
+                        <FormControl>
+                          <Input type="email" placeholder="john@example.com" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button type="submit" disabled={isLoading}>
+                    {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    <Save className="mr-2 h-4 w-4" />
+                    Save Changes
+                  </Button>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          {/* Profile Image */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Camera className="mr-2 h-5 w-5" />
+                Profile Image
+              </CardTitle>
+              <CardDescription>Upload or update your profile picture</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center space-x-6">
+                <Avatar className="h-24 w-24">
+                  <AvatarImage src={profileImageUrl || undefined} alt="Profile" />
+                  <AvatarFallback className="text-lg">
+                    {initialUser.name.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                
+                <div className="flex-1 space-y-3">
+                  <div className="flex items-center space-x-3">
+                    <div className="relative">
+                        <Button
+                        disabled={isImageLoading}
+                        variant="outline"
+                        className="relative"
+                        >
+                        {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        <Upload className="mr-2 h-4 w-4" />
+                        {profileImageUrl ? 'Change Image' : 'Upload Image'}
+                        <input
+                            type="file"
+                            accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
+                            onChange={handleImageUpload}
+                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                        />
+                        </Button>
+                    </div>
+                    
+                    {profileImageUrl && (
+                      <Button
+                        onClick={handleImageDelete}
+                        disabled={isImageLoading}
+                        variant="outline"
+                        className="text-destructive hover:text-destructive"
+                      >
+                        {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Remove
+                      </Button>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    Supported formats: JPEG, PNG, WebP, GIF. Maximum size: 10MB.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          {/* Two-Factor Authentication */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Shield className="mr-2 h-5 w-5" />
+                Two-Factor Authentication
+              </CardTitle>
+              <CardDescription>
+                Add an extra layer of security to your account
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <p className="font-medium">Status: {twoFactorEnabled ? "Enabled" : "Disabled"}</p>
+                  <p className="text-sm text-muted-foreground">
+                    {twoFactorEnabled 
+                      ? "Your account is secured with 2FA." 
+                      : "Protect your account by enabling 2FA."}
+                  </p>
+                </div>
+                {twoFactorEnabled ? (
+                  <Button 
+                    variant="destructive" 
+                    onClick={disable2FA} 
+                    disabled={is2FALoading}
+                  >
+                    {is2FALoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    Disable 2FA
+                  </Button>
+                ) : (
+                  <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+                    <DialogTrigger asChild>
+                      <Button onClick={start2FASetup} disabled={is2FALoading}>
+                        {is2FALoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        Enable 2FA
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-md">
+                      <DialogHeader>
+                        <DialogTitle>Set up Two-Factor Authentication</DialogTitle>
+                        <DialogDescription>
+                          Scan the QR code with your authenticator app (like Google Authenticator or Authy).
+                        </DialogDescription>
+                      </DialogHeader>
+                      
+                      {setupData && (
+                        <div className="flex flex-col items-center space-y-4 py-4">
+                          <div className="relative w-48 h-48">
+                            <Image 
+                              src={setupData.qrCode} 
+                              alt="2FA QR Code" 
+                              fill
+                              style={{ objectFit: "contain" }}
+                            />
+                          </div>
+                          
+                          <div className="flex items-center space-x-2">
+                            <code className="bg-muted px-2 py-1 rounded text-sm">
+                              {setupData.secret}
+                            </code>
+                            <Button size="icon" variant="ghost" onClick={copyToClipboard}>
+                              <Copy className="h-4 w-4" />
+                            </Button>
+                          </div>
+
+                          <div className="w-full space-y-2">
+                            <Label htmlFor="code">Verification Code</Label>
+                            <Input
+                              id="code"
+                              placeholder="Enter 6-digit code"
+                              value={verificationCode}
+                              onChange={(e) => setVerificationCode(e.target.value.slice(0, 6))}
+                              maxLength={6}
+                            />
+                          </div>
+
+                          <Button 
+                            className="w-full" 
+                            onClick={verifyAndEnable2FA}
+                            disabled={verificationCode.length !== 6 || is2FALoading}
+                          >
+                            {is2FALoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            Verify & Enable
+                          </Button>
+                        </div>
+                      )}
+                    </DialogContent>
+                  </Dialog>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          {/* Password Change */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Lock className="mr-2 h-5 w-5" />
+                Change Password
+              </CardTitle>
+              <CardDescription>
+                Update your password to keep your account secure
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form {...passwordForm}>
+                <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4">
+                  <FormField
+                    control={passwordForm.control}
+                    name="currentPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Current Password</FormLabel>
+                        <FormControl>
+                          <Input type="password" placeholder="Enter current password" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={passwordForm.control}
+                    name="newPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>New Password</FormLabel>
+                        <FormControl>
+                          <Input type="password" placeholder="Enter new password" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={passwordForm.control}
+                    name="confirmPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Confirm New Password</FormLabel>
+                        <FormControl>
+                          <Input type="password" placeholder="Confirm new password" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button type="submit" disabled={isLoading}>
+                    {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    <Save className="mr-2 h-4 w-4" />
+                    Update Password
+                  </Button>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..a6f1cfb
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 0ed9d12..ad47d5f 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,6 +1,7 @@
 import { type NextAuthOptions } from "next-auth"
 import CredentialsProvider from "next-auth/providers/credentials"
 import bcrypt from "bcryptjs"
+import { authenticator } from "otplib"
 import dbConnect from "./mongodb"
 import User from "@/model/User"
 import { loginSchema } from "./validation"
@@ -11,7 +12,8 @@ export const authOptions: NextAuthOptions = {
       name: "credentials",
       credentials: {
         email: { label: "Email", type: "email" },
-        password: { label: "Password", type: "password" }
+        password: { label: "Password", type: "password" },
+        twoFactorCode: { label: "2FA Code", type: "text" }
       },
       async authorize(credentials) {
         if (!credentials?.email || !credentials?.password) return null
@@ -19,7 +21,7 @@ export const authOptions: NextAuthOptions = {
         const result = loginSchema.safeParse(credentials)
         if (!result.success) return null
 
-        const { email, password } = result.data
+        const { email, password, twoFactorCode } = result.data
 
         try {
             await dbConnect()
@@ -30,6 +32,17 @@ export const authOptions: NextAuthOptions = {
             const isPasswordValid = await bcrypt.compare(password, user.password)
             if (!isPasswordValid) return null
 
+            if (user.twoFactorEnabled) {
+              if (!twoFactorCode) {
+                throw new Error("2FA_REQUIRED")
+              }
+
+              const isValid = authenticator.check(twoFactorCode, user.twoFactorSecret)
+              if (!isValid) {
+                throw new Error("Invalid 2FA Code")
+              }
+            }
+
             return {
                 id: user._id.toString(),
                 email: user.email,
@@ -38,6 +51,10 @@ export const authOptions: NextAuthOptions = {
             }
         } catch (error) {
             console.error("Auth error:", error)
+            // Rethrow specific 2FA errors so they reach the client
+            if (error instanceof Error && (error.message === "2FA_REQUIRED" || error.message === "Invalid 2FA Code")) {
+              throw error
+            }
             return null
         }
       }
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index ab9416e..bc5a440 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -30,7 +30,11 @@ export const loginSchema = z.object({
     .max(254, 'Email must be at most 254 characters'),
   password: z
     .string()
-    .max(128, 'Password must be at most 128 characters')
+    .max(128, 'Password must be at most 128 characters'),
+  twoFactorCode: z
+    .string()
+    .length(6, 'Code must be 6 digits')
+    .optional()
 })
 
 // Profile update schema (reusing name and email from registerSchema)
diff --git a/src/model/User.ts b/src/model/User.ts
index e1784f2..c5c81de 100644
--- a/src/model/User.ts
+++ b/src/model/User.ts
@@ -8,7 +8,9 @@ const UserSchema = new Schema({
     url: { type: String },
     key: { type: String },
     uploadedAt: { type: Date } 
-  }
+  },
+  twoFactorEnabled: { type: Boolean, default: false },
+  twoFactorSecret: { type: String }
 }, {
   timestamps: true
 });
@@ -16,6 +18,7 @@ const UserSchema = new Schema({
 UserSchema.set('toJSON', {
   transform: (_doc: Document, ret: Record<string, unknown>) => {
     delete ret.password;
+    delete ret.twoFactorSecret;
     delete ret.__v;
     return ret;
   }