diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 685b34d638..da5859ab45 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -73,3 +73,4 @@ export { default as RadioBoxes } from './radioBoxes.svelte';
 export { default as ModalWrapper } from './modalWrapper.svelte';
 export { default as ModalSideCol } from './modalSideCol.svelte';
 export { default as ImagePreview } from './imagePreview.svelte';
+export { default as MfaChallengeFormList } from './mfaChallengeFormList.svelte';
diff --git a/src/lib/components/mfaChallengeFormList.svelte b/src/lib/components/mfaChallengeFormList.svelte
new file mode 100644
index 0000000000..96e77daf21
--- /dev/null
+++ b/src/lib/components/mfaChallengeFormList.svelte
@@ -0,0 +1,134 @@
+<script context="module" lang="ts">
+    export async function verify(challenge: Models.MfaChallenge, code: string) {
+        try {
+            if (challenge == null) {
+                challenge = await sdk.forConsole.account.createMfaChallenge(
+                    AuthenticationFactor.Totp
+                );
+            }
+            await sdk.forConsole.account.updateMfaChallenge(challenge.$id, code);
+            await invalidate(Dependencies.ACCOUNT);
+            trackEvent(Submit.AccountCreate);
+        } catch (error) {
+            trackError(error, Submit.AccountCreate);
+            throw error;
+        }
+    }
+</script>
+
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Button, FormItem, FormList, InputDigits, InputText } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { AuthenticationFactor, type Models } from '@appwrite.io/console';
+
+    export let factors: Models.MfaFactors & { recoveryCode: boolean };
+    /** If true, the form will be submitted automatically when the code is entered. */
+    export let autoSubmit: boolean = true;
+    export let showVerifyButton: boolean = true;
+    export let disabled: boolean = false;
+    export let challenge: Models.MfaChallenge;
+    export let code: string;
+
+    let challengeType: AuthenticationFactor;
+
+    const enabledFactors = Object.entries(factors).filter(([_, enabled]) => enabled);
+
+    async function createChallenge(factor: AuthenticationFactor) {
+        disabled = true;
+        challengeType = factor;
+        challenge = await sdk.forConsole.account.createMfaChallenge(factor);
+        disabled = false;
+    }
+
+    onMount(async () => {
+        const enabledNonRecoveryFactors = enabledFactors.filter(
+            ([factor, _]) => factor != 'recoveryCode'
+        );
+        if (enabledNonRecoveryFactors.length == 1) {
+            if (factors.phone) {
+                createChallenge(AuthenticationFactor.Phone);
+            } else if (factors.email) {
+                createChallenge(AuthenticationFactor.Email);
+            }
+        }
+    });
+</script>
+
+<FormList>
+    {#if challengeType == AuthenticationFactor.Recoverycode}
+        <p>
+            Enter below one of the recovery codes you received when enabling MFA for this account.
+        </p>
+        <InputText id="recovery-code" bind:value={code} required autofocus />
+    {:else}
+        {#if factors.totp && (challengeType == AuthenticationFactor.Totp || challengeType == null)}
+            <p>Enter below a 6-digit one-time code generated by your authentication app.</p>
+        {:else if challengeType == AuthenticationFactor.Email}
+            <p>A 6-digit verification code was sent to your email, enter it below.</p>
+        {:else if challengeType == AuthenticationFactor.Phone}
+            <p>A 6-digit verification code was sent to your phone, enter it below.</p>
+        {/if}
+        <InputDigits bind:value={code} required autofocus {autoSubmit} />
+    {/if}
+    {#if showVerifyButton}
+        <FormItem>
+            <Button fullWidth submit {disabled}>Verify</Button>
+        </FormItem>
+    {/if}
+    {#if enabledFactors.length > 1}
+        <span class="with-separators eyebrow-heading-3">or</span>
+        <div class="u-flex-vertical u-gap-8">
+            {#if factors.totp && challengeType != null && challengeType != AuthenticationFactor.Totp}
+                <FormItem>
+                    <Button
+                        secondary
+                        fullWidth
+                        {disabled}
+                        on:click={() => createChallenge(AuthenticationFactor.Totp)}>
+                        <span class="icon-device-mobile u-font-size-20" aria-hidden="true" />
+                        <span class="text">Authenticator app</span>
+                    </Button>
+                </FormItem>
+            {/if}
+            {#if factors.email && challengeType != AuthenticationFactor.Email}
+                <FormItem>
+                    <Button
+                        secondary
+                        fullWidth
+                        {disabled}
+                        on:click={() => createChallenge(AuthenticationFactor.Email)}>
+                        <span class="icon-mail u-font-size-20" aria-hidden="true" />
+                        <span class="text">Email verification</span>
+                    </Button>
+                </FormItem>
+            {/if}
+            {#if factors.phone && challengeType != AuthenticationFactor.Phone}
+                <FormItem>
+                    <Button
+                        secondary
+                        fullWidth
+                        {disabled}
+                        on:click={() => createChallenge(AuthenticationFactor.Phone)}>
+                        <span class="icon-chat-alt u-font-size-20" aria-hidden="true" />
+                        <span class="text">Phone verification</span>
+                    </Button>
+                </FormItem>
+            {/if}
+            {#if factors.recoveryCode && challengeType != AuthenticationFactor.Recoverycode}
+                <FormItem>
+                    <Button
+                        text
+                        fullWidth
+                        {disabled}
+                        on:click={() => createChallenge(AuthenticationFactor.Recoverycode)}>
+                        <span class="text">Use recovery code</span>
+                    </Button>
+                </FormItem>
+            {/if}
+        </div>
+    {/if}
+</FormList>
diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index 0610df78fb..c822d50bbb 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -24,7 +24,11 @@
         onValueChange: ({ next }) => {
             value = next.join('');
 
-            if (autoSubmit && value.length === length && !autoSubmitted) {
+            if (value.length < length) {
+                autoSubmitted = false;
+            }
+
+            if (element && autoSubmit && value.length === length && !autoSubmitted) {
                 autoSubmitted = true;
                 const firstInputElement = element.querySelector('input');
                 firstInputElement?.form.requestSubmit();
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 16c97001a4..da82156371 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { AvatarInitials, DropList, DropListItem, DropListLink, Support } from '$lib/components';
     import { app } from '$lib/stores/app';
@@ -24,7 +24,7 @@
     import CreateOrganizationCloud from '$routes/console/createOrganizationCloud.svelte';
     import { Feedback } from '$lib/components/feedback';
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
-    import { BillingPlan } from '$lib/constants';
+    import { BillingPlan, Dependencies } from '$lib/constants';
 
     let showDropdown = false;
     let showSupport = false;
@@ -40,6 +40,7 @@
 
     async function logout() {
         await sdk.forConsole.account.deleteSession('current');
+        await invalidate(Dependencies.ACCOUNT);
         trackEvent(Submit.AccountLogout);
         await goto(`${base}/login`);
     }
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index bbd662525f..85ad4e83d9 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -42,12 +42,13 @@ export const load: LayoutLoad = async ({ depends, url }) => {
         const path = url.search ? `${url.search}&${redirectUrl}` : `?${redirectUrl}`;
 
         if (error.type === 'user_more_factors_required') {
-            if (url.pathname === '/mfa') return;
+            if (url.pathname === '/mfa') return {}; // Ensure any previous account/organizations are cleared
             redirect(303, `/mfa${path}`);
         }
 
         if (!acceptedRoutes.some((n) => url.pathname.startsWith(n))) {
             redirect(303, `/login${path}`);
         }
+        return {}; // Ensure any previous account/organizations are cleared
     }
 };
diff --git a/src/routes/console/+layout.ts b/src/routes/console/+layout.ts
index 3c2496e846..c1de917107 100644
--- a/src/routes/console/+layout.ts
+++ b/src/routes/console/+layout.ts
@@ -5,7 +5,9 @@ import { sdk } from '$lib/stores/sdk';
 import { isCloud } from '$lib/system';
 import type { LayoutLoad } from './$types';
 
-export const load: LayoutLoad = async ({ fetch, depends }) => {
+export const load: LayoutLoad = async ({ fetch, depends, parent }) => {
+    await parent(); // ensure user is authenticated before proceeding
+
     depends(Dependencies.RUNTIMES);
     depends(Dependencies.CONSOLE_VARIABLES);
 
diff --git a/src/routes/console/account/mfaRecoveryCodes.svelte b/src/routes/console/account/mfaRecoveryCodes.svelte
index a3a22c22ee..63ec5d0fa4 100644
--- a/src/routes/console/account/mfaRecoveryCodes.svelte
+++ b/src/routes/console/account/mfaRecoveryCodes.svelte
@@ -27,7 +27,7 @@
             <ul class="buttons-list">
                 <li class="buttons-list-item">
                     <Button
-                        download="backups.txt"
+                        download="appwrite-backups.txt"
                         href={`data:application/octet-stream;charset=utf-8,${formattedBackupCodes}`}
                         text>
                         <span class="icon-download u-font-size-20" aria-hidden="true" />
diff --git a/src/routes/console/account/mfaRegenerateCodes.svelte b/src/routes/console/account/mfaRegenerateCodes.svelte
index b3344a7954..2f671f7ec7 100644
--- a/src/routes/console/account/mfaRegenerateCodes.svelte
+++ b/src/routes/console/account/mfaRegenerateCodes.svelte
@@ -1,27 +1,32 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, FormList, InputDigits } from '$lib/elements/forms';
-    import { sdk } from '$lib/stores/sdk';
-    import { AuthenticationFactor } from '@appwrite.io/console';
+    import MfaChallengeFormList, { verify } from '$lib/components/mfaChallengeFormList.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { type Models } from '@appwrite.io/console';
 
     export let show = false;
     export let regenerateRecoveryCodes: () => Promise<void>;
+    export let factors: Models.MfaFactors & { recoveryCode: boolean };
 
-    let code = '';
     let error = '';
+    let challenge: Models.MfaChallenge = null;
+    let code = '';
 
-    async function verify() {
+    async function submit() {
         try {
-            const challenge = await sdk.forConsole.account.createMfaChallenge(
-                AuthenticationFactor.Totp
-            );
-            await sdk.forConsole.account.updateMfaChallenge(challenge.$id, code);
+            await verify(challenge, code);
+            await regenerateRecoveryCodes();
             show = false;
-            regenerateRecoveryCodes();
         } catch (e) {
             error = e.message;
         }
     }
+
+    $: if (show) {
+        error = '';
+        challenge = null;
+        code = '';
+    }
 </script>
 
 <Modal
@@ -30,16 +35,18 @@
     state="warning"
     headerDivider={false}
     {error}
-    onSubmit={verify}
+    onSubmit={submit}
     bind:show>
     <p>
         Are you sure you want to regenerate all recovery codes? All <b
             >previously generated recovery codes will become invalid.</b>
     </p>
-    <p>Enter the 6-digit verification code generated by your authenticator app to continue.</p>
-    <FormList>
-        <InputDigits bind:value={code} required autofocus autoSubmit={false} />
-    </FormList>
+    <MfaChallengeFormList
+        factors={{ ...factors, recoveryCode: false }}
+        bind:challenge
+        bind:code
+        showVerifyButton={false}
+        autoSubmit={false} />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index e15dc392ca..a257865f65 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -20,10 +20,19 @@
     let showRegenerateRecoveryCodes = false;
     let codes: Models.MfaRecoveryCodes = null;
 
+    $: enabledFactors = Object.entries($factors)
+        .filter(([_, enabled]) => enabled)
+        .map(([factor, _]) => factor);
+    $: enabledMethods = enabledFactors.filter((factor) => factor !== 'recoveryCode');
+
     async function updateMfa() {
         try {
             await sdk.forConsole.account.updateMFA(!$user.mfa);
             await invalidate(Dependencies.ACCOUNT);
+            addNotification({
+                message: `Multi-factor authentication has been ${$user.mfa ? 'enabled' : 'disabled'}`,
+                type: 'success'
+            });
             trackEvent(Submit.AccountUpdateMfa, { mfa: !$user.mfa });
         } catch (error) {
             addNotification({
@@ -63,6 +72,10 @@
             trackError(error, Submit.AccountRecoveryCodesUpdate);
         }
     }
+
+    $: if (!showRecoveryCodes) {
+        codes = null;
+    }
 </script>
 
 <CardGrid>
@@ -87,99 +100,119 @@
                         href="https://appwrite.io/docs/products/auth/mfa">Learn more.</Button>
                 </p>
             </div>
-            <div class="u-flex-vertical u-gap-16">
-                <div class="u-sep-block-end" style="padding-block-end: 8px;">
-                    <EyebrowHeading tag="h6" size={3} class="u-normal">Methods</EyebrowHeading>
-                </div>
-                <div
-                    class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
-                    style="padding-block-end: 16px">
-                    <div class="u-flex u-gap-8">
-                        <div class="avatar is-size-x-small">
-                            <span class="icon-device-mobile" aria-hidden="true" />
-                        </div>
-                        <div class="u-flex-vertical u-gap-4 body-text-2">
-                            <span class="u-bold">Authenticator app</span>
-                            <span
-                                >Use an authentication app to generate two-factor authentication
-                                codes.</span>
-                        </div>
+            {#if $user.mfa}
+                <div class="u-flex-vertical u-gap-16">
+                    <div class="u-sep-block-end" style="padding-block-end: 8px;">
+                        <EyebrowHeading tag="h6" size={3} class="u-normal">Methods</EyebrowHeading>
                     </div>
-                    <div class="method-button">
-                        {#if $factors.totp}
-                            <Button text secondary on:click={() => (showDelete = true)}
-                                >Delete</Button>
-                        {:else}
-                            <Button secondary on:click={() => (showSetup = true)}>Add</Button>
-                        {/if}
-                    </div>
-                </div>
-
-                {#if $factors.email}
                     <div
-                        class="u-flex u-main-space-between u-sep-block-end"
+                        class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
                         style="padding-block-end: 16px">
                         <div class="u-flex u-gap-8">
                             <div class="avatar is-size-x-small">
-                                <span class="icon-mail" aria-hidden="true" />
+                                <span class="icon-device-mobile" aria-hidden="true" />
                             </div>
                             <div class="u-flex-vertical u-gap-4 body-text-2">
-                                <span class="u-bold">Email verification</span>
-                                <span>One-time codes will be sent to: {$user.email}</span>
+                                <span class="u-bold">Authenticator app</span>
+                                <span
+                                    >Use an authentication app to generate two-factor authentication
+                                    codes.</span>
                             </div>
                         </div>
+                        <div class="method-button">
+                            {#if $factors.totp}
+                                <Button
+                                    text
+                                    class="is-not-mobile"
+                                    on:click={() => (showDelete = true)}>Delete</Button>
+                                <Button
+                                    text
+                                    class="is-only-mobile"
+                                    noMargin
+                                    on:click={() => (showDelete = true)}>Delete</Button>
+                            {:else}
+                                <Button secondary on:click={() => (showSetup = true)}>Add</Button>
+                            {/if}
+                        </div>
                     </div>
-                {/if}
 
-                {#if $factors.phone}
-                    <div
-                        class="u-flex u-main-space-between u-sep-block-end"
-                        style="padding-block-end: 16px">
-                        <div class="u-flex u-gap-8">
-                            <div class="avatar is-size-x-small">
-                                <span class="icon-send" aria-hidden="true" />
-                            </div>
-                            <div class="u-flex-vertical u-gap-4 body-text-2">
-                                <span class="u-bold">SMS verification</span>
-                                <span>One-time codes will be sent to: {$user.phone}</span>
+                    {#if $factors.email}
+                        <div
+                            class="u-flex u-main-space-between u-sep-block-end"
+                            style="padding-block-end: 16px">
+                            <div class="u-flex u-gap-8">
+                                <div class="avatar is-size-x-small">
+                                    <span class="icon-mail" aria-hidden="true" />
+                                </div>
+                                <div class="u-flex-vertical u-gap-4 body-text-2">
+                                    <span class="u-bold">Email verification</span>
+                                    <span>One-time codes will be sent to: {$user.email}</span>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                {/if}
-            </div>
+                    {/if}
 
-            <div class="u-flex-vertical u-gap-16">
-                <div class="u-sep-block-end" style="padding-block-end: 8px;">
-                    <EyebrowHeading tag="h6" size={3} class="u-normal">Recovery</EyebrowHeading>
+                    {#if $factors.phone}
+                        <div
+                            class="u-flex u-main-space-between u-sep-block-end"
+                            style="padding-block-end: 16px">
+                            <div class="u-flex u-gap-8">
+                                <div class="avatar is-size-x-small">
+                                    <span class="icon-send" aria-hidden="true" />
+                                </div>
+                                <div class="u-flex-vertical u-gap-4 body-text-2">
+                                    <span class="u-bold">SMS verification</span>
+                                    <span>One-time codes will be sent to: {$user.phone}</span>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
                 </div>
-                <div
-                    class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
-                    style="padding-block-end: 16px">
-                    <div class="u-flex u-gap-8">
-                        <div class="avatar is-size-x-small">
-                            <span class="icon-lock-open" aria-hidden="true" />
+
+                {#if enabledMethods.length > 0}
+                    <div class="u-flex-vertical u-gap-16">
+                        <div class="u-sep-block-end" style="padding-block-end: 8px;">
+                            <EyebrowHeading tag="h6" size={3} class="u-normal"
+                                >Recovery</EyebrowHeading>
                         </div>
-                        <div class="u-flex-vertical u-gap-4 body-text-2">
-                            <span class="u-bold">Recovery codes</span>
-                            <span
-                                >Use in case you can't receive two-factor authentication codes.</span>
+                        <div
+                            class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
+                            style="padding-block-end: 16px">
+                            <div class="u-flex u-gap-8">
+                                <div class="avatar is-size-x-small">
+                                    <span class="icon-lock-open" aria-hidden="true" />
+                                </div>
+                                <div class="u-flex-vertical u-gap-4 body-text-2">
+                                    <span class="u-bold">Recovery codes</span>
+                                    <span
+                                        >Use in case you can't receive two-factor authentication
+                                        codes.</span>
+                                </div>
+                            </div>
+                            <div class="method-button">
+                                {#if $factors.recoveryCode}
+                                    <Button
+                                        class="method-button is-not-mobile"
+                                        text
+                                        on:click={() => (showRegenerateRecoveryCodes = true)}
+                                        >Regenerate</Button>
+                                    <Button
+                                        class="method-button is-only-mobile"
+                                        text
+                                        noMargin
+                                        on:click={() => (showRegenerateRecoveryCodes = true)}
+                                        >Regenerate</Button>
+                                {:else}
+                                    <Button
+                                        class="method-button"
+                                        secondary
+                                        on:click={createRecoveryCodes}>View</Button>
+                                {/if}
+                            </div>
                         </div>
                     </div>
-                    <div class="method-button">
-                        {#if $factors.recoveryCode}
-                            <Button
-                                class="method-button"
-                                text
-                                secondary
-                                on:click={() => (showRegenerateRecoveryCodes = true)}
-                                >Regenerate</Button>
-                        {:else}
-                            <Button class="method-button" secondary on:click={createRecoveryCodes}
-                                >View</Button>
-                        {/if}
-                    </div>
-                </div>
-            </div>
+                {/if}
+            {/if}
         </div>
     </svelte:fragment>
 </CardGrid>
@@ -190,7 +223,10 @@
 <DeleteMfa bind:showDelete />
 
 <MfaRecoveryCodes bind:showRecoveryCodes {codes} />
-<MfaRegenerateCodes bind:show={showRegenerateRecoveryCodes} {regenerateRecoveryCodes} />
+<MfaRegenerateCodes
+    bind:show={showRegenerateRecoveryCodes}
+    {regenerateRecoveryCodes}
+    factors={$factors} />
 
 <style lang="scss">
     @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index e60e5811b5..11cedbfccf 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -18,6 +18,7 @@
     import { page } from '$app/stores';
     import { OAuthProvider } from '@appwrite.io/console';
     import { redirectTo } from '$routes/store';
+    import { user } from '$lib/stores/user';
 
     let mail: string, pass: string, disabled: boolean;
 
@@ -26,18 +27,18 @@
             disabled = true;
             await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
             await invalidate(Dependencies.ACCOUNT);
-            addNotification({
-                type: 'success',
-                message: 'Successfully logged in.'
-            });
+            trackEvent(Submit.AccountLogin);
+            if ($user) {
+                addNotification({
+                    type: 'success',
+                    message: 'Successfully logged in.'
+                });
+            }
             if ($redirectTo) {
                 window.location.href = $redirectTo;
                 return;
             }
 
-            await invalidate(Dependencies.ACCOUNT);
-            trackEvent(Submit.AccountCreate);
-
             if ($page.url.searchParams) {
                 const redirect = $page.url.searchParams.get('redirect');
                 $page.url.searchParams.delete('redirect');
@@ -55,7 +56,7 @@
                 type: 'error',
                 message: error.message
             });
-            trackError(error, Submit.AccountCreate);
+            trackError(error, Submit.AccountLogin);
         }
     }
 
diff --git a/src/routes/mfa/+page.svelte b/src/routes/mfa/+page.svelte
index 389889db7e..93b63c82b9 100644
--- a/src/routes/mfa/+page.svelte
+++ b/src/routes/mfa/+page.svelte
@@ -1,58 +1,31 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { goto, invalidate } from '$app/navigation';
+    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { Button, Form, FormItem, FormList, InputDigits, InputText } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
+    import { Button, Form } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
-    import { Dependencies } from '$lib/constants';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import type { Models } from '@appwrite.io/console';
+    import MfaChallengeFormList, { verify } from '$lib/components/mfaChallengeFormList.svelte';
     import { page } from '$app/stores';
-    import { AuthenticationFactor, type Models } from '@appwrite.io/console';
+    import { addNotification } from '$lib/stores/notifications.js';
 
     export let data;
 
-    let code: string;
-    let disabled: boolean;
-    let challenge: Models.MfaChallenge;
-    let challengeType: AuthenticationFactor;
-
     const factors = data.factors as Models.MfaFactors & { recoveryCode: boolean };
-    const enabledFactors = Object.entries(factors).filter(([_, enabled]) => enabled);
-
-    async function createChallenge(factor: AuthenticationFactor) {
-        challengeType = factor;
-        challenge = await sdk.forConsole.account.createMfaChallenge(factor);
-    }
 
-    onMount(async () => {
-        const enabledNonRecoveryFactors = enabledFactors.filter(
-            ([factor, _]) => factor != 'recoveryCode'
-        );
-        if (enabledNonRecoveryFactors.length == 1) {
-            if (factors.phone) {
-                createChallenge(AuthenticationFactor.Phone);
-            } else if (factors.email) {
-                createChallenge(AuthenticationFactor.Email);
-            }
-        }
-    });
+    let disabled = false;
+    let challenge: Models.MfaChallenge = null;
+    let code = '';
 
     async function back() {
         await sdk.forConsole.account.deleteSession('current');
         await goto(`${base}/`);
     }
 
-    async function verify() {
+    async function submit() {
+        disabled = true;
         try {
-            disabled = true;
-            if (challenge == null) {
-                await createChallenge(AuthenticationFactor.Totp);
-            }
-            await sdk.forConsole.account.updateMfaChallenge(challenge.$id, code);
-            await invalidate(Dependencies.ACCOUNT);
-            trackEvent(Submit.AccountCreate);
+            await verify(challenge, code);
             if ($page.url.searchParams) {
                 const redirect = $page.url.searchParams.get('redirect');
                 $page.url.searchParams.delete('redirect');
@@ -65,12 +38,11 @@
                 await goto(`${base}/console`);
             }
         } catch (error) {
-            disabled = false;
             addNotification({
                 type: 'error',
                 message: error.message
             });
-            trackError(error, Submit.AccountCreate);
+            disabled = false;
         }
     }
 </script>
@@ -91,89 +63,8 @@
     </svelte:fragment>
     <svelte:fragment slot="title">Verify your identity</svelte:fragment>
     <svelte:fragment>
-        <Form onSubmit={verify}>
-            <FormList>
-                {#if factors.totp && (challengeType == AuthenticationFactor.Totp || challengeType == null)}
-                    <p class="body-text-1">
-                        Enter below a 6-digit one-time code generated by your authentication app.
-                    </p>
-                    <InputDigits bind:value={code} required autofocus />
-                {:else if challengeType == AuthenticationFactor.Email}
-                    <p class="body-text-1">
-                        A 6-digit verification code was sent to your email, enter it below.
-                    </p>
-                    <InputDigits bind:value={code} required autofocus />
-                {:else if challengeType == AuthenticationFactor.Phone}
-                    <p class="body-text-1">
-                        A 6-digit verification code was sent to your phone, enter it below.
-                    </p>
-                    <InputDigits bind:value={code} required autofocus />
-                {:else if challengeType == AuthenticationFactor.Recoverycode}
-                    <p class="body-text-1">
-                        Enter below one of the recovery codes you received when enabling MFA for
-                        this account.
-                    </p>
-                    <InputText id="recovery-code" bind:value={code} required autofocus />
-                {/if}
-                <FormItem>
-                    <Button fullWidth submit {disabled}>Verify</Button>
-                </FormItem>
-                {#if enabledFactors.length > 1}
-                    <span class="with-separators eyebrow-heading-3">or</span>
-                    <div class="u-flex-vertical u-gap-8">
-                        {#if factors.totp && challengeType != null && challengeType != AuthenticationFactor.Totp}
-                            <FormItem>
-                                <Button
-                                    secondary
-                                    fullWidth
-                                    {disabled}
-                                    on:click={() => createChallenge(AuthenticationFactor.Totp)}>
-                                    <span
-                                        class="icon-device-mobile u-font-size-20"
-                                        aria-hidden="true" />
-                                    <span class="text">Authenticator app</span>
-                                </Button>
-                            </FormItem>
-                        {/if}
-                        {#if factors.email && challengeType != AuthenticationFactor.Email}
-                            <FormItem>
-                                <Button
-                                    secondary
-                                    fullWidth
-                                    {disabled}
-                                    on:click={() => createChallenge(AuthenticationFactor.Email)}>
-                                    <span class="icon-mail u-font-size-20" aria-hidden="true" />
-                                    <span class="text">Email verification</span>
-                                </Button>
-                            </FormItem>
-                        {/if}
-                        {#if factors.phone && challengeType != AuthenticationFactor.Phone}
-                            <FormItem>
-                                <Button
-                                    secondary
-                                    fullWidth
-                                    {disabled}
-                                    on:click={() => createChallenge(AuthenticationFactor.Phone)}>
-                                    <span class="icon-chat-alt u-font-size-20" aria-hidden="true" />
-                                    <span class="text">Phone verification</span>
-                                </Button>
-                            </FormItem>
-                        {/if}
-                        {#if factors.recoveryCode && challengeType != AuthenticationFactor.Recoverycode}
-                            <FormItem>
-                                <Button
-                                    text
-                                    fullWidth
-                                    {disabled}
-                                    on:click={() =>
-                                        createChallenge(AuthenticationFactor.Recoverycode)}>
-                                    <span class="text">Use recovery code</span>
-                                </Button>
-                            </FormItem>
-                        {/if}
-                    </div>
-                {/if}
-            </FormList>
+        <Form onSubmit={submit} class="body-text-1">
+            <MfaChallengeFormList {factors} bind:challenge bind:code bind:disabled />
         </Form>
     </svelte:fragment>
 </Unauthenticated>