Add hasSetupData to avoid enabling 2FA again

Author: pushpak1300

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

@@ -1,6 +1,6 @@
 import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
 import { type TwoFactorSecretKey, type TwoFactorSetupData } from '@/types';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 export const OTP_MAX_LENGTH = 6;
 
@@ -21,6 +21,8 @@ export const useTwoFactorAuth = () => {
     const [manualSetupKey, setManualSetupKey] = useState<string | null>(null);
     const [recoveryCodesList, setRecoveryCodesList] = useState<string[]>([]);
 
+    const hasSetupData = useMemo<boolean>(() => qrCodeSvg !== null && manualSetupKey !== null, [qrCodeSvg, manualSetupKey]);
+
     const fetchQrCode = useCallback(async (): Promise<void> => {
         try {
             const { svg } = await fetchJson<TwoFactorSetupData>(qrCode.url());
@@ -70,6 +72,7 @@ export const useTwoFactorAuth = () => {
         qrCodeSvg,
         manualSetupKey,
         recoveryCodesList,
+        hasSetupData,
         clearSetupData,
         fetchQrCode,
         fetchSetupKey,

resources/js/pages/settings/two-factor.tsx

@@ -25,7 +25,7 @@ const breadcrumbs: BreadcrumbItem[] = [
 ];
 
 export default function TwoFactor({ requiresConfirmation = false, twoFactorEnabled = false }: TwoFactorProps) {
-    const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData, recoveryCodesList, fetchRecoveryCodes } = useTwoFactorAuth();
+    const { qrCodeSvg, hasSetupData, manualSetupKey, clearSetupData, fetchSetupData, recoveryCodesList, fetchRecoveryCodes } = useTwoFactorAuth();
     const [showSetupModal, setShowSetupModal] = useState<boolean>(false);
 
     return (
@@ -63,13 +63,21 @@ export default function TwoFactor({ requiresConfirmation = false, twoFactorEnabl
                             </p>
 
                             <div>
-                                <Form {...enable.form()} onSuccess={() => setShowSetupModal(true)}>
-                                    {({ processing }) => (
-                                        <Button type="submit" disabled={processing}>
-                                            <ShieldCheck /> Enable 2FA
-                                        </Button>
-                                    )}
-                                </Form>
+                                {hasSetupData ? (
+                                    <Button onClick={() => setShowSetupModal(true)}>
+                                        <ShieldCheck />
+                                        Continue Setup
+                                    </Button>
+                                ) : (
+                                    <Form {...enable.form()} onSuccess={() => setShowSetupModal(true)}>
+                                        {({ processing }) => (
+                                            <Button type="submit" disabled={processing}>
+                                                <ShieldCheck />
+                                                Enable 2FA
+                                            </Button>
+                                        )}
+                                    </Form>
+                                )}
                             </div>
                         </div>
                     )}