Skip to Content
DocumentationDemonstrationStep-up AuthStep 3: Open the MFA modal

Step 3: Open the MFA modal

⏱ 5 min

Trigger the MFA verification modal with a single function call

Open MFA Modal

const result = await transcodes.openAuthIdpModal({
  resource: 'admin',
  action: 'read',
});
 
if (result.success && result.payload[0]?.success) {
  console.log('MFA verified successfully');
  // Proceed with sensitive action
}

MFA Modal Options

Response Structure

{
  success: boolean;
  payload: [{
    success: boolean;
    sid?: string;      // Step-up Session ID
    error?: string;
    timestamp: number;
    action?: string;
  }];
}

Supported MFA Methods

MethodDescriptionUser Experience
TOTPTime-based one-time passwordEnter 6-digit code from authenticator app
Email OTPEmail verification codeEnter 6-digit code sent to email
Hardware KeyYubiKey, FIDO2 keysTap or insert security key

Usage Patterns

Protect Admin Panel

async function openAdminPanel() {
  const mfaResult = await transcodes.openAuthIdpModal({
    resource: 'admin',
    action: 'read',
  });
  
  if (!mfaResult.success || !mfaResult.payload[0]?.success) {
    alert('MFA verification required to access admin panel');
    return;
  }
  
  // MFA verified - show admin panel
  window.location.href = '/admin';
}

Protect Sensitive Actions

async function deleteAccount() {
  // Confirm with user first
  if (!confirm('Are you sure you want to delete your account?')) {
    return;
  }
  
  // Require MFA verification
  const mfaResult = await transcodes.openAuthIdpModal({
    resource: 'users',
    action: 'delete',
    forceStepUp: true,
  });
  
  if (!mfaResult.success || !mfaResult.payload[0]?.success) {
    alert('MFA verification required for account deletion');
    return;
  }
  
  // Proceed with deletion
  await api.deleteAccount();
}

Framework Examples

import { useState } from 'react';
 
function AdminButton() {
  const [loading, setLoading] = useState(false);
 
  const handleAdminAccess = async () => {
    setLoading(true);
    
    try {
      const mfaResult = await transcodes.openAuthIdpModal({
        resource: 'admin',
        action: 'read',
      });
      
      if (mfaResult.success && mfaResult.payload[0]?.success) {
        window.location.href = '/admin';
      }
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <button onClick={handleAdminAccess} disabled={loading}>
      {loading ? 'Verifying...' : 'Access Admin Panel'}
    </button>
  );
}

Error Handling

try {
  const mfaResult = await transcodes.openAuthIdpModal({
    resource: 'sensitive_action',
    action: 'delete',
  });
  
  if (!mfaResult.success || !mfaResult.payload[0]?.success) {
    // User cancelled or verification failed
    console.log('MFA not completed');
    return;
  }
  
  // Success - proceed with action
} catch (error) {
  console.error('MFA modal error:', error);
}

What’s Next

Next: Step 4: Handle the MFA response

Last updated on
Step 2: Load the SDK (CDN or npm)Step 4: Handle the MFA response