"use client"; import { CheckCircle2, Copy, Download, Eye, EyeOff, Loader2, QrCode, RefreshCw, Shield, ShieldCheck, ShieldOff, } from "lucide-react"; import Image from "next/image"; import { useCallback, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { Switch } from "@/components/ui/switch"; import { cn } from "@/lib/utils"; export interface AuthTwoFactorSetupProps { isEnabled?: boolean; qrCodeUrl?: string; secretKey?: string; backupCodes?: string[]; onEnable?: () => void; onDisable?: (password: string) => void; onGenerateBackupCodes?: () => void; onRegenerateSecret?: () => void; className?: string; isLoading?: boolean; errors?: { password?: string; general?: string; }; } export default function AuthTwoFactorSetup({ isEnabled = false, qrCodeUrl, secretKey, backupCodes = [], onEnable, onDisable, onGenerateBackupCodes, onRegenerateSecret, className, isLoading = false, errors, }: AuthTwoFactorSetupProps) { const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [showBackupCodes, setShowBackupCodes] = useState(false); const [copiedIndex, setCopiedIndex] = useState(null); const handleCopyCode = useCallback(async (code: string, index: number) => { try { await navigator.clipboard.writeText(code); setCopiedIndex(index); setTimeout(() => setCopiedIndex(null), 2000); } catch {} }, []); const handleCopySecret = useCallback(async () => { if (secretKey) { try { await navigator.clipboard.writeText(secretKey); } catch {} } }, [secretKey]); const handleDisable = useCallback(() => { if (!password.trim()) return; onDisable?.(password); setPassword(""); }, [password, onDisable]); const handleDownloadBackupCodes = useCallback(() => { if (backupCodes.length === 0) return; const content = backupCodes.join("\n"); const blob = new Blob([content], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "backup-codes.txt"; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }, [backupCodes]); if (isEnabled) { return (

Two-factor authentication Your account is protected with 2FA

Enabled

{errors?.general && (

{errors.general}

)}

2FA is active

Your account is protected with two-factor authentication. You'll need to enter a code from your authenticator app when signing in.

{backupCodes.length > 0 && (

Backup codes

Save these codes in a safe place. You can use them to access your account if you lose your device.

{showBackupCodes && (

{backupCodes.map((code, index) => (

{code}

))}

)}

{onGenerateBackupCodes && ( )}

)}

Disable two-factor authentication

You'll need to enter your password to disable 2FA.

Password * setPassword(e.target.value)} placeholder="Enter your password" required type={showPassword ? "text" : "password"} value={password} /> { e.preventDefault(); setShowPassword((prev) => !prev); }} type="button" > {showPassword ? ( ) : ( )} {errors?.password && ( {errors.password} )}

); } return ( Set up two-factor authentication Add an extra layer of security to your account

{errors?.general && (

{errors.general}

)}

Scan the QR code with your authenticator app (like Google Authenticator, Authy, or 1Password) to set up two-factor authentication.

{qrCodeUrl && (

Scan this QR code with your authenticator app

)} {secretKey && ( Manual entry key If you can't scan the QR code, enter this key manually in your authenticator app )} {onRegenerateSecret && ( )}

After enabling, you'll need to verify with a code from your authenticator app

); }

Example Usage