Enable TOTP Multi-Factor Authentication in local config and improve MFA UI (#121)

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

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": {

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

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