Next.js Email Verification

// app/api/validate/route.ts
import { NextRequest, NextResponse } from 'next/server';

interface ValidationResponse {
  email: string;
  status: 'deliverable' | 'undeliverable' | 'unknown' | 'accept_all';
  suggestion?: string;
  disposable: boolean;
  roleBased: boolean;
  freeProvider: boolean;
  mxRecords: boolean;
  smtpCheck: boolean;
  riskScore: number;
}

export async function POST(request: NextRequest) {
  const { email } = await request.json();

  if (!email || typeof email !== 'string') {
    return NextResponse.json(
      { error: 'Email is required' },
      { status: 400 }
    );
  }

  const response = await fetch(
    'https://api.email-check.app/v1/validate',
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.EMAIL_CHECK_API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ email })
    }
  );

  const result: ValidationResponse = await response.json();

  // Block disposable and role-based emails at submission
  if (result.disposable || result.roleBased) {
    return NextResponse.json({
      valid: false,
      reason: result.disposable
        ? 'disposable_email'
        : 'role_based_email'
    });
  }

  // Allow catch-all and accept_all with a warning
  if (result.status === 'accept_all' || result.status === 'unknown') {
    return NextResponse.json({
      valid: true,
      email: result.suggestion || email,
      warning: 'delivery_not_guaranteed',
      riskScore: result.riskScore
    });
  }

  return NextResponse.json({
    valid: result.status === 'deliverable',
    email: result.suggestion || email,
    riskScore: result.riskScore
  });
}

// components/email-verification-input.tsx
'use client';
import { useState, useCallback, useRef } from 'react';

interface ValidationResult {
  valid: boolean;
  email: string;
  suggestion?: string;
  warning?: string;
  reason?: string;
}

export function EmailVerificationInput({
  value,
  onChange,
  onSubmit
}: {
  value: string;
  onChange: (email: string) => void;
  onSubmit: () => void;
}) {
  const [status, setStatus] = useState<
    'idle' | 'validating' | 'valid' | 'invalid' | 'warning'
  >('idle');
  const [suggestion, setSuggestion] = useState('');
  const [message, setMessage] = useState('');
  const debounceRef = useRef<NodeJS.Timeout>();

  const validate = useCallback(async (email: string) => {
    if (!email.includes('@')) {
      setStatus('idle');
      return;
    }

    setStatus('validating');

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

      const result: ValidationResult = await response.json();

      if (result.valid) {
        if (result.warning) {
          setStatus('warning');
          setMessage('This mailbox may not receive all emails');
        } else {
          setStatus('valid');
          setMessage('');
        }
      } else {
        setStatus('invalid');
        if (result.reason === 'disposable_email') {
          setMessage('Please use a permanent email address');
        } else if (result.reason === 'role_based_email') {
          setMessage('Please use a personal email address');
        } else {
          setMessage('Please enter a valid email address');
        }
      }

      if (result.suggestion) {
        setSuggestion(result.suggestion);
      }
    } catch {
      setStatus('idle');
    }
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const email = e.target.value;
    onChange(email);
    setSuggestion('');

    clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(
      () => validate(email),
      400
    );
  };

  const acceptSuggestion = () => {
    onChange(suggestion);
    setSuggestion('');
    validate(suggestion);
  };

  return (
    <div className="space-y-2">
      <div className="relative">
        <input
          type="email"
          value={value}
          onChange={handleChange}
          placeholder="you@example.com"
          className="w-full px-4 py-3 border rounded-lg
            focus:outline-none focus:ring-2"
        />
        {status === 'validating' && (
          <span className="absolute right-3 top-3
            loading loading-spinner loading-sm" />
        )}
      </div>

      {suggestion && (
        <button
          type="button"
          onClick={acceptSuggestion}
          className="text-sm text-blue-600 hover:underline"
        >
          Did you mean {suggestion}?
        </button>
      )}

      {message && status === 'invalid' && (
        <p className="text-sm text-red-600">{message}</p>
      )}
      {message && status === 'warning' && (
        <p className="text-sm text-amber-600">{message}</p>
      )}
    </div>
  );
}

// app/(auth)/signup/_components/signup-form.tsx
'use client';
import { useForm } from 'react-hook-form';
import { EmailVerificationInput } from
  '@/components/email-verification-input';

interface SignupFormData {
  name: string;
  email: string;
  password: string;
  company?: string;
}

async function validateEmail(email: string): Promise<boolean> {
  const response = await fetch('/api/validate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email })
  });
  const result = await response.json();
  return result.valid;
}

export function SignupForm() {
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors, isSubmitting }
  } = useForm<SignupFormData>({
    defaultValues: {
      name: '',
      email: '',
      password: '',
      company: ''
    }
  });

  const emailValue = watch('email');

  const onSubmit = async (data: SignupFormData) => {
    // Double-check server-side before creating account
    const isValid = await validateEmail(data.email);
    if (!isValid) {
      throw new Error('Invalid email address');
    }
    await createAccount(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      {/* Name field */}
      <input
        {...register('name', { required: 'Name is required' })}
        placeholder="Full name"
      />

      {/* Email with real-time verification */}
      <div>
        <input
          {...register('email', {
            required: 'Email is required',
            pattern: {
              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
              message: 'Enter a valid email format'
            },
            validate: validateEmail
          })}
          placeholder="you@example.com"
        />
        {errors.email && (
          <p className="text-red-600 text-sm">
            {errors.email.message}
          </p>
        )}
      </div>

      {/* Password field */}
      <input
        {...register('password', {
          required: 'Password is required',
          minLength: {
            value: 8,
            message: 'Password must be at least 8 characters'
          }
        })}
        type="password"
        placeholder="Create a password"
      />

      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full bg-blue-600 text-white py-3
          rounded-lg font-semibold disabled:opacity-50"
      >
        {isSubmitting ? 'Creating account...' : 'Create Account'}
      </button>
    </form>
  );
}

// Bulk validation via API for existing user lists
// Pass emails as an array for batch processing

const response = await fetch(
  'https://api.email-check.app/v1/validate/bulk',
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.EMAIL_CHECK_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      emails: [
        'user1@example.com',
        'user2@gmial.com',
        'user3@company.com',
        'test@10minutemail.com'
      ]
    })
  }
);

const results = await response.json();

// results.status contains breakdown:
// - deliverable:  emails confirmed valid
// - undeliverable: emails that bounce
// - disposable:    temporary email services
// - accept_all:    catch-all domains
// - unknown:       could not verify

// Download cleaned list from the dashboard:
// 1. Upload your CSV (name, email columns)
// 2. Choose validation checks to run
// 3. Download results with columns:
//    email, status, suggestion, riskScore, disposable
// 4. Import cleaned list back to your CRM/database

// .env.local (never commit this file)
EMAIL_CHECK_API_KEY=your_production_api_key_here

// For Next.js App Router, the key is automatically
// available in server components and API routes
// via process.env.EMAIL_CHECK_API_KEY

// .env.example (commit this)
EMAIL_CHECK_API_KEY=your_api_key_here

// next.config.ts - if using the key in client code
// (not recommended - use API route proxy instead)
// next.config.ts
const nextConfig = {
  env: {
    NEXT_PUBLIC_API_URL: process.env.EMAIL_CHECK_API_URL
  }
};