How to fix mfa_challenge_expired: MFA challenge has expired in Supabase

// CORRECT: Create challenge, then verify
async function verifyMfaCode(factorId, userCode) {
  try {
    // Step 1: Create a fresh challenge
    const { data: challengeData, error: challengeError } =
      await supabase.auth.mfa.challenge({ factorId });

    if (challengeError) {
      console.error('Challenge creation failed:', challengeError);
      return { success: false, error: 'Failed to create MFA challenge' };
    }

    // Step 2: Immediately verify with the fresh challenge
    const { data, error } = await supabase.auth.mfa.verify({
      factorId: factorId,
      challengeId: challengeData.id,  // Use the newly created challenge
      code: userCode
    });

    if (error) {
      console.error('MFA verification failed:', error.message);
      return { success: false, error: error.message };
    }

    return { success: true, data: data };
  } catch (err) {
    console.error('MFA error:', err);
    return { success: false, error: 'An unexpected error occurred' };
  }
}

// BAD: Storing challenge ID and using it later
let cachedChallengeId = null;

async function requestMfaChallenge(factorId) {
  const { data } = await supabase.auth.mfa.challenge({ factorId });
  cachedChallengeId = data.id;  // DON'T cache this
  return cachedChallengeId;
}

// ... later, user submits code ...
async function verifyStoredChallenge(factorId, code) {
  // This will fail if more than 5-10 minutes have passed
  const { data, error } = await supabase.auth.mfa.verify({
    factorId,
    challengeId: cachedChallengeId,  // EXPIRED!
    code
  });
}

// GOOD: Create challenge and verify immediately
async function verifyMfaCode(factorId, code) {
  const { data: challengeData } = await supabase.auth.mfa.challenge({ factorId });

  const { data, error } = await supabase.auth.mfa.verify({
    factorId,
    challengeId: challengeData.id,  // Fresh challenge
    code
  });

  return { data, error };
}

import { useState, useEffect } from 'react';

function MfaChallengeForm({ factorId, onSuccess }) {
  const [code, setCode] = useState('');
  const [timeRemaining, setTimeRemaining] = useState(600); // 10 minutes in seconds
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeRemaining(prev => {
        if (prev <= 1) {
          setError('Challenge expired. Please try again.');
          clearInterval(interval);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (timeRemaining <= 0) {
      setError('Challenge has expired. Please try again.');
      return;
    }

    setLoading(true);
    setError(null);

    try {
      // Create fresh challenge
      const { data: challengeData, error: challengeError } =
        await supabase.auth.mfa.challenge({ factorId });

      if (challengeError) throw challengeError;

      // Verify immediately
      const { data, error } = await supabase.auth.mfa.verify({
        factorId,
        challengeId: challengeData.id,
        code
      });

      if (error) {
        setError(error.message);
        setCode('');
      } else {
        onSuccess(data);
      }
    } catch (err) {
      setError('Failed to verify MFA code');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="Enter 6-digit code"
        maxLength={6}
        disabled={loading || timeRemaining <= 0}
      />

      <div style={{ fontSize: '0.9em', color: timeRemaining < 120 ? 'red' : 'gray' }}>
        Time remaining: {formatTime(timeRemaining)}
      </div>

      {error && <div style={{ color: 'red' }}>{error}</div>}

      <button type="submit" disabled={loading || timeRemaining <= 0}>
        {loading ? 'Verifying...' : 'Verify'}
      </button>
    </form>
  );
}

class MfaManager {
  constructor(factorId) {
    this.factorId = factorId;
    this.challengeId = null;
    this.challengeCreatedAt = null;
    this.CHALLENGE_LIFETIME = 600000; // 10 minutes in milliseconds
    this.RENEWAL_THRESHOLD = 120000; // Renew if less than 2 minutes remain
  }

  async getValidChallenge() {
    const now = Date.now();

    // If no challenge exists, create one
    if (!this.challengeId) {
      return this.createChallenge();
    }

    // If challenge is getting close to expiration, renew it
    const ageMs = now - this.challengeCreatedAt;
    if (ageMs > (this.CHALLENGE_LIFETIME - this.RENEWAL_THRESHOLD)) {
      console.log('Challenge approaching expiration, creating new one');
      return this.createChallenge();
    }

    // Challenge is still valid
    return this.challengeId;
  }

  async createChallenge() {
    try {
      const { data, error } = await supabase.auth.mfa.challenge({
        factorId: this.factorId
      });

      if (error) throw error;

      this.challengeId = data.id;
      this.challengeCreatedAt = Date.now();
      return this.challengeId;
    } catch (err) {
      console.error('Failed to create challenge:', err);
      throw err;
    }
  }

  async verify(code) {
    const challengeId = await this.getValidChallenge();

    const { data, error } = await supabase.auth.mfa.verify({
      factorId: this.factorId,
      challengeId,
      code
    });

    return { data, error };
  }

  reset() {
    this.challengeId = null;
    this.challengeCreatedAt = null;
  }
}

// Usage
const mfaManager = new MfaManager(factorId);

// Long flow with multiple steps
await mfaManager.getValidChallenge(); // Creates challenge
// ... user does other things ...
const { data, error } = await mfaManager.verify(userCode); // Automatically renews if needed

async function verifyMfaWithRetry(factorId, code, maxRetries = 3) {
  let attempts = 0;

  while (attempts < maxRetries) {
    try {
      // Create fresh challenge
      const { data: challengeData, error: challengeError } =
        await supabase.auth.mfa.challenge({ factorId });

      if (challengeError) {
        throw new Error(`Challenge creation failed: ${challengeError.message}`);
      }

      // Verify
      const { data, error } = await supabase.auth.mfa.verify({
        factorId,
        challengeId: challengeData.id,
        code
      });

      if (error) {
        // Check if error is due to expired challenge
        if (error.code === 'mfa_challenge_expired') {
          attempts++;
          if (attempts < maxRetries) {
            console.log(`Challenge expired, retrying (attempt ${attempts}/${maxRetries})...`);
            // Retry with new challenge
            continue;
          } else {
            throw new Error('MFA challenge expired. Please request a new code.');
          }
        } else {
          // Other verification errors (e.g., invalid code)
          throw new Error(`Verification failed: ${error.message}`);
        }
      }

      return { success: true, data };
    } catch (err) {
      if (attempts >= maxRetries) {
        return {
          success: false,
          error: err.message,
          expired: err.message.includes('expired')
        };
      }
      attempts++;
    }
  }
}

// Usage
const result = await verifyMfaWithRetry(factorId, userCode);
if (!result.success) {
  if (result.expired) {
    // Show user message to request a new challenge
    showMessage('Your MFA challenge expired. Please request a new code.');
  } else {
    showMessage(result.error);
  }
}

// Server-side logging and monitoring
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(url, key);

interface MfaAttempt {
  userId: string;
  challengeCreatedAt: Date;
  verificationAttemptedAt: Date;
  durationMs: number;
  success: boolean;
  errorCode: string | null;
}

async function recordMfaAttempt(attempt: MfaAttempt) {
  // Log to database for analysis
  await supabase
    .from('mfa_attempts')
    .insert([{
      user_id: attempt.userId,
      challenge_created_at: attempt.challengeCreatedAt,
      verification_attempted_at: attempt.verificationAttemptedAt,
      duration_ms: attempt.durationMs,
      success: attempt.success,
      error_code: attempt.errorCode,
      created_at: new Date()
    }]);

  // Alert if challenge was expired
  if (attempt.errorCode === 'mfa_challenge_expired') {
    console.warn(`User ${attempt.userId} experienced MFA challenge expiration after ${attempt.durationMs}ms`);

    // Could trigger analytics or alerts
    if (attempt.durationMs < 60000) {
      // Expired too quickly - might indicate a bug
      console.error('Challenge expired unexpectedly quickly');
    }
  }
}

// Usage in MFA flow
const startTime = Date.now();
const { data: challengeData } = await supabase.auth.mfa.challenge({ factorId });

// ... user enters code ...
const verificationStartTime = Date.now();
const { data, error } = await supabase.auth.mfa.verify({
  factorId,
  challengeId: challengeData.id,
  code
});

const durationMs = verificationStartTime - startTime;
await recordMfaAttempt({
  userId: user.id,
  challengeCreatedAt: new Date(startTime),
  verificationAttemptedAt: new Date(verificationStartTime),
  durationMs,
  success: !error,
  errorCode: error?.code || null
});