feat(totp): frontend

app/client/modules/auth/routes/login.tsx

@@ -8,6 +8,8 @@ import { AuthLayout } from "~/client/components/auth-layout";
 import { Button } from "~/client/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
 import { Input } from "~/client/components/ui/input";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "~/client/components/ui/input-otp";
+import { Label } from "~/client/components/ui/label";
 import { authMiddleware } from "~/middleware/auth";
 import type { Route } from "./+types/login";
 import { ResetPasswordDialog } from "../components/reset-password-dialog";
@@ -36,6 +38,10 @@ export default function LoginPage() {
 	const navigate = useNavigate();
 	const [showResetDialog, setShowResetDialog] = useState(false);
 	const [isLoggingIn, setIsLoggingIn] = useState(false);
+	const [requires2FA, setRequires2FA] = useState(false);
+	const [totpCode, setTotpCode] = useState("");
+	const [isVerifying2FA, setIsVerifying2FA] = useState(false);
+	const [trustDevice, setTrustDevice] = useState(false);
 
 	const form = useForm<LoginFormValues>({
 		resolver: arktypeResolver(loginSchema),
@@ -65,6 +71,11 @@ export default function LoginPage() {
 			return;
 		}
 
+		if ("twoFactorRedirect" in data && data.twoFactorRedirect) {
+			setRequires2FA(true);
+			return;
+		}
+
 		const d = await authClient.getSession();
 		if (data.user && !d.data?.user.hasDownloadedResticPassword) {
 			void navigate("/download-recovery-key");
@@ -73,6 +84,113 @@ export default function LoginPage() {
 		}
 	};
 
+	const handleVerify2FA = async () => {
+		if (totpCode.length !== 6) {
+			toast.error("Please enter a 6-digit code");
+			return;
+		}
+
+		setIsVerifying2FA(true);
+
+		const { data, error } = await authClient.twoFactor.verifyTotp({
+			code: totpCode,
+			trustDevice,
+		});
+
+		setIsVerifying2FA(false);
+
+		if (error) {
+			console.error(error);
+			toast.error("Verification failed", { description: error.message });
+			setTotpCode("");
+			return;
+		}
+
+		if (data) {
+			toast.success("Login successful");
+			const session = await authClient.getSession();
+			if (session.data?.user && !session.data.user.hasDownloadedResticPassword) {
+				void navigate("/download-recovery-key");
+			} else {
+				void navigate("/volumes");
+			}
+		}
+	};
+
+	const handleBackToLogin = () => {
+		setRequires2FA(false);
+		setTotpCode("");
+		setTrustDevice(false);
+		form.reset();
+	};
+
+	if (requires2FA) {
+		return (
+			<AuthLayout title="Two-Factor Authentication" description="Enter the 6-digit code from your authenticator app">
+				<div className="space-y-6">
+					<div className="space-y-4 flex flex-col items-center">
+						<Label htmlFor="totp-code text-center">Authentication code</Label>
+						<div>
+							<InputOTP
+								maxLength={6}
+								value={totpCode}
+								onChange={setTotpCode}
+								onComplete={handleVerify2FA}
+								disabled={isVerifying2FA}
+							>
+								<InputOTPGroup>
+									<InputOTPSlot index={0} />
+									<InputOTPSlot index={1} />
+									<InputOTPSlot index={2} />
+								</InputOTPGroup>
+								<InputOTPSeparator />
+								<InputOTPGroup>
+									<InputOTPSlot index={3} />
+									<InputOTPSlot index={4} />
+									<InputOTPSlot index={5} />
+								</InputOTPGroup>
+							</InputOTP>
+						</div>
+					</div>
+
+					<div className="flex items-center space-x-2">
+						<input
+							type="checkbox"
+							id="trust-device"
+							checked={trustDevice}
+							onChange={(e) => setTrustDevice(e.target.checked)}
+							className="h-4 w-4"
+						/>
+						<label htmlFor="trust-device" className="text-sm text-muted-foreground cursor-pointer">
+							Trust this device for 30 days
+						</label>
+					</div>
+
+					<div className="space-y-2">
+						<Button
+							type="button"
+							className="w-full"
+							loading={isVerifying2FA}
+							onClick={handleVerify2FA}
+							disabled={totpCode.length !== 6}
+						>
+							Verify
+						</Button>
+						<Button
+							type="button"
+							variant="outline"
+							className="w-full"
+							onClick={handleBackToLogin}
+							disabled={isVerifying2FA}
+						>
+							Back to Login
+						</Button>
+					</div>
+				</div>
+			</AuthLayout>
+		);
+	}
+
 	return (
 		<AuthLayout title="Login to your account" description="Enter your credentials below to login to your account">
 			<Form {...form}>

app/client/modules/settings/routes/settings.tsx

@@ -1,8 +1,9 @@
 import { useMutation } from "@tanstack/react-query";
-import { Download, KeyRound, User, X } from "lucide-react";
+import { Download, KeyRound, User, X, Shield, Copy, RefreshCw } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
+import { QRCodeCanvas } from "qrcode.react";
 import { Button } from "~/client/components/ui/button";
 import { Card, CardContent, CardDescription, CardTitle } from "~/client/components/ui/card";
 import {
@@ -15,6 +16,7 @@ import {
 	DialogTrigger,
 } from "~/client/components/ui/dialog";
 import { Input } from "~/client/components/ui/input";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "~/client/components/ui/input-otp";
 import { Label } from "~/client/components/ui/label";
 import { appContext } from "~/context";
 import type { Route } from "./+types/settings";
@@ -47,6 +49,23 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 	const [downloadDialogOpen, setDownloadDialogOpen] = useState(false);
 	const [downloadPassword, setDownloadPassword] = useState("");
 	const [isChangingPassword, setIsChangingPassword] = useState(false);
+
+	// 2FA states
+	const [setup2FADialogOpen, setSetup2FADialogOpen] = useState(false);
+	const [disable2FADialogOpen, setDisable2FADialogOpen] = useState(false);
+	const [backupCodesDialogOpen, setBackupCodesDialogOpen] = useState(false);
+	const [setup2FAPassword, setSetup2FAPassword] = useState("");
+	const [disable2FAPassword, setDisable2FAPassword] = useState("");
+	const [totpUri, setTotpUri] = useState<string | null>(null);
+	const [verificationCode, setVerificationCode] = useState("");
+	const [backupCodes, setBackupCodes] = useState<string[]>([]);
+	const [setupStep, setSetupStep] = useState<"password" | "qr" | "verify">("password");
+	const [isEnabling2FA, setIsEnabling2FA] = useState(false);
+	const [isVerifying2FA, setIsVerifying2FA] = useState(false);
+	const [isDisabling2FA, setIsDisabling2FA] = useState(false);
+	const [isGeneratingBackupCodes, setIsGeneratingBackupCodes] = useState(false);
+	const [backupCodesPassword, setBackupCodesPassword] = useState("");
+
 	const navigate = useNavigate();
 
 	const handleLogout = async () => {
@@ -137,6 +156,151 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 		});
 	};
 
+	// 2FA handlers
+	const handleEnable2FA = async (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!setup2FAPassword) {
+			toast.error("Password is required");
+			return;
+		}
+
+		setIsEnabling2FA(true);
+
+		const { data, error } = await authClient.twoFactor.enable({
+			password: setup2FAPassword,
+			issuer: "Zerobyte",
+		});
+
+		setIsEnabling2FA(false);
+
+		if (error) {
+			console.error(error);
+			toast.error("Failed to enable 2FA", { description: error.message });
+			return;
+		}
+
+		if (data?.totpURI && data?.backupCodes) {
+			setTotpUri(data.totpURI);
+			setBackupCodes(data.backupCodes);
+			setSetupStep("qr");
+		}
+	};
+
+	const handleVerify2FA = async () => {
+		if (verificationCode.length !== 6) {
+			toast.error("Please enter a 6-digit code");
+			return;
+		}
+
+		setIsVerifying2FA(true);
+
+		const { data, error } = await authClient.twoFactor.verifyTotp({
+			code: verificationCode,
+		});
+
+		setIsVerifying2FA(false);
+
+		if (error) {
+			console.error(error);
+			toast.error("Verification failed", { description: error.message });
+			setVerificationCode("");
+			return;
+		}
+
+		if (data) {
+			toast.success("Two-factor authentication enabled successfully");
+			// Refresh the session to get updated user data
+			await authClient.getSession();
+			// Reset and close dialog
+			handleClose2FASetup();
+			// Reload the page to update the UI
+			window.location.reload();
+		}
+	};
+
+	const handleDisable2FA = async (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!disable2FAPassword) {
+			toast.error("Password is required");
+			return;
+		}
+
+		setIsDisabling2FA(true);
+
+		const { data, error } = await authClient.twoFactor.disable({
+			password: disable2FAPassword,
+		});
+
+		setIsDisabling2FA(false);
+
+		if (error) {
+			console.error(error);
+			toast.error("Failed to disable 2FA", { description: error.message });
+			return;
+		}
+
+		if (data) {
+			toast.success("Two-factor authentication disabled successfully");
+			setDisable2FADialogOpen(false);
+			setDisable2FAPassword("");
+			// Refresh the session to get updated user data
+			await authClient.getSession();
+			// Reload the page to update the UI
+			window.location.reload();
+		}
+	};
+
+	const handleGenerateBackupCodes = async (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!backupCodesPassword) {
+			toast.error("Password is required");
+			return;
+		}
+
+		setIsGeneratingBackupCodes(true);
+
+		const { data, error } = await authClient.twoFactor.generateBackupCodes({
+			password: backupCodesPassword,
+		});
+
+		setIsGeneratingBackupCodes(false);
+
+		if (error) {
+			console.error(error);
+			toast.error("Failed to generate backup codes", { description: error.message });
+			return;
+		}
+
+		if (data?.backupCodes) {
+			setBackupCodes(data.backupCodes);
+			setBackupCodesPassword("");
+			toast.success("New backup codes generated successfully");
+		}
+	};
+
+	const handleClose2FASetup = () => {
+		setSetup2FADialogOpen(false);
+		setSetup2FAPassword("");
+		setTotpUri(null);
+		setVerificationCode("");
+		setBackupCodes([]);
+		setSetupStep("password");
+	};
+
+	const copyToClipboard = (text: string) => {
+		navigator.clipboard.writeText(text);
+		toast.success("Copied to clipboard");
+	};
+
+	const copyAllBackupCodes = () => {
+		const text = backupCodes.join("\n");
+		navigator.clipboard.writeText(text);
+		toast.success("All backup codes copied to clipboard");
+	};
+
 	return (
 		<Card className="p-0 gap-0">
 			<div className="border-b border-border/50 bg-card-header p-6">
@@ -268,6 +432,309 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 					</DialogContent>
 				</Dialog>
 			</CardContent>
+
+			<div className="border-t border-border/50 bg-card-header p-6">
+				<CardTitle className="flex items-center gap-2">
+					<Shield className="size-5" />
+					Two-Factor Authentication
+				</CardTitle>
+				<CardDescription className="mt-1.5">Add an extra layer of security to your account</CardDescription>
+			</div>
+			<CardContent className="p-6 space-y-4">
+				<div className="flex items-center justify-between">
+					<div className="space-y-1">
+						<p className="text-sm font-medium">
+							Status:&nbsp;
+							{loaderData.user?.twoFactorEnabled ? (
+								<span className="text-green-600 dark:text-green-400">Enabled</span>
+							) : (
+								<span className="text-muted-foreground">Disabled</span>
+							)}
+						</p>
+						<p className="text-xs text-muted-foreground max-w-xl">
+							Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app
+							in addition to your password.
+						</p>
+					</div>
+					<div className="flex gap-2">
+						{!loaderData.user?.twoFactorEnabled ? (
+							<Button onClick={() => setSetup2FADialogOpen(true)}>Enable 2FA</Button>
+						) : (
+							<>
+								<Button variant="outline" onClick={() => setBackupCodesDialogOpen(true)}>
+									Backup Codes
+								</Button>
+								<Button variant="destructive" onClick={() => setDisable2FADialogOpen(true)}>
+									Disable 2FA
+								</Button>
+							</>
+						)}
+					</div>
+				</div>
+
+				<Dialog open={setup2FADialogOpen} onOpenChange={handleClose2FASetup}>
+					<DialogContent className="max-w-md">
+						{setupStep === "password" && (
+							<form onSubmit={handleEnable2FA}>
+								<DialogHeader>
+									<DialogTitle>Enable Two-Factor Authentication</DialogTitle>
+									<DialogDescription>
+										Enter your password to generate a QR code for your authenticator app
+									</DialogDescription>
+								</DialogHeader>
+								<div className="space-y-4 py-4">
+									<div className="space-y-2">
+										<Label htmlFor="setup-password">Your Password</Label>
+										<Input
+											id="setup-password"
+											type="password"
+											value={setup2FAPassword}
+											onChange={(e) => setSetup2FAPassword(e.target.value)}
+											placeholder="Enter your password"
+											required
+											autoFocus
+										/>
+									</div>
+								</div>
+								<DialogFooter>
+									<Button type="button" variant="outline" onClick={handleClose2FASetup}>
+										Cancel
+									</Button>
+									<Button type="submit" loading={isEnabling2FA}>
+										Continue
+									</Button>
+								</DialogFooter>
+							</form>
+						)}
+
+						{setupStep === "qr" && totpUri && (
+							<>
+								<DialogHeader>
+									<DialogTitle>Scan QR Code</DialogTitle>
+									<DialogDescription>
+										Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)
+									</DialogDescription>
+								</DialogHeader>
+								<div className="space-y-4 py-4">
+									<div className="flex justify-center p-4 bg-white rounded-lg">
+										<QRCodeCanvas value={totpUri} size={200} />
+									</div>
+									<div className="space-y-2">
+										<Label className="text-xs">Manual Entry Code</Label>
+										<div className="flex items-center gap-2">
+											<Input
+												value={totpUri.split("secret=")[1]?.split("&")[0] || ""}
+												readOnly
+												className="text-xs font-mono"
+											/>
+											<Button
+												type="button"
+												variant="outline"
+												size="sm"
+												onClick={() => copyToClipboard(totpUri.split("secret=")[1]?.split("&")[0] || "")}
+											>
+												<Copy className="h-4 w-4" />
+											</Button>
+										</div>
+									</div>
+									{backupCodes.length > 0 && (
+										<div className="space-y-2">
+											<Label className="text-xs">Backup Codes (Save these securely)</Label>
+											<div className="p-3 bg-muted rounded-md space-y-1 max-h-32 overflow-y-auto">
+												{backupCodes.map((code) => (
+													<div key={code} className="text-xs font-mono flex items-center justify-between">
+														<span>{code}</span>
+														<Button
+															type="button"
+															variant="ghost"
+															size="sm"
+															onClick={() => copyToClipboard(code)}
+															className="h-6 w-6 p-0"
+														>
+															<Copy className="h-3 w-3" />
+														</Button>
+													</div>
+												))}
+											</div>
+											<Button type="button" variant="outline" size="sm" onClick={copyAllBackupCodes} className="w-full">
+												<Copy className="h-4 w-4 mr-2" />
+												Copy All Codes
+											</Button>
+										</div>
+									)}
+								</div>
+								<DialogFooter>
+									<Button type="button" onClick={() => setSetupStep("verify")}>
+										I've Scanned It
+									</Button>
+								</DialogFooter>
+							</>
+						)}
+
+						{setupStep === "verify" && (
+							<>
+								<DialogHeader>
+									<DialogTitle>Verify Setup</DialogTitle>
+									<DialogDescription>
+										Enter the 6-digit code from your authenticator app to complete setup
+									</DialogDescription>
+								</DialogHeader>
+								<div className="space-y-4 py-4">
+									<div className="space-y-2">
+										<Label>Verification Code</Label>
+										<div className="flex justify-center">
+											<InputOTP
+												maxLength={6}
+												value={verificationCode}
+												onChange={setVerificationCode}
+												onComplete={handleVerify2FA}
+												disabled={isVerifying2FA}
+											>
+												<InputOTPGroup>
+													<InputOTPSlot index={0} />
+													<InputOTPSlot index={1} />
+													<InputOTPSlot index={2} />
+												</InputOTPGroup>
+												<InputOTPSeparator />
+												<InputOTPGroup>
+													<InputOTPSlot index={3} />
+													<InputOTPSlot index={4} />
+													<InputOTPSlot index={5} />
+												</InputOTPGroup>
+											</InputOTP>
+										</div>
+									</div>
+								</div>
+								<DialogFooter>
+									<Button type="button" variant="outline" onClick={() => setSetupStep("qr")}>
+										Back
+									</Button>
+									<Button
+										type="button"
+										onClick={handleVerify2FA}
+										loading={isVerifying2FA}
+										disabled={verificationCode.length !== 6}
+									>
+										Verify & enable
+									</Button>
+								</DialogFooter>
+							</>
+						)}
+					</DialogContent>
+				</Dialog>
+
+				<Dialog open={disable2FADialogOpen} onOpenChange={setDisable2FADialogOpen}>
+					<DialogContent>
+						<form onSubmit={handleDisable2FA}>
+							<DialogHeader>
+								<DialogTitle>Disable Two-Factor Authentication</DialogTitle>
+								<DialogDescription>
+									Are you sure you want to disable 2FA? Your account will be less secure. Enter your password to
+									confirm.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="space-y-4 py-4">
+								<div className="space-y-2">
+									<Label htmlFor="disable-password">Your Password</Label>
+									<Input
+										id="disable-password"
+										type="password"
+										value={disable2FAPassword}
+										onChange={(e) => setDisable2FAPassword(e.target.value)}
+										placeholder="Enter your password"
+										required
+										autoFocus
+									/>
+								</div>
+							</div>
+							<DialogFooter>
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => {
+										setDisable2FADialogOpen(false);
+										setDisable2FAPassword("");
+									}}
+								>
+									Cancel
+								</Button>
+								<Button type="submit" variant="destructive" loading={isDisabling2FA}>
+									Disable 2FA
+								</Button>
+							</DialogFooter>
+						</form>
+					</DialogContent>
+				</Dialog>
+
+				<Dialog open={backupCodesDialogOpen} onOpenChange={setBackupCodesDialogOpen}>
+					<DialogContent>
+						<DialogHeader>
+							<DialogTitle>Backup Codes</DialogTitle>
+							<DialogDescription>
+								Use these codes to access your account if you lose access to your authenticator app. Each code can only
+								be used once.
+							</DialogDescription>
+						</DialogHeader>
+						<div className="space-y-4 py-4">
+							{backupCodes.length > 0 ? (
+								<>
+									<div className="p-3 bg-muted rounded-md space-y-1 max-h-48 overflow-y-auto">
+										{backupCodes.map((code) => (
+											<div key={code} className="text-sm font-mono flex items-center justify-between">
+												<span>{code}</span>
+												<Button
+													type="button"
+													variant="ghost"
+													size="sm"
+													onClick={() => copyToClipboard(code)}
+													className="h-8 w-8 p-0"
+												>
+													<Copy className="h-4 w-4" />
+												</Button>
+											</div>
+										))}
+									</div>
+									<Button type="button" variant="outline" onClick={copyAllBackupCodes} className="w-full">
+										<Copy className="h-4 w-4 mr-2" />
+										Copy All Codes
+									</Button>
+								</>
+							) : (
+								<form onSubmit={handleGenerateBackupCodes} className="space-y-4">
+									<div className="space-y-2">
+										<Label htmlFor="backup-codes-password">Your Password</Label>
+										<Input
+											id="backup-codes-password"
+											type="password"
+											value={backupCodesPassword}
+											onChange={(e) => setBackupCodesPassword(e.target.value)}
+											placeholder="Enter your password"
+											required
+											autoFocus
+										/>
+									</div>
+									<Button type="submit" loading={isGeneratingBackupCodes} className="w-full">
+										<RefreshCw className="h-4 w-4 mr-2" />
+										Generate New Backup Codes
+									</Button>
+								</form>
+							)}
+						</div>
+						<DialogFooter>
+							<Button
+								type="button"
+								onClick={() => {
+									setBackupCodesDialogOpen(false);
+									setBackupCodes([]);
+									setBackupCodesPassword("");
+								}}
+							>
+								Close
+							</Button>
+						</DialogFooter>
+					</DialogContent>
+				</Dialog>
+			</CardContent>
 		</Card>
 	);
 }

app/context.ts

@@ -5,6 +5,7 @@ type User = {
 	email: string;
 	username: string;
 	hasDownloadedResticPassword: boolean;
+	twoFactorEnabled?: boolean | null;
 };
 
 type AppContext = {

app/server/db/schema.ts

@@ -114,12 +114,12 @@ export const verification = sqliteTable(
 		id: text("id").primaryKey(),
 		identifier: text("identifier").notNull(),
 		value: text("value").notNull(),
-		expiresAt: integer("expires_at", { mode: "number" }).notNull(),
+		expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
-		createdAt: integer("created_at", { mode: "number" })
+		createdAt: integer("created_at", { mode: "timestamp_ms" })
 			.notNull()
 			.default(sql`(unixepoch() * 1000)`),
-		updatedAt: integer("updated_at", { mode: "number" })
+		updatedAt: integer("updated_at", { mode: "timestamp_ms" })
-			.$onUpdate(() => Date.now())
+			.$onUpdate(() => new Date())
 			.notNull()
 			.default(sql`(unixepoch() * 1000)`),
 	},