diff options
Diffstat (limited to 'src/app')
| -rw-r--r-- | src/app/api/user/2fa/route.ts | 97 | ||||
| -rw-r--r-- | src/app/login/page.tsx | 176 | ||||
| -rw-r--r-- | src/app/settings/page.tsx | 32 | ||||
| -rw-r--r-- | src/app/settings/settings-content.tsx | 537 |
4 files changed, 769 insertions, 73 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'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'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> + ) +} |