docs: make mfa docs more clear

Author: blakecduncan

site/pages/react/mfa/email-magic-link.mdx

@@ -9,7 +9,7 @@ This guide shows you how to implement authentication with Email Magic Link and T
 
 ## Overview
 
-When a user has MFA enabled with an authenticator app (TOTP), the login flow requires two steps:
+When a user has MFA enabled with an authenticator app (TOTP), the login flow requires the following steps:
 
 1. The user enters their email address to request a magic link
 2. If MFA is enabled for their account, they're prompted to enter the 6-digit TOTP code from their authenticator app (e.g., Google Authenticator)
@@ -21,9 +21,10 @@ This two-factor approach provides an additional layer of security beyond a stand
 
 ## Implementation
 
-### Step 1: Send the Magic Link with MFA Handling
+### Step 1: Initialize Authentication and Handle MFA Required Error
 
-When sending a magic link to a user with MFA enabled, you need to handle both parts of the authentication flow:
+First, attempt to authenticate with email. If MFA is required, an error will be thrown.
+You can handle this error by prompting the user to enter their TOTP code.
 
 ```tsx twoslash
 import React from "react";
@@ -32,13 +33,10 @@ import { MfaRequiredError } from "@account-kit/signer";
 import { useState } from "react";
 
 function MagicLinkWithMFA() {
-  const [mfaData, setMfaData] = useState({ email: "", multiFactorId: "" });
-  const [showTotpInput, setShowTotpInput] = useState(false);
-  const [totpCode, setTotpCode] = useState("");
   const { authenticate } = useAuthenticate();
 
-  // When the user submits their email to receive a magic link
-  const handleSendMagicLink = (email: string) => {
+  // Step 1: Handle initial email submission and check for MFA requirement
+  const handleInitialAuthentication = (email: string) => {
     authenticate(
       {
         type: "email",
@@ -56,33 +54,52 @@ function MagicLinkWithMFA() {
           if (error instanceof MfaRequiredError) {
             const { multiFactorId } = error.multiFactors[0];
 
-            // Store this information to use when the user enters their TOTP code
-            setMfaData({ email, multiFactorId });
-            setShowTotpInput(true);
+            // Store the multiFactorId to use when the user enters their TOTP code
+
+            // In step 2, we will prompt the user to enter their TOTP code (from their authenticator app)
+            // and we'll use this multiFactorId to verify the TOTP code
           }
           // Handle other errors
         },
       }
     );
   };
 
-  // Add a handler for the TOTP input
-  const handleTotpChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTotpCode(e.target.value);
-  };
+  return <div>{/* Your UI components here */}</div>;
+}
+```
 
-  // When the user provides the TOTP code
-  const handleMagicLinkWithMFA = () => {
+### Step 2: Submit TOTP Code and Complete Magic Link Authentication
+
+Once we have the MFA data from the first step, we can complete the authentication by submitting the TOTP code with the multiFactorId.
+You must prompt the user to enter their TOTP code (from their authenticator app) and then submit it with the multiFactorId.
+
+```tsx twoslash
+import React from "react";
+import { useAuthenticate } from "@account-kit/react";
+
+// Continuing from the previous component...
+
+function MagicLinkWithMFA() {
+  const { authenticate } = useAuthenticate();
+
+  // Prompt the user to enter their TOTP code (from their authenticator app)
+  // Hardcoded for now, but in a real app you'd get this from the user
+  const totpCode = "123456";
+  const multiFactorId = "123456"; // This is the multiFactorId from the first step
+
+  // Step 2: Submit the TOTP code with multiFactorId to complete the flow
+  const handleMfaSubmission = (email: string) => {
     authenticate(
       {
         type: "email",
         emailMode: "magicLink",
-        email: mfaData.email,
+        email,
         // The multiFactors array tells the authentication system which
         // factor to verify and what code to use
         multiFactors: [
           {
-            multiFactorId: mfaData.multiFactorId,
+            multiFactorId,
             multiFactorCode: totpCode,
           },
         ],
@@ -102,44 +119,46 @@ function MagicLinkWithMFA() {
 }
 ```
 
-### Step 2: Handle the Magic Link Redirect
+### Step 3: Handle the Magic Link Redirect
 
-When the user clicks the magic link in their email, your application needs to handle the redirect and complete the authentication:
+When the user clicks the magic link in their email, your application needs to handle the redirect and complete the authentication.
+The magic link will redirect to your application with a bundle parameter. You must submit this bundle to the `authenticate` function to complete the authentication.
 
 ```tsx twoslash
 import React, { useEffect } from "react";
 import { useAuthenticate } from "@account-kit/react";
 
-// Inside your component
-const { authenticate } = useAuthenticate();
+function MagicLinkRedirect() {
+  const { authenticate } = useAuthenticate();
 
-const handleMagicLinkRedirect = () => {
-  const url = new URL(window.location.href);
-  const bundle = url.searchParams.get("bundle");
+  const handleMagicLinkRedirect = () => {
+    const url = new URL(window.location.href);
+    const bundle = url.searchParams.get("bundle");
 
-  // If there's no bundle parameter, this isn't a magic link redirect
-  if (!bundle) return;
+    // If there's no bundle parameter, this isn't a magic link redirect
+    if (!bundle) return;
 
-  authenticate(
-    {
-      type: "email",
-      bundle,
-    },
-    {
-      onSuccess: () => {
-        // Authentication successful!
-      },
-      onError: (error) => {
-        // Handle error
+    authenticate(
+      {
+        type: "email",
+        bundle,
       },
-    }
-  );
-};
-
-// Call this function when the component mounts
-useEffect(() => {
-  handleMagicLinkRedirect();
-}, []);
+      {
+        onSuccess: () => {
+          // Authentication successful!
+        },
+        onError: (error) => {
+          // Handle error
+        },
+      }
+    );
+  };
+
+  // Call this function when the component mounts
+  useEffect(() => {
+    handleMagicLinkRedirect();
+  }, []);
+}
 ```
 
 ## Next Steps

site/pages/react/mfa/setup-mfa.mdx

@@ -13,17 +13,12 @@ By requiring both a user's primary login (e.g., email OTP, magic link, or social
 Multi-factor authentication requires a primary authentication method (Email OTP, Email Magic Link, or Social Login) to be already set up. See the [React Quickstart](/react/quickstart) guide to set up your primary authentication method first.
 :::
 
-## Overview
-
-Multi-factor authentication adds an extra layer of security by requiring users to verify their identity using multiple methods. With Account Kit, users can use authenticator apps (like Google Authenticator, Authy, or Microsoft Authenticator) as their second security factor.
-
 ## Prerequisites
 
 Before implementing MFA, you need to have:
 
 1. **Set up primary authentication** - MFA requires a primary authentication method to be already set up. Follow the [React Quickstart](/react/quickstart) guide to configure email (OTP or magic link) or social login.
 2. **Working authentication flow** - Ensure users can successfully sign in with your primary authentication method.
-3. **Proper configuration** - In your `config.ts`, make sure you've enabled email or social login in the authentication sections.
 
 :::info
 MFA is an additional security layer that works with your existing authentication system. If you haven't set up basic authentication yet, you won't be able to implement MFA.