Plugins & SDKs for Every Stack

import { OtpInput } from '@sms21/react';
import { useState } from 'react';

export function VerifyForm({ requestId }: { requestId: string }) {
  const [code, setCode] = useState('');

  const handleVerify = async (otp: string) => {
    // Verified against SMS21 API
    const res = await fetch('/api/verify-otp', {
      method: 'POST',
      body: JSON.stringify({ requestId, otp }),
    });
    const data = await res.json();
    if (data.verified) alert('Success!');
  };

  return (
    <OtpInput
      length={6}
      value={code}
      onChange={setCode}
      onComplete={handleVerify}
      autoFocus
    />
  );
}