veridian/app/components/Dialog/TwoFactor.vue

<script setup lang="ts">
import { renderSVG } from 'uqr';
import CodeInput from '~/components/CodeInput.vue';

type Action = 'enable' | 'disable' | 'regenerate';
type Step = 'password' | 'verify' | 'codes' | 'check';

const props = defineProps<{
    action?: Action;
}>();

const emit = defineEmits(['confirm', 'cancel']);

const { client: authClient, user } = useAuth();

const action = computed<Action>(() => props.action ?? 'enable');

const FLOWS: Record<Action, { title: string; steps: Step[] }> = {
    enable: { title: 'Set up two-factor sign-in', steps: ['password', 'verify', 'codes', 'check'] },
    regenerate: { title: 'New backup codes', steps: ['password', 'codes', 'check'] },
    disable: { title: 'Turn off two-factor sign-in', steps: ['password'] },
};

const STEP_LABELS: Record<Step, string> = {
    password: 'Confirm your password',
    verify: 'Scan and confirm',
    codes: 'Save your backup codes',
    check: 'Check what you saved',
};

const INPUT_CLASS = 'w-full h-9 px-2.5 text-sm rounded-md bg-[var(--bg-container)] placeholder:text-[var(--text-tertiary)]';
const CANCEL_CLASS = 'flex items-center h-10 px-4 rounded-md border border-[var(--color-border)] text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-[background-color] duration-200';
const PRIMARY_CLASS = 'flex items-center gap-2 h-10 px-4 rounded-md font-semibold bg-[var(--color-accent)] text-[var(--color-accent-text)] @hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-[background-color] duration-200';
const DANGER_CLASS = 'flex items-center gap-2 h-10 px-4 rounded-md font-semibold bg-red-600 text-white disabled:opacity-50 disabled:cursor-not-allowed';
const SECONDARY_CLASS = 'flex items-center gap-2 h-8.5 px-3 text-sm rounded-md bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] transition-colors duration-200';

const flow = computed(() => FLOWS[action.value]);
const step = ref<Step>('password');
const stepIndex = computed(() => flow.value.steps.indexOf(step.value));

const password = ref('');
const code = ref('');
const busy = ref(false);
const error = ref('');
const totpUri = ref('');
const backupCodes = ref<string[]>([]);
const copied = ref<'secret' | 'codes' | null>(null);

// last step: ask for one of the codes back, to make sure they were really saved
const checkIndex = ref(0);
const checkInput = ref('');
const checkInputEl = ref<HTMLInputElement | null>(null);

const passwordInputEl = ref<HTMLInputElement | null>(null);
const codeInputEl = ref<InstanceType<typeof CodeInput> | null>(null);

onMounted(() => {
    passwordInputEl.value?.focus();
});

const totpSecret = computed(() => {
    if (!totpUri.value) return '';

    return new URL(totpUri.value).searchParams.get('secret') ?? '';
});

const qrCode = computed(() => totpUri.value ? renderSVG(totpUri.value, { border: 2 }) : '');

type AuthClientError = { code?: string; message?: string; status?: number } | null;

const describeError = (err: AuthClientError, fallback: string): string => {
    if (err?.status === 429) return 'Too many attempts. Wait a few seconds and try again.';
    if (err?.code === 'INVALID_PASSWORD') return 'That password is not right.';
    if (err?.code === 'ACCOUNT_TEMPORARILY_LOCKED') return 'Too many wrong codes. Try again later.';
    if (err?.code === 'INVALID_CODE') return 'That code is not right. Check your authenticator app and try again.';

    return fallback;
};

const submitPassword = async () => {
    if (busy.value || password.value === '') return;

    busy.value = true;
    error.value = '';

    const body = { password: password.value };

    if (action.value === 'enable') {
        const { data, error: err } = await authClient.twoFactor.enable(body);

        if (err || !data) {
            error.value = describeError(err, 'Two-factor could not be set up. Try again.');
        } else {
            // nothing is turned on until a code from the app is verified
            totpUri.value = data.totpURI;
            backupCodes.value = data.backupCodes;
            step.value = 'verify';

            await nextTick();
            codeInputEl.value?.focus();
        }
    } else if (action.value === 'regenerate') {
        const { data, error: err } = await authClient.twoFactor.generateBackupCodes(body);

        if (err || !data) {
            error.value = describeError(err, 'New backup codes could not be made. Try again.');
        } else {
            backupCodes.value = data.backupCodes;
            step.value = 'codes';
        }
    } else {
        const { error: err } = await authClient.twoFactor.disable(body);

        if (err) {
            error.value = describeError(err, 'Two-factor could not be turned off. Try again.');
        } else {
            if (user.value) user.value = { ...user.value, twoFactorEnabled: false };
            emit('confirm', true);
        }
    }

    password.value = '';
    busy.value = false;
};

const verifyCode = async () => {
    if (busy.value || code.value.length !== 6) return;

    busy.value = true;
    error.value = '';

    const { error: err } = await authClient.twoFactor.verifyTotp({ code: code.value });

    if (err) {
        error.value = describeError(err, 'That code could not be verified. Try again.');
        code.value = '';
        busy.value = false;

        // the boxes are disabled while busy and can't take focus until now
        await nextTick();
        codeInputEl.value?.focus();
    } else {
        // set here rather than by whoever opened the dialog, so it is right
        // even if the dialog gets dismissed on the last step
        if (user.value) user.value = { ...user.value, twoFactorEnabled: true };
        step.value = 'codes';
    }

    busy.value = false;
};

// the numbers are part of what gets saved, the last step asks for a code by number
const numberedBackupCodes = computed(() =>
    backupCodes.value.map((backupCode, index) => `${index + 1}. ${backupCode}`).join('\n')
);

const startCheck = async () => {
    // a different code every time, so going back to peek at one is not enough
    checkIndex.value = Math.floor(Math.random() * backupCodes.value.length);
    checkInput.value = '';
    error.value = '';
    step.value = 'check';

    await nextTick();
    checkInputEl.value?.focus();
};

const backToCodes = () => {
    error.value = '';
    step.value = 'codes';
};

// forgiving about spacing and the dash, since the code may be read off paper
const normalizeBackupCode = (value: string) => value.replace(/[\s-]/g, '');

const submitCheck = () => {
    const expected = backupCodes.value[checkIndex.value] ?? '';

    if (normalizeBackupCode(checkInput.value) !== normalizeBackupCode(expected)) {
        error.value = `That is not code ${checkIndex.value + 1}. Capital letters matter. Go back and check what you saved.`;
        return;
    }

    emit('confirm', true);
};

const copyText = async (text: string, what: 'secret' | 'codes') => {
    try {
        await navigator.clipboard.writeText(text);
        copied.value = what;
        setTimeout(() => {
            if (copied.value === what) copied.value = null;
        }, 2000);
    } catch (err) {
        console.error('Failed to copy:', err);
    }
};

const downloadBackupCodes = () => {
    const text = `Veridian backup codes for ${user.value?.email ?? 'your account'}\nEach code works once.\n\n${numberedBackupCodes.value}\n`;
    const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));

    const link = document.createElement('a');
    link.href = url;
    link.download = 'veridian-backup-codes.txt';
    link.click();

    URL.revokeObjectURL(url);
};
</script>

<template>
    <section class="flex flex-col gap-4.5 p-6 w-screen md:w-130 max-w-full h-full md:h-auto overflow-y-auto"
        aria-labelledby="two-factor-title">
        <header class="flex items-start justify-between gap-3">
            <div class="flex flex-col gap-1">
                <h2 id="two-factor-title" class="text-lg font-semibold">{{ flow.title }}</h2>
                <p class="text-sm text-[var(--text-secondary)]">
                    <template v-if="flow.steps.length > 1">
                        Step {{ stepIndex + 1 }} of {{ flow.steps.length }} ·
                    </template>
                    {{ STEP_LABELS[step] }}
                </p>
            </div>
            <div v-if="flow.steps.length > 1" aria-hidden="true" class="flex gap-1 pt-2">
                <span v-for="(_, index) in flow.steps" :key="index" class="w-5 h-1 rounded-sm"
                    :class="index <= stepIndex ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-border-active)]'"></span>
            </div>
        </header>

        <!-- STEP: PASSWORD -->
        <form v-if="step === 'password'" class="flex flex-col gap-4.5 flex-1" @submit.prevent="submitPassword">
            <div class="flex flex-col gap-1.5">
                <label for="two-factor-password"
                    class="text-[13px] font-medium uppercase tracking-wider text-[var(--text-secondary)]">
                    Password
                </label>
                <input id="two-factor-password" ref="passwordInputEl" v-model="password" type="password" required
                    :disabled="busy" autocomplete="current-password" :class="INPUT_CLASS" />
                <p v-if="error" role="alert" class="text-sm text-red-400">{{ error }}</p>
            </div>

            <ol class="flex flex-col gap-1.5 text-[13px] text-[var(--text-secondary)]">
                <li v-if="action === 'regenerate'">
                    Your current backup codes stop working as soon as the new ones are made.
                </li>
            </ol>

            <footer class="flex justify-between gap-2 mt-auto">
                <button type="button" :disabled="busy" :class="CANCEL_CLASS" @click="emit('cancel')">Cancel</button>
                <button type="submit" :disabled="busy" :class="action === 'disable' ? DANGER_CLASS : PRIMARY_CLASS">
                    <span v-if="busy" class="i-svg-spinners-180-ring-with-bg text-4"></span>
                    {{ action === 'disable' ? 'Turn off' : 'Continue' }}
                </button>
            </footer>
        </form>

        <!-- STEP: SCAN AND CONFIRM -->
        <form v-else-if="step === 'verify'" class="flex flex-col gap-4.5 flex-1" @submit.prevent="verifyCode">
            <div class="flex flex-wrap gap-4 p-4 rounded-lg bg-[var(--bg-surface)] border border-[var(--color-border)]">
                <div class="w-37 h-37 flex-shrink-0 rounded-lg overflow-hidden bg-white" role="img"
                    aria-label="QR code for your authenticator app" v-html="qrCode"></div>
                <div class="flex flex-col gap-2.5 flex-1 min-w-40">
                    <p class="text-sm leading-normal">
                        Scan this with an authenticator app such as Ente, KeepassXC, or Authy.
                    </p>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs text-[var(--text-secondary)]">Can't scan? Enter this key by hand</span>
                        <div class="flex items-center gap-1 pl-2.5 rounded-md bg-[var(--bg-container)]">
                            <span
                                class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[13px] select-all">
                                {{ totpSecret }}
                            </span>
                            <button type="button" :aria-label="copied === 'secret' ? 'Copied' : 'Copy setup key'"
                                class="flex items-center justify-center w-8.5 h-8.5 flex-shrink-0 text-[var(--text-secondary)] @hover:text-[var(--text-primary)] transition-colors"
                                @click="copyText(totpSecret, 'secret')">
                                <span class="text-4"
                                    :class="copied === 'secret' ? 'i-mynaui-check' : 'i-mynaui-copy'"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <fieldset class="flex flex-col gap-2">
                <legend class="mb-2 text-[13px] font-medium uppercase tracking-wider text-[var(--text-secondary)]">
                    Enter the 6-digit code to verify that enrollment was successful
                </legend>
                <CodeInput ref="codeInputEl" v-model="code" :disabled="busy" @complete="verifyCode" />
                <p v-if="error" role="alert" class="text-sm text-red-400">{{ error }}</p>
            </fieldset>

            <footer class="flex justify-between gap-2 mt-auto">
                <button type="button" :disabled="busy" :class="CANCEL_CLASS" @click="emit('cancel')">Cancel</button>
                <button type="submit" :disabled="busy || code.length !== 6" :class="PRIMARY_CLASS">
                    <span v-if="busy" class="i-svg-spinners-180-ring-with-bg text-4"></span>
                    Verify code
                </button>
            </footer>
        </form>

        <!-- STEP: BACKUP CODES -->
        <div v-else-if="step === 'codes'" class="flex flex-col gap-4.5 flex-1">
            <p class="text-sm leading-normal">
                <template v-if="action === 'enable'">Two-factor sign-in is on. </template>
                Save these codes somewhere safe. Each one signs you in once if you lose your authenticator app.
                They are not shown again.
            </p>

            <ul
                class="grid grid-cols-2 gap-x-6 gap-y-1.5 p-4 rounded-lg bg-[var(--bg-surface)] border border-[var(--color-border)] font-mono text-sm [list-style-type:none]">
                <li v-for="(backupCode, index) in backupCodes" :key="backupCode" class="flex gap-2">
                    <span class="w-5 text-right text-[var(--text-tertiary)] select-none">{{ index + 1 }}.</span>
                    <span>{{ backupCode }}</span>
                </li>
            </ul>

            <div class="flex flex-wrap gap-2">
                <button type="button" :class="SECONDARY_CLASS" @click="copyText(numberedBackupCodes, 'codes')">
                    <span class="text-4" :class="copied === 'codes' ? 'i-mynaui-check' : 'i-mynaui-copy'"></span>
                    {{ copied === 'codes' ? 'Copied' : 'Copy' }}
                </button>
                <button type="button" :class="SECONDARY_CLASS" @click="downloadBackupCodes">
                    <span class="i-mynaui-download text-4"></span>
                    Download
                </button>
            </div>

            <footer class="flex justify-end gap-2 mt-auto">
                <button type="button" :class="PRIMARY_CLASS" @click="startCheck">I saved them</button>
            </footer>
        </div>

        <!-- STEP: CHECK A SAVED CODE -->
        <form v-else class="flex flex-col gap-4.5 flex-1" @submit.prevent="submitCheck">
            <p class="text-sm leading-normal">
                One last check that your codes made it somewhere safe. Find them where you saved them and enter
                code {{ checkIndex + 1 }} of {{ backupCodes.length }}.
            </p>

            <div class="flex flex-col gap-1.5">
                <label for="two-factor-check"
                    class="text-[13px] font-medium tracking-wider text-[var(--text-secondary)]">
                    Backup code {{ checkIndex + 1 }} of {{ backupCodes.length }}
                </label>
                <input id="two-factor-check" ref="checkInputEl" v-model="checkInput" type="text" required
                    autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="xxxxx-xxxxx"
                    :class="[INPUT_CLASS, 'font-mono']" />
                <p v-if="error" role="alert" class="text-sm text-red-400">{{ error }}</p>
            </div>

            <ol class="flex flex-col gap-1.5 text-[13px] text-[var(--text-secondary)] [list-style-type:none]">
                <li>Entering it here does not use the code up.</li>
            </ol>

            <footer class="flex justify-between gap-2 mt-auto">
                <button type="button" :class="CANCEL_CLASS" @click="backToCodes">Back to the codes</button>
                <button type="submit" :class="PRIMARY_CLASS">Finish</button>
            </footer>
        </form>
    </section>
</template>