feat(KAN-37): rebuild security and application key settings

resources/js/composables/useTwoFactorAuth.ts

@@ -1,120 +1,107 @@
-import type { ComputedRef, Ref } from 'vue';
-import { computed, ref } from 'vue';
+import { computed, onScopeDispose, ref } from 'vue';
+import { useLocalization } from '@/composables/useLocalization';
 import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
 
-export type UseTwoFactorAuthReturn = {
-    qrCodeSvg: Ref<string | null>;
-    manualSetupKey: Ref<string | null>;
-    recoveryCodesList: Ref<string[]>;
-    errors: Ref<string[]>;
-    hasSetupData: ComputedRef<boolean>;
-    clearSetupData: () => void;
-    clearErrors: () => void;
-    clearTwoFactorAuthData: () => void;
-    fetchQrCode: () => Promise<void>;
-    fetchSetupKey: () => Promise<void>;
-    fetchSetupData: () => Promise<void>;
-    fetchRecoveryCodes: () => Promise<void>;
-};
+/** Keep secrets within the consuming component and discard late responses after hiding them. */
+export function useTwoFactorAuth() {
+    const { t } = useLocalization();
+    const errors = ref<string[]>([]);
+    const manualSetupKey = ref<string | null>(null);
+    const qrCodeSvg = ref<string | null>(null);
+    const recoveryCodesList = ref<string[]>([]);
+    const loading = ref(false);
+    let pending: AbortController | null = null;
 
-const fetchJson = async <T>(url: string): Promise<T> => {
-    const response = await fetch(url, {
-        headers: { Accept: 'application/json' },
-    });
-
-    if (!response.ok) {
-        throw new Error(`Failed to fetch: ${response.status}`);
+    async function fetchJson<T>(url: string, signal: AbortSignal): Promise<T> {
+        const response = await fetch(url, {
+            headers: { Accept: 'application/json' },
+            credentials: 'same-origin',
+            signal,
+        });
+        if (!response.ok || response.redirected) {
+            throw new Error(String(response.status));
+        }
+        return response.json();
     }
 
-    return response.json();
-};
+    function clearErrors(): void {
+        errors.value = [];
+    }
 
-const errors = ref<string[]>([]);
-const manualSetupKey = ref<string | null>(null);
-const qrCodeSvg = ref<string | null>(null);
-const recoveryCodesList = ref<string[]>([]);
-
-const hasSetupData = computed<boolean>(
-    () => qrCodeSvg.value !== null && manualSetupKey.value !== null,
-);
-
-export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => {
-    const fetchQrCode = async (): Promise<void> => {
-        try {
-            const { svg } = await fetchJson<{ svg: string; url: string }>(
-                qrCode.url(),
-            );
-
-            qrCodeSvg.value = svg;
-        } catch {
-            errors.value.push('Failed to fetch QR code');
-            qrCodeSvg.value = null;
-        }
-    };
-
-    const fetchSetupKey = async (): Promise<void> => {
-        try {
-            const { secretKey: key } = await fetchJson<{ secretKey: string }>(
-                secretKey.url(),
-            );
-
-            manualSetupKey.value = key;
-        } catch {
-            errors.value.push('Failed to fetch a setup key');
-            manualSetupKey.value = null;
-        }
-    };
-
-    const clearSetupData = (): void => {
+    function clearTwoFactorAuthData(): void {
+        pending?.abort();
+        pending = null;
+        loading.value = false;
         manualSetupKey.value = null;
         qrCodeSvg.value = null;
-        clearErrors();
-    };
-
-    const clearErrors = (): void => {
-        errors.value = [];
-    };
-
-    const clearTwoFactorAuthData = (): void => {
-        clearSetupData();
-        clearErrors();
         recoveryCodesList.value = [];
-    };
+        clearErrors();
+    }
 
-    const fetchRecoveryCodes = async (): Promise<void> => {
+    async function load(kind: 'setup' | 'recovery'): Promise<void> {
+        clearTwoFactorAuthData();
+        const request = new AbortController();
+        pending = request;
+        loading.value = true;
         try {
-            clearErrors();
-            recoveryCodesList.value = await fetchJson<string[]>(
-                recoveryCodes.url(),
-            );
-        } catch {
-            errors.value.push('Failed to fetch recovery codes');
-            recoveryCodesList.value = [];
+            if (kind === 'setup') {
+                const [qr, key] = await Promise.all([
+                    fetchJson<{ svg: string }>(qrCode.url(), request.signal),
+                    fetchJson<{ secretKey: string }>(
+                        secretKey.url(),
+                        request.signal,
+                    ),
+                ]);
+                if (pending !== request) {
+                    return;
+                }
+                qrCodeSvg.value = qr.svg;
+                manualSetupKey.value = key.secretKey;
+            } else {
+                const codes = await fetchJson<string[]>(
+                    recoveryCodes.url(),
+                    request.signal,
+                );
+                if (pending === request) {
+                    recoveryCodesList.value = codes;
+                }
+            }
+        } catch (error) {
+            if (pending === request && !request.signal.aborted) {
+                const status = error instanceof Error ? error.message : '';
+                errors.value = [
+                    t(
+                        status === '423' || status === '401' || status === '419'
+                            ? 'security.confirmAgain'
+                            : kind === 'setup'
+                              ? 'security.setupError'
+                              : 'security.recoveryError',
+                    ),
+                ];
+            }
+        } finally {
+            if (pending === request) {
+                pending = null;
+                loading.value = false;
+            }
         }
-    };
-
-    const fetchSetupData = async (): Promise<void> => {
-        try {
-            clearErrors();
-            await Promise.all([fetchQrCode(), fetchSetupKey()]);
-        } catch {
-            qrCodeSvg.value = null;
-            manualSetupKey.value = null;
-        }
-    };
+    }
 
+    onScopeDispose(clearTwoFactorAuthData);
     return {
         qrCodeSvg,
         manualSetupKey,
         recoveryCodesList,
         errors,
-        hasSetupData,
-        clearSetupData,
-        clearErrors,
+        loading,
+        hasSetupData: computed(() =>
+            Boolean(qrCodeSvg.value && manualSetupKey.value),
+        ),
+        clearSetupData: clearTwoFactorAuthData,
+        clearRecoveryCodes: clearTwoFactorAuthData,
         clearTwoFactorAuthData,
-        fetchQrCode,
-        fetchSetupKey,
-        fetchSetupData,
-        fetchRecoveryCodes,
+        clearErrors,
+        fetchSetupData: () => load('setup'),
+        fetchRecoveryCodes: () => load('recovery'),
     };
-};
+}