Verify OTP

// Secure OTP verification with attempt tracking
class OTPVerifier {
  constructor(apiKey, apiSecret) {
    this.auth = 'Basic ' + btoa(apiKey + ':' + apiSecret);
    this.baseUrl = 'https://api.sendexa.co/v1';
    this.attempts = new Map(); // Track attempts per OTP
  }
  
  async verifyOTP(identifier, code, security = {}) {
    const requestBody = {
      code,
      ...this.parseIdentifier(identifier),
      security: {
        timestamp: new Date().toISOString(),
        ...security
      }
    };
    
    try {
      const response = await fetch(`${this.baseUrl}/otp/verify`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': this.auth
        },
        body: JSON.stringify(requestBody)
      });
      
      const data = await response.json();
      
      if (response.ok) {
        // Clear attempt tracking on success
        this.clearAttempts(identifier);
        
        return {
          success: true,
          verified: true,
          data: data.data
        };
      }
      
      // Handle specific error types
      switch (data.errorType) {
        case 'INVALID_CODE':
          const remaining = data.data.attemptsRemaining;
          this.trackAttempt(identifier, remaining);
          
          return {
            success: false,
            invalid: true,
            remainingAttempts: remaining,
            message: remaining === 1 
              ? 'Invalid code. One attempt remaining!' 
              : `Invalid code. ${remaining} attempts remaining.`
          };
          
        case 'MAX_ATTEMPTS_EXCEEDED':
          this.lockOTP(identifier);
          
          return {
            success: false,
            locked: true,
            message: 'Too many failed attempts. Please request a new code.'
          };
          
        case 'EXPIRED':
          return {
            success: false,
            expired: true,
            message: 'This code has expired. Please request a new one.'
          };
          
        default:
          return {
            success: false,
            error: data.errorType,
            message: data.message
          };
      }
      
    } catch (error) {
      return {
        success: false,
        error: 'NETWORK_ERROR',
        message: 'Verification failed. Please try again.'
      };
    }
  }
  
  parseIdentifier(identifier) {
    if (typeof identifier === 'string') {
      if (identifier.startsWith('otp_')) {
        return { id: identifier };
      } else {
        return { phone: identifier };
      }
    }
    return identifier;
  }
  
  trackAttempt(identifier, remaining) {
    const key = typeof identifier === 'string' ? identifier : identifier.phone;
    this.attempts.set(key, {
      remaining,
      lastAttempt: new Date()
    });
  }
  
  clearAttempts(identifier) {
    const key = typeof identifier === 'string' ? identifier : identifier.phone;
    this.attempts.delete(key);
  }
  
  lockOTP(identifier) {
    const key = typeof identifier === 'string' ? identifier : identifier.phone;
    this.attempts.set(key, {
      locked: true,
      lastAttempt: new Date()
    });
  }
  
  getAttemptStatus(identifier) {
    const key = typeof identifier === 'string' ? identifier : identifier.phone;
    return this.attempts.get(key) || null;
  }
}

// Usage with React component
function OTPInput({ phone, onSuccess, onError }) {
  const [code, setCode] = useState('');
  const [verifying, setVerifying] = useState(false);
  const [remainingAttempts, setRemainingAttempts] = useState(null);
  const [error, setError] = useState('');
  const verifier = useRef(new OTPVerifier('api_key', 'api_secret'));
  
  const handleVerify = async () => {
    if (code.length < 4) return;
    
    setVerifying(true);
    setError('');
    
    const result = await verifier.current.verifyOTP(phone, code, {
      ipAddress: await getClientIP(),
      userAgent: navigator.userAgent
    });
    
    setVerifying(false);
    
    if (result.success) {
      setCode('');
      onSuccess?.(result.data);
    } else {
      if (result.remainingAttempts !== undefined) {
        setRemainingAttempts(result.remainingAttempts);
        setError(result.message);
      } else if (result.locked || result.expired) {
        setError(result.message);
        onError?.(result);
      } else {
        setError(result.message);
      }
    }
  };
  
  return (
    <div className="space-y-4">
      <div>
        <input
          type="text"
          value={code}
          onChange={(e) => setCode(e.target.value.replace(/D/g, ''))}
          placeholder="Enter code"
          className="w-full p-2 border rounded"
          disabled={verifying}
          maxLength={6}
          autoFocus
        />
        
        {remainingAttempts !== null && (
          <p className="text-sm text-yellow-600 mt-1">
            {remainingAttempts} attempt{remainingAttempts !== 1 ? 's' : ''} remaining
          </p>
        )}
        
        {error && (
          <p className="text-sm text-red-600 mt-1">{error}</p>
        )}
      </div>
      
      <button
        onClick={handleVerify}
        disabled={code.length < 4 || verifying}
        className="w-full bg-blue-600 text-white p-2 rounded disabled:opacity-50"
      >
        {verifying ? 'Verifying...' : 'Verify Code'}
      </button>
    </div>
  );
}