Skip to main content
The useVerifyEmailOTP hook provides functionality for verifying email-based one-time passwords (OTP) during authentication flows.

​
Import

import { useVerifyEmailOTP } from '@snipextt/wacht';

​
Usage

import { useVerifyEmailOTP } from '@snipextt/wacht';

function EmailOTPVerification() {
  const { verifyOTP, isLoaded, verificationError, verificationSuccess } = useVerifyEmailOTP();

  const handleVerification = async (otp, email) => {
    const result = await verifyOTP({ otp, email });
    
    if (result.success) {
      console.log('OTP verified successfully');
    } else {
      console.error('Verification failed:', result.message);
    }
  };

  if (!isLoaded) {
    return <div>Loading verification...</div>;
  }

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      handleVerification(
        formData.get('otp'),
        formData.get('email')
      );
    }}>
      <input 
        name="email" 
        type="email" 
        placeholder="Email address"
        required 
      />
      <input 
        name="otp" 
        type="text" 
        placeholder="Enter 6-digit code"
        maxLength="6"
        required 
      />
      <button type="submit">
        Verify Code
      </button>
      
      {verificationError && (
        <p className="error">{verificationError}</p>
      )}
      
      {verificationSuccess && (
        <p className="success">Email verified successfully!</p>
      )}
    </form>
  );
}

​
Properties

​
isLoaded
boolean
Whether the verification hook is ready to use. false during initialization.
​
verificationError
string | null
Any error message from the verification process. null if no errors.
​
verificationSuccess
boolean | null
Whether the verification was successful. null if not yet attempted.

​
Methods

​
verifyOTP()

Verifies an email OTP with the provided parameters.
​
params
VerifyOTPParams
required
OTP verification parameters
const { verifyOTP } = useVerifyEmailOTP();

const result = await verifyOTP({
  otp: '123456',
  email: '[email protected]'
});

​
Verification Parameters

​
otp
string
required
The 6-digit verification code received via email
​
email
string
required
The email address that received the OTP

​
Examples

​
Complete Email OTP Flow

function EmailOTPFlow() {
  const { verifyOTP, isLoaded, verificationError, verificationSuccess } = useVerifyEmailOTP();
  const [email, setEmail] = useState('');
  const [otp, setOtp] = useState('');
  const [isVerifying, setIsVerifying] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsVerifying(true);
    
    try {
      const result = await verifyOTP({ otp, email });
      
      if (result.success) {
        // Handle successful verification
        console.log('OTP verification successful');
        // Redirect or update UI
      } else {
        console.error('Verification failed:', result.message);
      }
    } catch (error) {
      console.error('Verification error:', error);
    } finally {
      setIsVerifying(false);
    }
  };

  if (!isLoaded) {
    return <div>Initializing verification...</div>;
  }

  return (
    <div className="otp-verification">
      <h2>Verify Your Email</h2>
      <p>Enter the 6-digit code sent to your email address.</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="email">Email Address</label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="[email protected]"
            required
          />
        </div>
        
        <div className="form-group">
          <label htmlFor="otp">Verification Code</label>
          <input
            id="otp"
            type="text"
            value={otp}
            onChange={(e) => setOtp(e.target.value)}
            placeholder="123456"
            maxLength="6"
            pattern="[0-9]{6}"
            required
          />
        </div>
        
        <button 
          type="submit" 
          disabled={isVerifying || !email || !otp}
        >
          {isVerifying ? 'Verifying...' : 'Verify Code'}
        </button>
      </form>
      
      {verificationError && (
        <div className="error-message">
          <p>Verification failed: {verificationError}</p>
        </div>
      )}
      
      {verificationSuccess && (
        <div className="success-message">
          <p>Email verified successfully!</p>
        </div>
      )}
    </div>
  );
}

​
Auto-Submit OTP

function AutoSubmitOTP() {
  const { verifyOTP, verificationError } = useVerifyEmailOTP();
  const [otp, setOtp] = useState('');
  const email = '[email protected]'; // From context or props

  // Auto-submit when OTP is complete
  useEffect(() => {
    if (otp.length === 6) {
      handleAutoVerify();
    }
  }, [otp]);

  const handleAutoVerify = async () => {
    try {
      await verifyOTP({ otp, email });
    } catch (error) {
      console.error('Auto-verification failed:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={otp}
        onChange={(e) => setOtp(e.target.value.replace(/\D/g, '').slice(0, 6))}
        placeholder="Enter 6-digit code"
        maxLength="6"
      />
      
      {verificationError && (
        <p className="error">Invalid code. Please try again.</p>
      )}
    </div>
  );
}

​
Notes

  • OTP codes are typically 6 digits and expire after a short time
  • The hook handles the verification API call and manages loading states
  • Email verification is commonly used for account confirmation and password resets
  • Failed verification attempts may be rate-limited for security
  • Always validate OTP format on the client side before submission