From 1460ebd95e3e765bd6be40ec12b426d5124d0f44 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 6 May 2024 16:47:22 -0700
Subject: [PATCH 01/12] feat(auth): show notification when MFA is
 enabled/disabled

---
 src/routes/console/account/updateMfa.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index e15dc392ca..ff4ccff5ca 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -24,6 +24,10 @@
         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({

From fb017686526475343ed13c169f709f5aa5857b74 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 7 May 2024 16:46:26 -0700
Subject: [PATCH 02/12] feat(auth): rename recovery codes file download to
 appwrite-backups.txt

This helps clarify it's for appwrite.
---
 src/routes/console/account/mfaRecoveryCodes.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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" />

From 184f2ecfe7ff966d4ba7127e3de32dbe489c4c87 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 7 May 2024 17:05:24 -0700
Subject: [PATCH 03/12] feat(auth): only show "Successfully logged in." if MFA
 not required

It's weird to show the "Successfully logged in." message when the user
is prompted for verification because they aren't fully logged in yet.
---
 src/lib/layout/header.svelte                |  5 +++--
 src/routes/+layout.ts                       |  3 ++-
 src/routes/console/account/updateMfa.svelte |  9 ++++++++-
 src/routes/login/+page.svelte               | 14 ++++++++------
 4 files changed, 21 insertions(+), 10 deletions(-)

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/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index ff4ccff5ca..8949db486e 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -67,6 +67,10 @@
             trackError(error, Submit.AccountRecoveryCodesUpdate);
         }
     }
+
+    $: if (!showRecoveryCodes) {
+        codes = null;
+    }
 </script>
 
 <CardGrid>
@@ -194,7 +198,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..8e4f4bca5b 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,17 +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');

From 3eb6607c417b4ee69b0937db8d241383ad2f1610 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 10 May 2024 22:51:54 -0700
Subject: [PATCH 04/12] fix(auth): fix event tracking on login

---
 src/routes/login/+page.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 8e4f4bca5b..11cedbfccf 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -39,7 +39,6 @@
                 return;
             }
 
-
             if ($page.url.searchParams) {
                 const redirect = $page.url.searchParams.get('redirect');
                 $page.url.searchParams.delete('redirect');
@@ -57,7 +56,7 @@
                 type: 'error',
                 message: error.message
             });
-            trackError(error, Submit.AccountCreate);
+            trackError(error, Submit.AccountLogin);
         }
     }
 

From 95096ea2641af9619ebdcbb89cb0ef93d3d4d881 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 7 May 2024 17:06:53 -0700
Subject: [PATCH 05/12] refactor(auth): move mfa challenge to its own component

This will allow us to reuse the component in other places.
---
 src/lib/components/index.ts                   |   1 +
 .../components/mfaChallengeFormList.svelte    | 134 +++++++++++++++++
 src/routes/mfa/+page.svelte                   | 137 ++----------------
 3 files changed, 149 insertions(+), 123 deletions(-)
 create mode 100644 src/lib/components/mfaChallengeFormList.svelte

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/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>

From be527f8c197594af5d3b813bca5755c656d04bf3 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 8 May 2024 09:33:46 -0700
Subject: [PATCH 06/12] feat(auth): hide MFA methods and recovery if MFA is
 disabled

---
 src/routes/console/account/updateMfa.svelte | 145 ++++++++++----------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index 8949db486e..447a2340b8 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -95,99 +95,102 @@
                         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 on:click={() => (showDelete = true)}>Delete</Button>
+                            {:else}
+                                <Button secondary on:click={() => (showSetup = true)}>Add</Button>
+                            {/if}
+                        </div>
                     </div>
-                {/if}
 
-                {#if $factors.phone}
+                    {#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>
+                    {/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>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                </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">Recovery</EyebrowHeading>
+                    </div>
                     <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-send" aria-hidden="true" />
+                                <span class="icon-lock-open" 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>
+                                <span class="u-bold">Recovery codes</span>
+                                <span
+                                    >Use in case you can't receive two-factor authentication codes.</span>
                             </div>
                         </div>
-                    </div>
-                {/if}
-            </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">Recovery</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-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 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 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}
         </div>
     </svelte:fragment>
 </CardGrid>

From 264ce68551b28cb8d6215c0a882179c9c1f5eeac Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 9 May 2024 15:27:58 -0700
Subject: [PATCH 07/12] feat(auth): only show MFA recovery codes after a factor
 is enabled

---
 src/routes/console/account/updateMfa.svelte | 69 ++++++++++++---------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index 447a2340b8..6754f5355b 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -20,6 +20,11 @@
     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);
@@ -156,40 +161,44 @@
                     {/if}
                 </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">Recovery</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-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="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="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-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 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>

From 3e7eb802292a47968003d0f137cd9255af2ceec4 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 10 May 2024 22:38:14 -0700
Subject: [PATCH 08/12] fix(elements): allow InputDigits to auto submit again

If a user inputs an incorrect code, deletes what they put, and then
enters a different code, the InputDigits component should auto submit
again if autoSubmit is true.
---
 src/lib/elements/forms/inputDigits.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index 0610df78fb..a0196a0b89 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -24,6 +24,10 @@
         onValueChange: ({ next }) => {
             value = next.join('');
 
+            if (value.length < length) {
+                autoSubmitted = false;
+            }
+
             if (autoSubmit && value.length === length && !autoSubmitted) {
                 autoSubmitted = true;
                 const firstInputElement = element.querySelector('input');

From fdb97955259c3a0bdc631f21421343d9a4c1ca61 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 10 May 2024 22:40:01 -0700
Subject: [PATCH 09/12] fix(elements): fix InputDigits undefined element error

If the InputDigits component is removed, the element will be undefined
but the onValueChange callback may still trigger. This change ensures
an element is found to prevent calling querySelector on undefined.
---
 src/lib/elements/forms/inputDigits.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index a0196a0b89..c822d50bbb 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -28,7 +28,7 @@
                 autoSubmitted = false;
             }
 
-            if (autoSubmit && value.length === length && !autoSubmitted) {
+            if (element && autoSubmit && value.length === length && !autoSubmitted) {
                 autoSubmitted = true;
                 const firstInputElement = element.querySelector('input');
                 firstInputElement?.form.requestSubmit();

From ce1ffb600f91510c8d9698b961903841c1349547 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 10 May 2024 22:44:36 -0700
Subject: [PATCH 10/12] feat(auth): allow using other methods to regenerate
 recovery codes

---
 .../console/account/mfaRegenerateCodes.svelte | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

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>

From 72f1563c830799ec6e779209d252520c0fad9ae8 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 10 May 2024 22:46:12 -0700
Subject: [PATCH 11/12] fix(auth): await auth to prevent console.variables()
 from throwing

---
 src/routes/console/+layout.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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);
 

From 0b9172e3509a7c0b7d2ad4b34e38099be58e94d3 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 13 May 2024 16:41:35 -0700
Subject: [PATCH 12/12] fix(auth): remove margins on account MFA text buttons
 on mobile

---
 src/routes/console/account/updateMfa.svelte | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index 6754f5355b..a257865f65 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -121,7 +121,15 @@
                         </div>
                         <div class="method-button">
                             {#if $factors.totp}
-                                <Button text on:click={() => (showDelete = true)}>Delete</Button>
+                                <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}
@@ -184,9 +192,14 @@
                             <div class="method-button">
                                 {#if $factors.recoveryCode}
                                     <Button
-                                        class="method-button"
+                                        class="method-button is-not-mobile"
                                         text
-                                        secondary
+                                        on:click={() => (showRegenerateRecoveryCodes = true)}
+                                        >Regenerate</Button>
+                                    <Button
+                                        class="method-button is-only-mobile"
+                                        text
+                                        noMargin
                                         on:click={() => (showRegenerateRecoveryCodes = true)}
                                         >Regenerate</Button>
                                 {:else}