Skip to main content

​
Summary

useSyncMfaFlow ensures the correct MFA screen is shown after page refresh when a user has pending MFA actions. It runs once after the SDK finishes loading, resets on logout, and either:
  • Shows the default MFA UI flow (enrollment/verification or backup codes), or
  • Invokes a provided handler to let you drive a custom MFA experience.

​
Parameters

  • handler?: () => Promise<void>
    Optional callback to run in custom UI mode. When provided, the default UI is suppressed and your handler is called exactly once to orchestrate MFA (e.g., fetch devices, enroll, verify, or show backup codes).

​
Returns

  • void
    The hook has side effects: toggles the auth flow UI, navigates backup codes view, or runs your custom UI handler. It runs only after the SDK is loaded and when the user has pending MFA actions.

​
Usage

  • UI mode (default MFA UI managed by the SDK):
import { useSyncMfaFlow } from '@dynamic-labs/sdk-react-core';

export function App() {
  // When the user has pending MFA, this will open the MFA flow UI automatically.
  useSyncMfaFlow();

  return <div>...</div>;
}
  • Custom UI mode (you control the flow with your own UI):
import { useSyncMfaFlow, useMfa, useDynamicContext } from '@dynamic-labs/sdk-react-core';

export function CustomMfa() {
  const { getUserDevices, addDevice, getRecoveryCodes } = useMfa();
  const { userWithMissingInfo } = useDynamicContext();

  useSyncMfaFlow({
    handler: async () => {
      if (userWithMissingInfo?.scope?.includes('requiresAdditionalAuth')) {
        const devices = await getUserDevices();
        if (devices.length === 0) {
          const { uri, secret } = await addDevice();
          // show QR code using uri/secret, then prompt for OTP verification
        } else {
          // prompt for OTP verification
        }
      } else {
        const codes = await getRecoveryCodes();
        // display backup codes, then ask user to acknowledge
      }
    },
  });

  return <div>...</div>;
}