Setting Up Multi-Factor Authentication

1
import React from "react";
2
import { useMFA } from "@account-kit/react";
3
4
// Inside your component
5
const { isReady } = useMFA();
6
7
// Only show MFA setup options if available
8
if (isReady) {
9
  // Render MFA setup UI
10
} else {
11
  // User needs to authenticate first
12
}

1
import React, { useState } from "react";
2
import { QRCodeSVG } from "qrcode.react";
3
import { useMFA } from "@account-kit/react";
4
5
function AuthenticatorSetupComponent() {
6
  const { addMFA } = useMFA();
7
  const [qrCodeUrl, setQrCodeUrl] = useState("");
8
  const [factorId, setFactorId] = useState("");
9
10
  const handleSetupAuthenticator = () => {
11
    // Use the mutate method from the mutation result
12
    addMFA.mutate(
13
      {
14
        multiFactorType: "totp", // Technical name for authenticator apps
15
      },
16
      {
17
        onSuccess: (result) => {
18
          // Store the QR code URL and factor ID
19
          setQrCodeUrl(result.multiFactorTotpUrl);
20
          // Store the factor ID which will be needed for verification in the next step
21
          // This ID uniquely identifies the MFA factor being configured
22
          setFactorId(result.multiFactorId);
23
        },
24
        onError: (error) => {
25
          console.error("Failed to set up authenticator app:", error);
26
        },
27
      }
28
    );
29
  };
30
31
  // You can also check loading state directly
32
  const isLoading = addMFA.isPending;
33
34
  return (
35
    <div>
36
      <button onClick={handleSetupAuthenticator} disabled={isLoading}>
37
        {isLoading ? "Setting up..." : "Set Up Authenticator App"}
38
      </button>
39
40
      {qrCodeUrl && (
41
        <div className="qr-container">
42
          <h3>Scan this QR code with your authenticator app</h3>
43
          <QRCodeSVG value={qrCodeUrl} size={200} />
44
          <p>
45
            After scanning, enter the 6-digit code from your authenticator app
46
            to complete setup.
47
          </p>
48
        </div>
49
      )}
50
51
      {/* Display errors if they occur */}
52
      {addMFA.isError && (
53
        <div className="error">Error: {addMFA.error.message}</div>
54
      )}
55
    </div>
56
  );
57
}

1
import React, { useState } from "react";
2
import { useMFA } from "@account-kit/react";
3
4
function VerifyAuthenticatorComponent({
5
  multiFactorId,
6
}: {
7
  multiFactorId: string;
8
}) {
9
  const { verifyMFA } = useMFA();
10
  const [code, setCode] = useState("");
11
12
  const handleVerifyAuthenticator = () => {
13
    verifyMFA.mutate(
14
      {
15
        multiFactorId,
16
        multiFactorCode: code, // The TOTP code from the user's authenticator app
17
      },
18
      {
19
        onSuccess: () => {
20
          // Authenticator setup successful
21
          console.log("MFA setup complete!");
22
        },
23
        onError: (error) => {
24
          // Handle error
25
          console.error("Verification failed:", error);
26
        },
27
      }
28
    );
29
  };
30
31
  // For async/await pattern, you can use mutateAsync
32
  const handleVerifyAsync = async () => {
33
    try {
34
      const result = await verifyMFA.mutateAsync({
35
        multiFactorId,
36
        multiFactorCode: code,
37
      });
38
      console.log("MFA setup complete!", result);
39
    } catch (error) {
40
      console.error("Verification failed:", error);
41
    }
42
  };
43
44
  return (
45
    <div>
46
      <input
47
        type="text"
48
        value={code}
49
        onChange={(e) => setCode(e.target.value)}
50
        placeholder="Enter 6-digit code"
51
        maxLength={6}
52
      />
53
      <button
54
        onClick={handleVerifyAuthenticator}
55
        disabled={verifyMFA.isPending}
56
      >
57
        {verifyMFA.isPending ? "Verifying..." : "Verify Code"}
58
      </button>
59
60
      {verifyMFA.isError && (
61
        <div className="error">Invalid code. Please try again.</div>
62
      )}
63
    </div>
64
  );
65
}

1
import React, { useEffect, useState } from "react";
2
import { useMFA } from "@account-kit/react";
3
import type { MfaFactor } from "@account-kit/signer";
4
5
function ManageMfaComponent() {
6
  const { getMFAFactors, removeMFA } = useMFA();
7
  const [factors, setFactors] = useState<MfaFactor[]>([]);
8
9
  // Fetch all MFA verification methods (factors) for the current user
10
  useEffect(() => {
11
    // Only fetch when component mounts and we're ready
12
    getMFAFactors.mutate(undefined, {
13
      onSuccess: (result) => {
14
        // factors.multiFactors is an array of verification methods
15
        setFactors(result.multiFactors);
16
      },
17
    });
18
  }, [getMFAFactors]);
19
20
  // Remove a TOTP authenticator app by its multiFactorId
21
  const handleRemoveAuthenticator = (multiFactorId: string) => {
22
    removeMFA.mutate(
23
      { multiFactorIds: [multiFactorId] },
24
      {
25
        onSuccess: () => {
26
          console.log("Authenticator removed successfully!");
27
          // Update local state to reflect the removal
28
          setFactors(factors.filter((f) => f.multiFactorId !== multiFactorId));
29
        },
30
      }
31
    );
32
  };
33
34
  // Loading states are available directly from the mutation objects
35
  if (getMFAFactors.isPending) return <div>Loading MFA settings...</div>;
36
37
  return (
38
    <div>
39
      <h2>Your Authentication Methods</h2>
40
41
      {factors.length === 0 ? (
42
        <p>No authenticator apps configured.</p>
43
      ) : (
44
        <ul>
45
          {factors.map((factor) => (
46
            <li key={factor.multiFactorId}>
47
              {factor.multiFactorType === "totp"
48
                ? "Authenticator App"
49
                : factor.multiFactorType}
50
              <button
51
                onClick={() => handleRemoveAuthenticator(factor.multiFactorId)}
52
                disabled={removeMFA.isPending}
53
              >
54
                Remove
55
              </button>
56
            </li>
57
          ))}
58
        </ul>
59
      )}
60
61
      {getMFAFactors.isError && (
62
        <div className="error">
63
          Error loading MFA settings: {getMFAFactors.error.message}
64
        </div>
65
      )}
66
    </div>
67
  );
68
}