useMfa()

Hook for managing multi-factor authentication (MFA) methods. Supports TOTP, Email OTP, and WebAuthn.

Overview

The useMfa() hook provides methods for fetching MFA methods, registering new methods (TOTP, Email OTP, WebAuthn), confirming method registration, removing methods, and setting primary methods. Requires the user to be authenticated.

Basic Usage

'use client';
import { useMfa, useAuth } from 'authsafe-nextjs';

export default function MfaSettings() {
  const { isAuthenticated } = useAuth();
  const { methods, fetchMethods, registerMethod } = useMfa();

  if (!isAuthenticated) return null;

  return (
    <div>
      <h2>MFA Methods</h2>
      {methods.map(method => (
        <p key={method.id}>{method.type}</p>
      ))}
      <button onClick={() => registerMethod('totp')}>Add TOTP</button>
    </div>
  );
}

Best Practices

Always check isAuthenticated before showing MFA settings
Use fetchMethods() to refresh the list after adding/removing methods
Support multiple MFA types for better security flexibility

useMfa()

Hook for managing multi-factor authentication (MFA) methods. Supports TOTP, Email OTP, and WebAuthn.

Overview

Basic Usage

'use client';
import { useMfa, useAuth } from 'authsafe-nextjs';

export default function MfaSettings() {
  const { isAuthenticated } = useAuth();
  const { methods, fetchMethods, registerMethod } = useMfa();

  if (!isAuthenticated) return null;

  return (
    <div>
      <h2>MFA Methods</h2>
      {methods.map(method => (
        <p key={method.id}>{method.type}</p>
      ))}
      <button onClick={() => registerMethod('totp')}>Add TOTP</button>
    </div>
  );
}

Best Practices

Always check isAuthenticated before showing MFA settings
Use fetchMethods() to refresh the list after adding/removing methods
Support multiple MFA types for better security flexibility