Merge pull request #628 from CodebilityDev/hotfix/2fa-remove-fake-recovery-codes

fix(2fa): remove non-functional backup recovery code UI (cherry-pick to prod)

Author: deocagunot

apps/codebility/app/auth/2fa-challenge/_components/TwoFactorForm.tsx

@@ -5,13 +5,12 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { createClientClientComponent } from "@/utils/supabase/client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@codevs/ui/input";
-import { ShieldCheck, KeyRound, ArrowLeft } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import toast from "react-hot-toast";
 
 export default function TwoFactorForm() {
   const [supabase] = useState(() => createClientClientComponent());
   const [code, setCode] = useState("");
-  const [isBackupMode, setIsBackupMode] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [factorId, setFactorId] = useState<string | null>(null);
   const router = useRouter();
@@ -45,21 +44,14 @@ export default function TwoFactorForm() {
       return;
     }
 
-    if (!factorId && !isBackupMode) {
+    if (!factorId) {
       toast.error("Authentication factor not ready. Please try logging in again.");
       return;
     }
 
     setIsLoading(true);
 
     try {
-      if (isBackupMode) {
-        // Backup Recovery Code check placeholder / code verification
-        toast.error("Invalid recovery code. Please check your backup codes or try TOTP.");
-        setIsLoading(false);
-        return;
-      }
-
       // Standard TOTP Challenge & Verify
       const { data, error } = await supabase.auth.mfa.challengeAndVerify({
         factorId: factorId!,
@@ -90,14 +82,14 @@ export default function TwoFactorForm() {
     <form onSubmit={handleSubmit} className="mt-6 flex flex-col gap-4">
       <div className="space-y-2">
         <label htmlFor="2fa-code" className="text-sm text-gray font-medium block text-center">
-          {isBackupMode ? "Enter 9-character Recovery Code" : "Enter 6-digit Authenticator Code"}
+          Enter 6-digit Authenticator Code
         </label>
         <Input
           id="2fa-code"
           type="text"
-          placeholder={isBackupMode ? "XXXX-XXXX" : "123456"}
+          placeholder="123456"
           value={code}
-          maxLength={isBackupMode ? 10 : 6}
+          maxLength={6}
           onChange={(e) => setCode(e.target.value.trim())}
           className="text-center font-mono text-xl tracking-widest bg-dark-200 text-white border-dark-100 h-12"
           autoFocus
@@ -106,24 +98,17 @@ export default function TwoFactorForm() {
 
       <Button
         type="submit"
-        disabled={isLoading || (!isBackupMode && code.length < 6)}
+        disabled={isLoading || code.length < 6}
         className="w-full bg-customBlue-100 text-white hover:bg-customBlue-200 h-11"
       >
         {isLoading ? "Verifying Identity..." : "Verify & Continue"}
       </Button>
 
       <div className="flex flex-col gap-2 pt-2 text-center text-xs text-gray">
-        <button
-          type="button"
-          onClick={() => {
-            setIsBackupMode(!isBackupMode);
-            setCode("");
-          }}
-          className="text-customBlue-100 hover:underline flex items-center justify-center gap-1"
-        >
-          <KeyRound className="w-3.5 h-3.5" />
-          {isBackupMode ? "Use Authenticator App Code instead" : "Use Backup Recovery Code"}
-        </button>
+        <p>
+          Lost access to your authenticator app? Contact an admin to have 2FA
+          reset on your account.
+        </p>
 
         <button
           type="button"

apps/codebility/app/home/account-settings/_components/AccountSettings2FA.tsx

@@ -42,9 +42,6 @@ export default function AccountSettings2FA() {
   const [verificationCode, setVerificationCode] = useState<string>("");
   const [submitting, setSubmitting] = useState(false);
 
-  // Recovery Codes
-  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
-
   const fetchMfaFactors = async () => {
     try {
       setLoading(true);
@@ -115,12 +112,6 @@ export default function AccountSettings2FA() {
       toast.success("Two-Factor Authentication successfully enabled!");
       setIsEnrollOpen(false);
 
-      // Generate 10 random single-use backup recovery codes
-      const generatedCodes = Array.from({ length: 10 }, () =>
-        Math.random().toString(36).substring(2, 6).toUpperCase() + "-" +
-        Math.random().toString(36).substring(2, 6).toUpperCase()
-      );
-      setRecoveryCodes(generatedCodes);
       setIsRecoveryOpen(true);
 
       await fetchMfaFactors();
@@ -277,36 +268,27 @@ export default function AccountSettings2FA() {
         </DialogContent>
       </Dialog>
 
-      {/* RECOVERY CODES MODAL */}
+      {/* ENABLED CONFIRMATION MODAL */}
       <Dialog open={isRecoveryOpen} onOpenChange={setIsRecoveryOpen}>
         <DialogContent className="background-box text-foreground sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 text-green-500">
-              <CheckCircle2 className="w-5 h-5" /> Save Backup Recovery Codes
+              <CheckCircle2 className="w-5 h-5" /> Two-Factor Authentication Enabled
             </DialogTitle>
             <DialogDescription>
-              Keep these emergency backup codes in a secure location. You can use them to access your account if you lose your phone or authenticator device.
+              You will now be asked for a code from your authenticator app each time you sign in.
             </DialogDescription>
           </DialogHeader>
 
-          <div className="bg-muted p-4 rounded-lg border border-border space-y-2">
-            <div className="grid grid-cols-2 gap-2 text-center font-mono text-xs">
-              {recoveryCodes.map((code, idx) => (
-                <div key={idx} className="bg-background/80 p-1.5 rounded border border-border/50">
-                  {code}
-                </div>
-              ))}
-            </div>
+          <div className="bg-muted p-4 rounded-lg border border-border">
+            <p className="text-sm">
+              Keep your authenticator app safe. Backup recovery codes are not
+              available yet, so if you lose access to your device you will need
+              an admin to reset 2FA on your account.
+            </p>
           </div>
 
-          <DialogFooter className="flex flex-col sm:flex-row gap-2">
-            <Button
-              variant="outline"
-              onClick={() => copyToClipboard(recoveryCodes.join("\n"), "Backup codes")}
-              className="w-full sm:w-auto"
-            >
-              <Copy className="w-4 h-4 mr-2" /> Copy All
-            </Button>
+          <DialogFooter>
             <Button
               onClick={() => setIsRecoveryOpen(false)}
               className="bg-customBlue-200 text-white hover:bg-customBlue-300 w-full sm:w-auto"