"use client"; import { AlertTriangle, CheckCircle2, Copy, Download, Eye, EyeOff, Loader2, RefreshCw, Shield, } from "lucide-react"; import { useCallback, useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { cn } from "@/lib/utils"; export interface AuthRecoveryCodesProps { codes?: string[]; onGenerate?: () => void; onRegenerate?: () => void; className?: string; isLoading?: boolean; errors?: { general?: string; }; } 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(() => { 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); }, [codes]); const handleRegenerate = useCallback(async () => { setIsRegenerating(true); try { await onRegenerate?.(); setShowCodes(true); } finally { setIsRegenerating(false); } }, [onRegenerate]); const generalError = errors?.general; if (codes.length === 0 && !onGenerate) { return ( Recovery codes Backup codes for two-factor authentication

No recovery codes available. Generate codes to get started.

); } return (

Recovery codes 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 && (

{generalError}

)} {codes.length > 0 ? ( <>

Important: Save these codes

Store these recovery codes in a secure location. Each code can only be used once. If you lose access to your authenticator app, these codes are your only way to access your account.

Your recovery codes

{showCodes ? (

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

{code}

))}

) : (

{codes.map((_, index) => (

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

))}

)}

{onRegenerate && ( 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 )}

) : (

No recovery codes generated

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

{onGenerate && ( )}

)}

); }

Your recovery codes

Example Usage