Implementing a Perfect SMS Verification Form & Timer with React Hook Form and Zod

The Biggest Bottleneck in Signups: SMS Verification Forms

Where do you lose the most users during the signup process? Often, it's the 'Phone Verification' step. From a developer's perspective, building an SMS authentication form is surprisingly tricky. You have to handle phone number validation, OTP sending state, a 3-minute countdown timer, and timeout exceptions. If you try to manage all of this with basic React state (useState), your code can quickly turn into a spaghetti mess.

In this article, we'll explore how to escape the state management nightmare and build a flawless SMS verification form using React Hook Form (RHF), Zod, and a simple Custom Hook.

---

Solution Overview

By following this tutorial, you will build a robust component combining three key elements:

1. Zod: For strict validation of phone numbers (Regex) and OTPs (6 digits).
2. Custom Timer Hook: Encapsulating the setInterval logic for a 3-minute (180 seconds) countdown.
3. React Hook Form: Managing form state cleanly without unnecessary re-renders.

---

Step-by-Step Implementation

1. Defining the Zod Schema

First, define the shape and validation rules of your form data. Zod makes it incredibly intuitive to handle complex regex validations.

import * as z from 'zod';

export const smsSchema = z.object({
  phone: z.string().regex(/^010\d{8}$/, "Please enter an 11-digit number starting with 010 (no dashes)."),
  code: z.string().length(6, "Please enter a 6-digit verification code.").optional(),
});

export type SmsFormValues = z.infer;

2. Creating a Custom Timer Hook (useTimer)

Keeping timer logic inside your component makes the code cluttered. Let's separate it into a custom hook named useTimer for better reusability.

import { useState, useEffect, useCallback } from 'react';

export const useTimer = (initialSeconds: number) => {
  const [timeLeft, setTimeLeft] = useState(initialSeconds);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isActive && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      setIsActive(false);
    }
    return () => clearInterval(interval);
  }, [isActive, timeLeft]);

  const start = useCallback(() => {
    setTimeLeft(initialSeconds);
    setIsActive(true);
  }, [initialSeconds]);

  const stop = useCallback(() => {
    setIsActive(false);
  }, []);

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

  return { timeLeft, isActive, start, stop, formatTime };
};

3. Building the Complete Form Component

Now, let's assemble the UI using RHF and our custom hook. By using RHF's trigger method, we can validate the 'phone' field independently before submitting the entire form.

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { smsSchema, SmsFormValues } from './schema';
import { useTimer } from './useTimer';

export const SmsVerificationForm = () => {
  const [isSent, setIsSent] = useState(false);
  const { timeLeft, isActive, start, formatTime, stop } = useTimer(180); // 3-minute timer

  const { register, handleSubmit, formState: { errors }, trigger, getValues } = useForm({
    resolver: zodResolver(smsSchema),
    mode: 'onChange',
  });

  // Handler for sending OTP
  const handleSendCode = async () => {
    const isPhoneValid = await trigger("phone");
    if (!isPhoneValid) return;

    const phone = getValues("phone");
    
    // TODO: Call backend API (POST /send)
    console.log(`Sending SMS to ${phone}`);
    
    setIsSent(true);
    start();
  };

  // Handler for final verification
  const onSubmit = async (data: SmsFormValues) => {
    if (!isActive && timeLeft === 0) {
      alert("Verification time has expired. Please request a new code.");
      return;
    }

    // TODO: Call backend API (POST /verify)
    console.log("Verifying code:", data.code);
    
    stop();
    alert("Verification successful!");
  };

  return (
    
      <div>
        Phone Number
        <div>
          
          
            {isSent ? "Resend" : "Send OTP"}
          
        </div>
        {errors.phone &amp;&amp; <p>{errors.phone.message}</p>}
      </div>

      {isSent &amp;&amp; (
        <div>
          Verification Code
          <div>
            
            <span>
              {formatTime()}
            </span>
          </div>
          {errors.code &amp;&amp; <p>{errors.code.message}</p>}
        </div>
      )}

      
        Verify
      
    
  );
};

---

💡 Tips & Best Practices

• Auto Formatting: To improve UX, consider adding a transform layer to your Zod schema: z.string().transform(v => v.replace(/-/g, '')). This automatically strips dashes if users accidentally type them.
• Handling Expiration: Notice how the submit button is disabled when timeLeft === 0. This is a best practice to prevent unnecessary API calls once the code has expired.

---

The Frontend is Perfect. What About the Backend API?

You've just built a flawless UI with top-tier state management. Now, all you need is an SMS API to actually deliver messages to your users' phones.

However, if you've looked into traditional SMS services, you've likely hit a wall. Most providers require business registration documents, proof of usage, and a lengthy approval process. For indie developers, freelancers, and startups trying to launch an MVP quickly, this is a massive hurdle.

That's where EasyAuth (이지어스), the ultra-simple SMS authentication API, comes in!

• 🚫 No Paperwork: Start instantly upon signup—no business registration required.
• ⚡ 5-Minute Integration: Forget complex setups. Just two intuitive endpoints: POST /send and POST /verify.
• 🤖 Automatic Sender ID: Skip the tedious sender number pre-registration process.
• 💰 Highly Affordable: Only 15~25 KRW per message (up to 60% cheaper than traditional providers).
• 🎁 Free Trial: Get 10 free test credits instantly upon signup.

EasyAuth Integration Example (Works with Next.js, Express, etc.)

// POST /send - Request OTP
await fetch('https://api.easyauth.co.kr/send', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer YOUR_API_KEY' },
  body: JSON.stringify({ phone: data.phone })
});

Solve your frontend state management nightmare with React Hook Form, and skip the backend paperwork hell with EasyAuth. Sign up today, claim your 10 free credits, and get your SMS verification running in minutes!