Real-Time Email Validation API:
The Complete SaaS Integration Guide

// hooks/useEmailValidation.ts
import { useState, useCallback } from 'react';
import { debounce } from 'lodash';

export function useEmailValidation() {
  const [validation, setValidation] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const validateEmail = useCallback(
    debounce(async (email) => {
      if (!email || email.length < 3) {
        setValidation(null);
        return;
      }

      setIsLoading(true);
      try {
        const response = await fetch('/api/validate-email', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email }),
        });

        const result = await response.json();
        setValidation(result);
      } catch (error) {
        console.error('Email validation error:', error);
        setValidation({
          isValid: false,
          risk: 'high',
          reason: 'Validation service unavailable',
        });
      } finally {
        setIsLoading(false);
      }
    }, 300),
    []
  );

  return { validation, isLoading, validateEmail };
}

// components/EmailInput.tsx
import React, { useEffect } from 'react';
import { useEmailValidation } from '../hooks/useEmailValidation';

export function EmailInput({ value, onChange, onBlur, placeholder }) {
  const { validation, isLoading, validateEmail } = useEmailValidation();

  useEffect(() => {
    if (value) {
      validateEmail(value);
    }
  }, [value, validateEmail]);

  const getValidationColor = () => {
    if (!validation) return 'border-gray-300';
    if (validation.risk === 'low') return 'border-green-500';
    if (validation.risk === 'medium') return 'border-yellow-500';
    return 'border-red-500';
  };

  return (
    <div className="relative">
      <input
        type="email"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onBlur={onBlur}
        placeholder={placeholder}
        className={`
          w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500
          ${getValidationColor()} ${isLoading ? 'opacity-75' : ''}
        `}
      />
      {isLoading && (
        <div className="absolute right-3 top-3">
          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"></div>
        </div>
      )}
      <div className="mt-1">
        {validation?.risk === 'low' && (
          <span className="text-green-600 text-sm">✓ Valid email address</span>
        )}
        {validation?.risk === 'medium' && validation?.suggestions && (
          <span className="text-yellow-600 text-sm">
            Did you mean {validation.suggestions[0]}?
          </span>
        )}
        {validation?.risk === 'high' && (
          <span className="text-red-600 text-sm">{validation.reason}</span>
        )}
      </div>
    </div>
  );
}

// services/EmailValidationService.js
const axios = require('axios');
const Redis = require('redis');

class EmailValidationService {
  constructor() {
    this.apiKey = process.env.EMAIL_CHECK_API_KEY;
    this.baseUrl = 'https://api.email-check.app';
    this.redis = Redis.createClient(process.env.REDIS_URL);
    this.cacheExpiry = 3600; // 1 hour
  }

  async validateEmail(email, options = {}) {
    const cacheKey = `email_validation:${email}`;

    // Check cache first
    const cached = await this.redis.get(cacheKey);
    if (cached) return JSON.parse(cached);

    try {
      const result = await this.makeApiCall(email, options);
      await this.redis.setex(cacheKey, this.cacheExpiry, JSON.stringify(result));
      return result;
    } catch (error) {
      console.error('Email validation failed:', { email, error: error.message });
      throw new Error('Email validation service temporarily unavailable');
    }
  }

  async makeApiCall(email, options) {
    const params = new URLSearchParams({
      email: email,
      verifyMx: 'true',
      verifySmtp: 'true',
      detectName: 'true',
      checkDomainAge: 'true',
      ...options
    });

    const response = await axios.get(`${this.baseUrl}/v1-get-email-details?${params}`, {
      headers: {
        'accept': 'application/json',
        'x-api-key': this.apiKey,
        'user-agent': 'YourSaaSApp/1.0'
      },
      timeout: 10000,
    });

    return this.transformResponse(response.data);
  }

  transformResponse(data) {
    return {
      email: data.email,
      isValid: data.validFormat && data.validMx,
      isDeliverable: data.validSmtp,
      score: data.score || 0,
      risk: this.calculateRisk(data),
      details: {
        domain: data.domain,
        isDisposable: data.disposable,
        isFreeProvider: data.freeProvider,
        suggestions: data.suggestions || []
      }
    };
  }

  calculateRisk(data) {
    let riskScore = 0;
    if (data.disposable) riskScore += 40;
    if (data.freeProvider) riskScore += 20;
    if (!data.validSmtp) riskScore += 50;

    if (riskScore >= 50) return 'high';
    if (riskScore >= 25) return 'medium';
    return 'low';
  }
}

module.exports = EmailValidationService;