From bc38748acd2482ae917dbddc779b359b60821260 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Wed, 29 Jan 2025 14:21:02 +0700
Subject: [PATCH] Enable TOTP Multi-Factor Authentication in local config and
 improve MFA UI (#121)

---
 apps/web/supabase/config.toml                               | 5 +++++
 package.json                                                | 2 +-
 .../mfa/multi-factor-auth-setup-dialog.tsx                  | 6 +++++-
 .../src/components/multi-factor-challenge-container.tsx     | 4 ----
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/supabase/config.toml b/apps/web/supabase/config.toml
index 594d5a496..65ae2973e 100644
--- a/apps/web/supabase/config.toml
+++ b/apps/web/supabase/config.toml
@@ -49,6 +49,11 @@ jwt_expiry = 3600
 # Allow/disallow new user signups to your project.
 enable_signup = true
 
+# Enable TOTP MFA
+[auth.mfa.totp]
+verify_enabled = true
+enroll_enabled = true
+
 [auth.email]
 # Allow/disallow new user signups via email to your project.
 enable_signup = true
diff --git a/package.json b/package.json
index c9cdcfccb..58b6ac5c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": true,
   "sideEffects": false,
   "engines": {
diff --git a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
index 8eb433f6e..676658215 100644
--- a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
@@ -329,7 +329,11 @@ function FactorQrCode({
   }
 
   return (
-    <div className={'flex flex-col space-y-4'}>
+    <div
+      className={
+        'dark:bg-secondary flex flex-col space-y-4 rounded-lg border p-4'
+      }
+    >
       <p>
         <span className={'text-muted-foreground text-sm'}>
           <Trans i18nKey={'account:multiFactorModalHeading'} />
diff --git a/packages/features/auth/src/components/multi-factor-challenge-container.tsx b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
index d2772fc3a..273eb88ba 100644
--- a/packages/features/auth/src/components/multi-factor-challenge-container.tsx
+++ b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
@@ -87,10 +87,6 @@ export function MultiFactorChallengeContainer({
         })}
       >
         <div className={'flex flex-col space-y-4'}>
-          <span className={'text-muted-foreground text-sm'}>
-            <Trans i18nKey={'account:verifyActivationCodeDescription'} />
-          </span>
-
           <div className={'flex w-full flex-col space-y-2.5'}>
             <div className={'flex flex-col space-y-4'}>
               <If condition={verifyMFAChallenge.error}>