"use client"; import { AlertTriangle, CheckCircle2, Copy, Download, Eye, EyeOff, Loader2, RefreshCw, Shield, } from "lucide-react"; import { useCallback, useState } from "react"; import { cn } from "@/lib/utils"; import { Alert, AlertDescription, AlertTitle, } from "@/registry/new-york/ui/alert"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/new-york/ui/alert-dialog"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; export interface AuthRecoveryCodesProps { codes?: string[]; onGenerate?: () => void; onRegenerate?: () => void; className?: string; isLoading?: boolean; errors?: { general?: string; }; } function downloadCodes(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 = "recovery-codes.txt"; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface EmptyStateProps { className?: string; } function EmptyState({ className }: EmptyStateProps) { return ( Recovery codes Backup codes for two-factor authentication

No recovery codes available. Generate codes to get started.

); } interface EmptyStateWithGenerateProps { isLoading: boolean; onGenerate?: () => void; } function EmptyStateWithGenerate({ isLoading, onGenerate, }: EmptyStateWithGenerateProps) { return (

No recovery codes generated

Generate recovery codes to use as a backup for two-factor authentication

{onGenerate && ( )}

); } interface RecoveryCodeItemProps { code: string; copied: boolean; index: number; onCopy: (code: string, index: number) => void; showCode: boolean; } function RecoveryCodeItem({ code, copied, index, onCopy, showCode, }: RecoveryCodeItemProps) { if (showCode) { return (

{code}

); } return (

{Array.from({ length: 8 }) .map(() => "•") .join("")}

); } interface RecoveryCodesListProps { codes: string[]; copiedIndex: number | null; onCopyCode: (code: string, index: number) => void; showCodes: boolean; } function RecoveryCodesList({ codes, copiedIndex, onCopyCode, showCodes, }: RecoveryCodesListProps) { return (

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

); } interface RecoveryCodesActionsProps { codes: string[]; isRegenerating: boolean; onCopyAll: () => void; onDownload: () => void; onRegenerate?: () => void; } function RecoveryCodesActions({ codes, isRegenerating, onCopyAll, onDownload, onRegenerate, }: RecoveryCodesActionsProps) { return (

{onRegenerate && ( )}

); } interface RegenerateDialogProps { isRegenerating: boolean; onRegenerate: () => void; } function RegenerateDialog({ isRegenerating, onRegenerate, }: RegenerateDialogProps) { return ( Regenerate recovery codes? This will invalidate all existing recovery codes and generate new ones. Make sure to save the new codes in a secure location. This action cannot be undone. Cancel Regenerate codes ); } export default function AuthRecoveryCodes({ codes = [], onGenerate, onRegenerate, className, isLoading = false, errors, }: AuthRecoveryCodesProps) { const [showCodes, setShowCodes] = useState(false); const [copiedIndex, setCopiedIndex] = useState(null); const [isRegenerating, setIsRegenerating] = useState(false); const handleCopyCode = useCallback(async (code: string, index: number) => { try { await navigator.clipboard.writeText(code); setCopiedIndex(index); setTimeout(() => setCopiedIndex(null), 2000); } catch {} }, []); const handleCopyAll = useCallback(async () => { if (codes.length === 0) return; try { await navigator.clipboard.writeText(codes.join("\n")); } catch {} }, [codes]); const handleDownload = useCallback(() => { downloadCodes(codes); }, [codes]); const handleRegenerate = useCallback(async () => { setIsRegenerating(true); try { await onRegenerate?.(); setShowCodes(true); } finally { setIsRegenerating(false); } }, [onRegenerate]); const handleToggleShowCodes = useCallback(() => { setShowCodes((prev) => !prev); }, []); const generalError = errors?.general; if (codes.length === 0 && !onGenerate) { return ; } return (

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

{codes.length === 0 && onGenerate && ( )}

{generalError && } {codes.length > 0 ? ( <>

Your recovery codes

) : ( )}

); }

Your recovery codes

Example Usage

Your recovery codes