"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 { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Separator } from "@/registry/new-york/ui/separator"; import { Switch } from "@/registry/new-york/ui/switch"; interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface EnabledStateHeaderProps { className?: string; } function EnabledStateHeader({ className }: EnabledStateHeaderProps) { return (

Your account is protected with 2FA

Enabled

); } function ActiveStatusCard() { return (

); } interface BackupCodeItemProps { code: string; index: number; copiedIndex: number | null; onCopy: (code: string, index: number) => void; } function BackupCodeItem({ code, index, copiedIndex, onCopy, }: BackupCodeItemProps) { return (

{code}

); } interface BackupCodesListProps { codes: string[]; copiedIndex: number | null; onCopy: (code: string, index: number) => void; } function BackupCodesList({ codes, copiedIndex, onCopy }: BackupCodesListProps) { return (

{codes.map((code, index) => ( ))}

); } interface BackupCodesActionsProps { onDownload: () => void; onRegenerate?: () => void; } function BackupCodesActions({ onDownload, onRegenerate, }: BackupCodesActionsProps) { return (

{onRegenerate && ( )}

); } interface BackupCodesSectionProps { codes: string[]; showCodes: boolean; onToggleShow: () => void; copiedIndex: number | null; onCopy: (code: string, index: number) => void; onDownload: () => void; onRegenerate?: () => void; } function BackupCodesSection({ codes, showCodes, onToggleShow, copiedIndex, onCopy, onDownload, onRegenerate, }: BackupCodesSectionProps) { return (

Backup codes

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

{showCodes && ( )}

); } interface PasswordFieldProps { value: string; onChange: (value: string) => void; showPassword: boolean; onToggleShow: () => void; error?: string; } function PasswordField({ value, onChange, showPassword, onToggleShow, error, }: PasswordFieldProps) { return ( Password * onChange(e.target.value)} placeholder="Enter your password…" required type={showPassword ? "text" : "password"} value={value} /> { e.preventDefault(); onToggleShow(); }} type="button" > {showPassword ? ( {error && ( {error} )} ); } interface DisableButtonProps { isLoading: boolean; disabled: boolean; onClick: () => void; } function DisableButton({ isLoading, disabled, onClick }: DisableButtonProps) { return ( ); } interface DisableSectionProps { password: string; onPasswordChange: (value: string) => void; showPassword: boolean; onToggleShowPassword: () => void; error?: string; isLoading: boolean; onDisable: () => void; } function DisableSection({ password, onPasswordChange, showPassword, onToggleShowPassword, error, isLoading, onDisable, }: DisableSectionProps) { return (

Disable two-factor authentication

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

); } function SetupHeader() { return ( <> Set up two-factor authentication Add an extra layer of security to your account ); } function SetupInstructions() { return (

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

); } interface QRCodeDisplayProps { qrCodeUrl: string; } function QRCodeDisplay({ qrCodeUrl }: QRCodeDisplayProps) { return (

Scan this QR code with your authenticator app

); } interface SecretKeyFieldProps { secretKey: string; onCopy: () => void; } function SecretKeyField({ secretKey, onCopy }: SecretKeyFieldProps) { return ( Manual entry key If you can't scan the QR code, enter this key manually in your authenticator app ); } interface RegenerateButtonProps { onRegenerate: () => void; } function RegenerateButton({ onRegenerate }: RegenerateButtonProps) { return ( ); } interface EnableButtonProps { isLoading: boolean; onClick?: () => void; } function EnableButton({ isLoading, onClick }: EnableButtonProps) { return (

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

); } function downloadBackupCodes(codes: string[]): void { if (codes.length === 0) return; const content = codes.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); } 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(() => { downloadBackupCodes(backupCodes); }, [backupCodes]); const handleToggleShowPassword = useCallback(() => { setShowPassword((prev) => !prev); }, []); const handleToggleShowBackupCodes = useCallback(() => { setShowBackupCodes((prev) => !prev); }, []); if (isEnabled) { return (

{errors?.general && }

{backupCodes.length > 0 && ( )}

); } return (

{errors?.general && }

{qrCodeUrl && } {secretKey && ( )} {onRegenerateSecret && ( )}

); }

Example Usage