moving the use-two-factor-auth to a hook so it can be re-used

Author: tnylea

resources/js/hooks/use-two-factor-auth.tsx

@@ -0,0 +1,162 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface EnableResponse {
+  qrCode: string;
+  secret: string;
+}
+
+interface RecoveryCodesResponse {
+  recovery_codes: string[];
+}
+
+export function useTwoFactorAuth(initialConfirmed: boolean, initialRecoveryCodes: string[]) {
+  const csrfToken =
+    document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+
+  const headers = {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+    'X-CSRF-TOKEN': csrfToken,
+    'X-Requested-With': 'XMLHttpRequest',
+  };
+
+  const [confirmed, setConfirmed] = useState(initialConfirmed);
+  const [qrCodeSvg, setQrCodeSvg] = useState('');
+  const [secretKey, setSecretKey] = useState('');
+  const [recoveryCodesList, setRecoveryCodesList] = useState(initialRecoveryCodes);
+  const [copied, setCopied] = useState(false);
+  const [passcode, setPasscode] = useState('');
+  const [error, setError] = useState('');
+  const [verifyStep, setVerifyStep] = useState(false);
+  const [showingRecoveryCodes, setShowingRecoveryCodes] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  // Automatically enable 2FA when modal opens and QR is not yet fetched
+  useEffect(() => {
+    if (showModal && !verifyStep && !qrCodeSvg) {
+      enable();
+    }
+  }, [showModal, verifyStep, qrCodeSvg]);
+
+  const enable = useCallback(async () => {
+    try {
+      const response = await fetch(route('two-factor.enable'), {
+        method: 'POST',
+        headers,
+      });
+
+      if (response.ok) {
+        const data: EnableResponse = await response.json();
+        setQrCodeSvg(data.qrCode);
+        setSecretKey(data.secret);
+      } else {
+        console.error('Error enabling 2FA:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error enabling 2FA:', error);
+    }
+  }, [headers]);
+
+  const confirm = useCallback(async () => {
+    if (!passcode || passcode.length !== 6) return;
+
+    const formattedCode = passcode.replace(/\s+/g, '').trim();
+
+    try {
+      const response = await fetch(route('two-factor.confirm'), {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ code: formattedCode }),
+      });
+
+      if (response.ok) {
+        const responseData = await response.json();
+        if (responseData.recovery_codes) {
+          setRecoveryCodesList(responseData.recovery_codes);
+        }
+
+        setConfirmed(true);
+        setVerifyStep(false);
+        setShowModal(false);
+        setShowingRecoveryCodes(true);
+        setPasscode('');
+        setError('');
+      } else {
+        const errorData = await response.json();
+        console.error('Verification error:', errorData.message);
+        setError(errorData.message || 'Invalid verification code');
+        setPasscode('');
+      }
+    } catch (error) {
+      console.error('Error confirming 2FA:', error);
+      setError('An error occurred while confirming 2FA');
+    }
+  }, [headers, passcode]);
+
+  const regenerateRecoveryCodes = useCallback(async () => {
+    try {
+      const response = await fetch(route('two-factor.regenerate-recovery-codes'), {
+        method: 'POST',
+        headers,
+      });
+
+      if (response.ok) {
+        const data: RecoveryCodesResponse = await response.json();
+        if (data.recovery_codes) {
+          setRecoveryCodesList(data.recovery_codes);
+        }
+      } else {
+        console.error('Error regenerating codes:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error regenerating codes:', error);
+    }
+  }, [headers]);
+
+  const disable = useCallback(async () => {
+    try {
+      const response = await fetch(route('two-factor.disable'), { method: 'DELETE', headers });
+
+      if (response.ok) {
+        setConfirmed(false);
+        setShowingRecoveryCodes(false);
+        setRecoveryCodesList([]);
+        setQrCodeSvg('');
+        setSecretKey('');
+      } else {
+        console.error('Error disabling 2FA:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error disabling 2FA:', error);
+    }
+  }, [headers]);
+
+  const copyToClipboard = useCallback((text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, []);
+
+  return {
+    confirmed,
+    qrCodeSvg,
+    secretKey,
+    recoveryCodesList,
+    copied,
+    passcode,
+    setPasscode,
+    error,
+    setError,
+    verifyStep,
+    setVerifyStep,
+    showingRecoveryCodes,
+    setShowingRecoveryCodes,
+    showModal,
+    setShowModal,
+    enable,
+    confirm,
+    regenerateRecoveryCodes,
+    disable,
+    copyToClipboard,
+  };
+}

resources/js/pages/auth/two-factor-challenge.tsx

@@ -3,10 +3,8 @@ import { Head, useForm } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import InputError from '@/components/input-error';
 import AuthLayout from '@/layouts/auth-layout';
-import TextLink from '@/components/text-link';
 
 export default function TwoFactorChallenge() {
     const [recovery, setRecovery] = useState(false);
@@ -38,12 +36,7 @@ export default function TwoFactorChallenge() {
             {!recovery ? (
                 <form onSubmit={submitCode} className="space-y-4">
                     <div className="flex flex-col items-center justify-center space-y-3 text-center">
-                        <InputOTP
-                            maxLength={6}
-                            value={data.code}
-                            onChange={(value) => setData('code', value)}
-                            autoFocus
-                        >
+                        <InputOTP maxLength={6} value={data.code} onChange={(value) => setData('code', value)} autoFocus>
                             <InputOTPGroup>
                                 <InputOTPSlot index={0} />
                                 <InputOTPSlot index={1} />