Build OTP/2FA with MessageBird Verify API: Complete Vite + React/Vue Guide

// src/messagebirdService.js
import messagebird from 'messagebird';
import dotenv from 'dotenv';

dotenv.config();

// Validate API key presence
if (!process.env.MESSAGEBIRD_API_KEY) {
  console.error('Error: MESSAGEBIRD_API_KEY is not set in .env file');
  process.exit(1);
}

// Initialize MessageBird client
const client = messagebird(process.env.MESSAGEBIRD_API_KEY);

// Configuration from environment variables with defaults
const OTP_CONFIG = {
  timeout: parseInt(process.env.OTP_TIMEOUT) || 300,        // Default: 5 minutes
  tokenLength: parseInt(process.env.OTP_TOKEN_LENGTH) || 6, // Default: 6 digits
  maxAttempts: parseInt(process.env.OTP_MAX_ATTEMPTS) || 3  // Default: 3 attempts
};

/**
 * Generate and send OTP code to phone number using MessageBird Verify API
 * @param {string} phoneNumber - E.164 format phone number (e.g., +14155552671)
 * @returns {Promise<object>} - Verify object with id, status, validUntil
 * @throws {Error} - If verification creation fails
 */
export const generateOTP = async (phoneNumber) => {
  return new Promise((resolve, reject) => {
    // Create verification request with MessageBird
    client.verify.create(phoneNumber, {
      originator: 'YourApp',                              // Sender ID (max 11 chars, alphanumeric not supported in US)
      template: 'Your verification code is %token.',      // %token replaced with generated code
      type: 'sms',                                        // Options: sms, flash, tts (voice), email
      timeout: OTP_CONFIG.timeout,                        // Expiration time in seconds (30-172800)
      tokenLength: OTP_CONFIG.tokenLength,                // Code length (6-10 digits)
      datacoding: 'plain'                                 // Options: plain (GSM), unicode, auto
    }, (error, response) => {
      if (error) {
        console.error('MessageBird Verify creation error:', error);
        // Common errors: invalid number format, insufficient balance, API key issues
        return reject(new Error(error.errors?.[0]?.description || 'Failed to generate OTP'));
      }

      console.log('OTP generated successfully:', {
        id: response.id,
        recipient: response.recipient,
        status: response.status,
        validUntil: response.validUntilDatetime
      });

      resolve({
        verifyId: response.id,
        status: response.status,
        validUntil: response.validUntilDatetime,
        recipient: response.recipient
      });
    });
  });
};

/**
 * Verify OTP code entered by user
 * @param {string} verifyId - The verification ID from generateOTP
 * @param {string} token - The code entered by the user
 * @returns {Promise<object>} - Verification result with status
 * @throws {Error} - If verification fails (wrong code, expired, max attempts)
 */
export const verifyOTP = async (verifyId, token) => {
  return new Promise((resolve, reject) => {
    client.verify.verify(verifyId, token, (error, response) => {
      if (error) {
        console.error('MessageBird verification error:', error);
        // Common errors: token mismatch, expired verification, too many attempts
        const errorMsg = error.errors?.[0]?.description || 'Verification failed';
        return reject(new Error(errorMsg));
      }

      console.log('OTP verified successfully:', {
        id: response.id,
        status: response.status
      });

      resolve({
        verifyId: response.id,
        status: response.status,    // Will be "verified" on success
        recipient: response.recipient
      });
    });
  });
};

/**
 * Get current status of a verification (for checking expiry, attempts)
 * @param {string} verifyId - The verification ID
 * @returns {Promise<object>} - Verification object with current status
 */
export const getVerifyStatus = async (verifyId) => {
  return new Promise((resolve, reject) => {
    client.verify.view(verifyId, (error, response) => {
      if (error) {
        console.error('MessageBird verify status error:', error);
        return reject(new Error(error.errors?.[0]?.description || 'Failed to get status'));
      }

      resolve({
        verifyId: response.id,
        status: response.status,              // sent, verified, expired, failed
        createdAt: response.createdDatetime,
        validUntil: response.validUntilDatetime,
        recipient: response.recipient
      });
    });
  });
};

/**
 * Delete/cancel a verification (useful for cleanup or resend flows)
 * @param {string} verifyId - The verification ID to delete
 */
export const deleteVerification = async (verifyId) => {
  return new Promise((resolve, reject) => {
    client.verify.delete(verifyId, (error) => {
      if (error) {
        console.error('MessageBird verification deletion error:', error);
        return reject(new Error('Failed to delete verification'));
      }
      resolve({ deleted: true });
    });
  });
};

// src/server.js
import express from 'express';
import cors from 'cors';
import rateLimit from 'express-rate-limit';
import dotenv from 'dotenv';
import { generateOTP, verifyOTP, getVerifyStatus } from './messagebirdService.js';

dotenv.config();

const app = express();
const PORT = process.env.PORT || 3001;

// Middleware
app.use(express.json());
app.use(cors({
  origin: process.env.NODE_ENV === 'production'
    ? 'https://your-frontend-domain.com'
    : 'http://localhost:5173'  // Vite default port
}));

// Rate limiting for OTP generation (prevent SMS bombing)
const otpGenerateLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,    // 15 minutes
  max: 5,                       // Max 5 OTP requests per phone per window
  message: { success: false, message: 'Too many OTP requests. Try again later.' },
  standardHeaders: true,
  legacyHeaders: false,
  keyGenerator: (req) => req.body.phoneNumber || req.ip  // Rate limit by phone number
});

// Rate limiting for OTP verification (prevent brute force)
const otpVerifyLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,    // 15 minutes
  max: 10,                      // Max 10 verification attempts per window
  message: { success: false, message: 'Too many verification attempts. Try again later.' },
  standardHeaders: true,
  legacyHeaders: false
});

// Health check endpoint
app.get('/health', (req, res) => {
  res.status(200).json({
    status: 'OK',
    timestamp: new Date().toISOString(),
    service: 'MessageBird OTP API'
  });
});

// --- OTP Generation Endpoint ---
app.post('/api/otp/generate', otpGenerateLimiter, async (req, res) => {
  const { phoneNumber } = req.body;

  // Validate phone number presence
  if (!phoneNumber) {
    return res.status(400).json({
      success: false,
      message: 'Phone number is required'
    });
  }

  // Validate E.164 format (starts with +, followed by 10-15 digits)
  const e164Regex = /^\+[1-9]\d{10,14}$/;
  if (!e164Regex.test(phoneNumber)) {
    return res.status(400).json({
      success: false,
      message: 'Invalid phone number format. Use E.164 format (e.g., +14155552671)'
    });
  }

  try {
    const result = await generateOTP(phoneNumber);

    res.status(200).json({
      success: true,
      message: 'OTP sent successfully',
      data: {
        verifyId: result.verifyId,
        validUntil: result.validUntil,
        status: result.status
      }
    });
  } catch (error) {
    console.error('OTP generation error:', error.message);
    res.status(500).json({
      success: false,
      message: 'Failed to send OTP',
      error: process.env.NODE_ENV === 'development' ? error.message : undefined
    });
  }
});

// --- OTP Verification Endpoint ---
app.post('/api/otp/verify', otpVerifyLimiter, async (req, res) => {
  const { verifyId, token } = req.body;

  // Validate inputs
  if (!verifyId || !token) {
    return res.status(400).json({
      success: false,
      message: 'Verification ID and token are required'
    });
  }

  // Validate token format (should be numeric, length matches config)
  const tokenLength = parseInt(process.env.OTP_TOKEN_LENGTH) || 6;
  if (!/^\d+$/.test(token) || token.length !== tokenLength) {
    return res.status(400).json({
      success: false,
      message: `Token must be ${tokenLength} digits`
    });
  }

  try {
    const result = await verifyOTP(verifyId, token);

    res.status(200).json({
      success: true,
      message: 'Phone number verified successfully',
      data: {
        verifyId: result.verifyId,
        status: result.status,
        recipient: result.recipient
      }
    });
  } catch (error) {
    console.error('OTP verification error:', error.message);

    // Provide specific error messages for common failures
    let statusCode = 400;
    let message = 'Verification failed';

    if (error.message.includes('token does not match') || error.message.includes('invalid')) {
      message = 'Invalid verification code';
    } else if (error.message.includes('expired')) {
      message = 'Verification code has expired';
      statusCode = 410;  // 410 Gone
    } else if (error.message.includes('attempts')) {
      message = 'Maximum verification attempts exceeded';
      statusCode = 429;  // 429 Too Many Requests
    }

    res.status(statusCode).json({
      success: false,
      message,
      error: process.env.NODE_ENV === 'development' ? error.message : undefined
    });
  }
});

// --- OTP Status Check Endpoint ---
app.get('/api/otp/status/:verifyId', async (req, res) => {
  const { verifyId } = req.params;

  if (!verifyId) {
    return res.status(400).json({
      success: false,
      message: 'Verification ID is required'
    });
  }

  try {
    const result = await getVerifyStatus(verifyId);

    res.status(200).json({
      success: true,
      data: result
    });
  } catch (error) {
    console.error('Status check error:', error.message);
    res.status(404).json({
      success: false,
      message: 'Verification not found or expired'
    });
  }
});

// Error handling middleware
app.use((err, req, res, next) => {
  console.error('Unhandled error:', err);
  res.status(500).json({
    success: false,
    message: 'Internal server error'
  });
});

// Start server
app.listen(PORT, () => {
  console.log(`✅ MessageBird OTP API running on http://localhost:${PORT}`);
  console.log(`📱 Endpoints available:`);
  console.log(`   POST http://localhost:${PORT}/api/otp/generate`);
  console.log(`   POST http://localhost:${PORT}/api/otp/verify`);
  console.log(`   GET  http://localhost:${PORT}/api/otp/status/:verifyId`);
});

cd ..
npm create vite@latest messagebird-otp-frontend -- --template react
cd messagebird-otp-frontend
npm install
npm install axios

cd ..
npm create vite@latest messagebird-otp-frontend -- --template vue
cd messagebird-otp-frontend
npm install
npm install axios

messagebird-otp-frontend/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   ├── PhoneInput.jsx (or .vue)    # Phone number entry form
│   │   ├── OTPInput.jsx (or .vue)      # OTP code entry with auto-focus
│   │   └── StatusMessage.jsx (or .vue)  # Success/error display
│   ├── services/
│   │   └── api.js                       # Axios API client
│   ├── App.jsx (or .vue)                # Main application component
│   └── main.jsx (or .js)
├── .env
├── package.json
└── vite.config.js

VITE_API_URL=http://localhost:3001

// src/services/api.js
import axios from 'axios';

const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';

const apiClient = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 10000  // 10 second timeout
});

export const otpAPI = {
  /**
   * Request OTP code for phone number
   * @param {string} phoneNumber - E.164 format
   * @returns {Promise<{verifyId, validUntil, status}>}
   */
  generateOTP: async (phoneNumber) => {
    const response = await apiClient.post('/api/otp/generate', { phoneNumber });
    return response.data;
  },

  /**
   * Verify OTP code entered by user
   * @param {string} verifyId - Verification ID from generateOTP
   * @param {string} token - User-entered code
   * @returns {Promise<{status, recipient}>}
   */
  verifyOTP: async (verifyId, token) => {
    const response = await apiClient.post('/api/otp/verify', { verifyId, token });
    return response.data;
  },

  /**
   * Check verification status
   * @param {string} verifyId
   * @returns {Promise<{status, validUntil, createdAt}>}
   */
  getStatus: async (verifyId) => {
    const response = await apiClient.get(`/api/otp/status/${verifyId}`);
    return response.data;
  }
};

// src/components/PhoneInput.jsx
import { useState } from 'react';

export default function PhoneInput({ onSubmit, loading }) {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [error, setError] = useState('');

  const validatePhone = (phone) => {
    // E.164 format validation
    const e164Regex = /^\+[1-9]\d{10,14}$/;
    return e164Regex.test(phone);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');

    if (!phoneNumber) {
      setError('Phone number is required');
      return;
    }

    if (!validatePhone(phoneNumber)) {
      setError('Invalid format. Use E.164 (e.g., +14155552671)');
      return;
    }

    onSubmit(phoneNumber);
  };

  return (
    <div className="phone-input-container">
      <h2>Enter Your Phone Number</h2>
      <p>We'll send you a verification code via SMS</p>

      <form onSubmit={handleSubmit}>
        <input
          type="tel"
          value={phoneNumber}
          onChange={(e) => setPhoneNumber(e.target.value)}
          placeholder="+1 415 555 2671"
          disabled={loading}
          autoFocus
          className="phone-input"
        />

        {error && <p className="error-message">{error}</p>}

        <button type="submit" disabled={loading} className="submit-button">
          {loading ? 'Sending…' : 'Send Code'}
        </button>
      </form>

      <p className="help-text">
        Format: +[country code][number] (e.g., +14155552671 for US)
      </p>
    </div>
  );
}

// src/components/OTPInput.jsx
import { useState, useRef, useEffect } from 'react';

export default function OTPInput({
  length = 6,
  onComplete,
  onResend,
  loading,
  expiryTime
}) {
  const [otp, setOtp] = useState(new Array(length).fill(''));
  const [timeLeft, setTimeLeft] = useState(null);
  const inputRefs = useRef([]);

  // Calculate time remaining
  useEffect(() => {
    if (!expiryTime) return;

    const interval = setInterval(() => {
      const now = new Date().getTime();
      const expiry = new Date(expiryTime).getTime();
      const remaining = Math.max(0, Math.floor((expiry - now) / 1000));

      setTimeLeft(remaining);

      if (remaining === 0) {
        clearInterval(interval);
      }
    }, 1000);

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

  const handleChange = (index, value) => {
    // Only allow digits
    if (!/^\d*$/.test(value)) return;

    const newOtp = [...otp];
    newOtp[index] = value.slice(-1);  // Only last character
    setOtp(newOtp);

    // Auto-focus next input
    if (value && index < length - 1) {
      inputRefs.current[index + 1]?.focus();
    }

    // Auto-submit when complete
    if (newOtp.every(digit => digit !== '') && !loading) {
      onComplete(newOtp.join(''));
    }
  };

  const handleKeyDown = (index, e) => {
    // Handle backspace to move to previous input
    if (e.key === 'Backspace' && !otp[index] && index > 0) {
      inputRefs.current[index - 1]?.focus();
    }
  };

  const handlePaste = (e) => {
    e.preventDefault();
    const pastedData = e.clipboardData.getData('text').slice(0, length);

    if (!/^\d+$/.test(pastedData)) return;

    const newOtp = pastedData.split('').concat(new Array(length).fill('')).slice(0, length);
    setOtp(newOtp);

    // Focus last filled input or next empty
    const nextIndex = Math.min(pastedData.length, length - 1);
    inputRefs.current[nextIndex]?.focus();

    if (newOtp.every(digit => digit !== '')) {
      onComplete(newOtp.join(''));
    }
  };

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

  return (
    <div className="otp-input-container">
      <h2>Enter Verification Code</h2>
      <p>We sent a {length}-digit code to your phone</p>

      <div className="otp-inputs">
        {otp.map((digit, index) => (
          <input
            key={index}
            ref={(el) => (inputRefs.current[index] = el)}
            type="text"
            inputMode="numeric"
            maxLength={1}
            value={digit}
            onChange={(e) => handleChange(index, e.target.value)}
            onKeyDown={(e) => handleKeyDown(index, e)}
            onPaste={handlePaste}
            disabled={loading || timeLeft === 0}
            className="otp-digit"
            autoFocus={index === 0}
          />
        ))}
      </div>

      {timeLeft !== null && (
        <p className={`timer ${timeLeft < 30 ? 'warning' : ''}`}>
          {timeLeft > 0
            ? `Code expires in ${formatTime(timeLeft)}`
            : 'Code has expired'}
        </p>
      )}

      <button
        onClick={onResend}
        disabled={loading || timeLeft > 0}
        className="resend-button"
      >
        {timeLeft > 0 ? 'Resend available after expiry' : 'Resend Code'}
      </button>
    </div>
  );
}

// src/App.jsx
import { useState } from 'react';
import PhoneInput from './components/PhoneInput';
import OTPInput from './components/OTPInput';
import { otpAPI } from './services/api';
import './App.css';

function App() {
  const [step, setStep] = useState('phone'); // 'phone', 'otp', 'success', 'error'
  const [phoneNumber, setPhoneNumber] = useState('');
  const [verifyId, setVerifyId] = useState('');
  const [validUntil, setValidUntil] = useState('');
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');

  const handlePhoneSubmit = async (phone) => {
    setLoading(true);
    setMessage('');

    try {
      const response = await otpAPI.generateOTP(phone);

      if (response.success) {
        setPhoneNumber(phone);
        setVerifyId(response.data.verifyId);
        setValidUntil(response.data.validUntil);
        setStep('otp');
        setMessage('Code sent! Check your phone.');
      }
    } catch (error) {
      setMessage(error.response?.data?.message || 'Failed to send code. Try again.');
    } finally {
      setLoading(false);
    }
  };

  const handleOTPComplete = async (code) => {
    setLoading(true);
    setMessage('');

    try {
      const response = await otpAPI.verifyOTP(verifyId, code);

      if (response.success) {
        setStep('success');
        setMessage('✅ Phone number verified successfully!');
      }
    } catch (error) {
      const errorMsg = error.response?.data?.message || 'Verification failed';
      setMessage(`❌ ${errorMsg}`);

      // Show error state but stay on OTP screen for retry
      if (error.response?.status === 410 || error.response?.status === 429) {
        // Expired or max attempts – go back to phone input
        setTimeout(() => {
          setStep('phone');
          setMessage('');
        }, 3000);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleResend = () => {
    setStep('phone');
    setMessage('');
    // Optionally pre-fill phone number
  };

  const handleReset = () => {
    setStep('phone');
    setPhoneNumber('');
    setVerifyId('');
    setValidUntil('');
    setMessage('');
  };

  return (
    <div className="app-container">
      <div className="card">
        <h1>🔐 Phone Verification</h1>

        {message && (
          <div className={`message ${step === 'success' ? 'success' : 'error'}`}>
            {message}
          </div>
        )}

        {step === 'phone' && (
          <PhoneInput onSubmit={handlePhoneSubmit} loading={loading} />
        )}

        {step === 'otp' && (
          <OTPInput
            length={6}
            onComplete={handleOTPComplete}
            onResend={handleResend}
            loading={loading}
            expiryTime={validUntil}
          />
        )}

        {step === 'success' && (
          <div className="success-container">
            <div className="success-icon">✓</div>
            <h2>Verification Successful!</h2>
            <p>Your phone number {phoneNumber} has been verified.</p>
            <button onClick={handleReset} className="button">
              Verify Another Number
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

<template>
  <div class="phone-input-container">
    <h2>Enter Your Phone Number</h2>
    <p>We'll send you a verification code via SMS</p>

    <form @submit.prevent="handleSubmit">
      <input
        v-model="phoneNumber"
        type="tel"
        placeholder="+1 415 555 2671"
        :disabled="loading"
        autofocus
        class="phone-input"
      />

      <p v-if="error" class="error-message">{{ error }}</p>

      <button type="submit" :disabled="loading" class="submit-button">
        {{ loading ? 'Sending…' : 'Send Code' }}
      </button>
    </form>

    <p class="help-text">
      Format: +[country code][number] (e.g., +14155552671 for US)
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  loading: Boolean
});

const emit = defineEmits(['submit']);

const phoneNumber = ref('');
const error = ref('');

const validatePhone = (phone) => {
  const e164Regex = /^\+[1-9]\d{10,14}$/;
  return e164Regex.test(phone);
};

const handleSubmit = () => {
  error.value = '';

  if (!phoneNumber.value) {
    error.value = 'Phone number is required';
    return;
  }

  if (!validatePhone(phoneNumber.value)) {
    error.value = 'Invalid format. Use E.164 (e.g., +14155552671)';
    return;
  }

  emit('submit', phoneNumber.value);
};
</script>

<template>
  <div class="otp-input-container">
    <h2>Enter Verification Code</h2>
    <p>We sent a {{ length }}-digit code to your phone</p>

    <div class="otp-inputs">
      <input
        v-for="(digit, index) in otp"
        :key="index"
        :ref="el => inputRefs[index] = el"
        v-model="otp[index]"
        type="text"
        inputmode="numeric"
        maxlength="1"
        @input="handleInput(index, $event)"
        @keydown="handleKeyDown(index, $event)"
        @paste="handlePaste"
        :disabled="loading || timeLeft === 0"
        class="otp-digit"
        :autofocus="index === 0"
      />
    </div>

    <p v-if="timeLeft !== null" :class="['timer', { warning: timeLeft < 30 }]">
      {{ timeLeft > 0 ? `Code expires in ${formatTime(timeLeft)}` : 'Code has expired' }}
    </p>

    <button
      @click="$emit('resend')"
      :disabled="loading || timeLeft > 0"
      class="resend-button"
    >
      {{ timeLeft > 0 ? 'Resend available after expiry' : 'Resend Code' }}
    </button>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  length: { type: Number, default: 6 },
  loading: Boolean,
  expiryTime: String
});

const emit = defineEmits(['complete', 'resend']);

const otp = ref(new Array(props.length).fill(''));
const timeLeft = ref(null);
const inputRefs = ref([]);
let timerInterval = null;

const handleInput = (index, event) => {
  const value = event.target.value;

  if (!/^\d*$/.test(value)) {
    otp.value[index] = '';
    return;
  }

  otp.value[index] = value.slice(-1);

  if (value && index < props.length - 1) {
    inputRefs.value[index + 1]?.focus();
  }

  if (otp.value.every(d => d !== '') && !props.loading) {
    emit('complete', otp.value.join(''));
  }
};

const handleKeyDown = (index, event) => {
  if (event.key === 'Backspace' && !otp.value[index] && index > 0) {
    inputRefs.value[index - 1]?.focus();
  }
};

const handlePaste = (event) => {
  event.preventDefault();
  const pastedData = event.clipboardData.getData('text').slice(0, props.length);

  if (!/^\d+$/.test(pastedData)) return;

  const newOtp = pastedData.split('').concat(new Array(props.length).fill('')).slice(0, props.length);
  otp.value = newOtp;

  const nextIndex = Math.min(pastedData.length, props.length - 1);
  inputRefs.value[nextIndex]?.focus();

  if (newOtp.every(d => d !== '')) {
    emit('complete', newOtp.join(''));
  }
};

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

watch(() => props.expiryTime, (newExpiry) => {
  if (!newExpiry) return;

  if (timerInterval) clearInterval(timerInterval);

  timerInterval = setInterval(() => {
    const now = new Date().getTime();
    const expiry = new Date(newExpiry).getTime();
    const remaining = Math.max(0, Math.floor((expiry - now) / 1000));

    timeLeft.value = remaining;

    if (remaining === 0) {
      clearInterval(timerInterval);
    }
  }, 1000);
}, { immediate: true });

onUnmounted(() => {
  if (timerInterval) clearInterval(timerInterval);
});
</script>

<template>
  <div class="app-container">
    <div class="card">
      <h1>🔐 Phone Verification</h1>

      <div v-if="message" :class="['message', step === 'success' ? 'success' : 'error']">
        {{ message }}
      </div>

      <PhoneInput
        v-if="step === 'phone'"
        :loading="loading"
        @submit="handlePhoneSubmit"
      />

      <OTPInput
        v-if="step === 'otp'"
        :length="6"
        :loading="loading"
        :expiry-time="validUntil"
        @complete="handleOTPComplete"
        @resend="handleResend"
      />

      <div v-if="step === 'success'" class="success-container">
        <div class="success-icon">✓</div>
        <h2>Verification Successful!</h2>
        <p>Your phone number {{ phoneNumber }} has been verified.</p>
        <button @click="handleReset" class="button">
          Verify Another Number
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import PhoneInput from './components/PhoneInput.vue';
import OTPInput from './components/OTPInput.vue';
import { otpAPI } from './services/api';

const step = ref('phone');
const phoneNumber = ref('');
const verifyId = ref('');
const validUntil = ref('');
const loading = ref(false);
const message = ref('');

const handlePhoneSubmit = async (phone) => {
  loading.value = true;
  message.value = '';

  try {
    const response = await otpAPI.generateOTP(phone);

    if (response.success) {
      phoneNumber.value = phone;
      verifyId.value = response.data.verifyId;
      validUntil.value = response.data.validUntil;
      step.value = 'otp';
      message.value = 'Code sent! Check your phone.';
    }
  } catch (error) {
    message.value = error.response?.data?.message || 'Failed to send code. Try again.';
  } finally {
    loading.value = false;
  }
};

const handleOTPComplete = async (code) => {
  loading.value = true;
  message.value = '';

  try {
    const response = await otpAPI.verifyOTP(verifyId.value, code);

    if (response.success) {
      step.value = 'success';
      message.value = '✅ Phone number verified successfully!';
    }
  } catch (error) {
    const errorMsg = error.response?.data?.message || 'Verification failed';
    message.value = `❌ ${errorMsg}`;

    if (error.response?.status === 410 || error.response?.status === 429) {
      setTimeout(() => {
        step.value = 'phone';
        message.value = '';
      }, 3000);
    }
  } finally {
    loading.value = false;
  }
};

const handleResend = () => {
  step.value = 'phone';
  message.value = '';
};

const handleReset = () => {
  step.value = 'phone';
  phoneNumber.value = '';
  verifyId.value = '';
  validUntil.value = '';
  message.value = '';
};
</script>

/* src/App.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.app-container {
  width: 100%;
  max-width: 500px;
}

.card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;
}

h2 {
  color: #444;
  margin-bottom: 10px;
  font-size: 20px;
}

p {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}

.message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
}

.message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.phone-input-container,
.otp-input-container {
  text-align: center;
}

.phone-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: border-color 0.3s;
}

.phone-input:focus {
  outline: none;
  border-color: #667eea;
}

.phone-input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.otp-inputs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 20px 0;
}

.otp-digit {
  width: 50px;
  height: 60px;
  font-size: 24px;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s;
  font-weight: 600;
}

.otp-digit:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.otp-digit:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.timer {
  font-size: 14px;
  margin: 15px 0;
  font-weight: 500;
}

.timer.warning {
  color: #dc3545;
}

.submit-button,
.resend-button,
.button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.submit-button,
.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.submit-button:hover:not(:disabled),
.button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.submit-button:disabled,
.resend-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.resend-button {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.resend-button:hover:not(:disabled) {
  background: #f8f9ff;
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: -10px;
  margin-bottom: 15px;
}

.help-text {
  font-size: 13px;
  color: #999;
  margin-top: 10px;
}

.success-container {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  width: 80px;
  height: 80px;
  background: #28a745;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin: 0 auto 20px;
}

@media (max-width: 600px) {
  .card {
    padding: 30px 20px;
  }

  .otp-digit {
    width: 40px;
    height: 50px;
    font-size: 20px;
  }

  .otp-inputs {
    gap: 8px;
  }
}

# Production environment variables
MESSAGEBIRD_API_KEY=your_live_key_here
OTP_TIMEOUT=300
OTP_TOKEN_LENGTH=6
OTP_MAX_ATTEMPTS=3
PORT=3001
NODE_ENV=production

npm install -g pm2
pm2 start src/server.js --name "messagebird-otp-api"
pm2 save
pm2 startup

# Build production bundle
npm run build

# Output in dist/ directory
# Deploy dist/ to hosting platform

VITE_API_URL=https://your-backend-domain.com

app.use(cors({
  origin: process.env.NODE_ENV === 'production'
    ? ['https://your-frontend-domain.com', 'https://www.your-frontend-domain.com']
    : 'http://localhost:5173',
  credentials: true
}));

CREATE TABLE otp_verifications (
  id SERIAL PRIMARY KEY,
  phone_number VARCHAR(20) NOT NULL,
  verify_id VARCHAR(100) NOT NULL,
  status VARCHAR(20) NOT NULL, -- sent, verified, expired, failed
  attempts INT DEFAULT 0,
  created_at TIMESTAMP DEFAULT NOW(),
  verified_at TIMESTAMP,
  expires_at TIMESTAMP NOT NULL,
  ip_address INET,
  user_agent TEXT
);

CREATE INDEX idx_phone_created ON otp_verifications(phone_number, created_at);
CREATE INDEX idx_verify_id ON otp_verifications(verify_id);

// Backend: Track last send time per phone number
const sendCooldown = new Map(); // Use Redis in production

app.post('/api/otp/resend', otpGenerateLimiter, async (req, res) => {
  const { phoneNumber } = req.body;

  const lastSend = sendCooldown.get(phoneNumber);
  if (lastSend && Date.now() - lastSend < 60000) {
    return res.status(429).json({
      success: false,
      message: 'Wait 60 seconds before requesting another code'
    });
  }

  // Generate new OTP (same logic as /generate)
  const result = await generateOTP(phoneNumber);
  sendCooldown.set(phoneNumber, Date.now());

  res.status(200).json({ success: true, data: result });
});

client.verify.create(phoneNumber, {
  type: 'tts',           // Text-to-speech voice call
  language: 'es-mx',     // Spanish (Mexico)
  voice: 'female',       // male or female
  // ... other options
});