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
  }
  
  // phone is always required by the API; id narrows to one specific OTP.
  async verifyOTP(phone, code, id) {
    const requestBody = { phone, code, id };

    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(phone);

        return {
          success: true,
          verified: true,
          data: data.data
        };
      }

      // data.error is a flat string code — no nested details object.
      switch (data.error) {
        case 'INVALID_OTP': {
          const remaining = data.data?.attemptsRemaining;
          this.trackAttempt(phone, 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':
          // 403 — this OTP is now permanently blocked.
          this.lockOTP(phone);

          return {
            success: false,
            locked: true,
            message: 'Too many failed attempts. Please request a new code.'
          };

        case 'OTP_EXPIRED':
          return {
            success: false,
            expired: true,
            message: 'This code has expired. Please request a new one.'
          };

        default:
          return {
            success: false,
            error: data.error,
            message: data.message
          };
      }

    } catch (error) {
      return {
        success: false,
        error: 'NETWORK_ERROR',
        message: 'Verification failed. Please try again.'
      };
    }
  }

  trackAttempt(phone, remaining) {
    this.attempts.set(phone, {
      remaining,
      lastAttempt: new Date()
    });
  }

  clearAttempts(phone) {
    this.attempts.delete(phone);
  }

  lockOTP(phone) {
    this.attempts.set(phone, {
      locked: true,
      lastAttempt: new Date()
    });
  }

  getAttemptStatus(phone) {
    return this.attempts.get(phone) || 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);

    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>
  );
}