DEV Community

Cover image for How to Implement OTP Verification in a Web Application (React + Node.js + Fast2SMS)
Tech Tales
Tech Tales

Posted on

How to Implement OTP Verification in a Web Application (React + Node.js + Fast2SMS)

#security #webdev #react #node

How to Implement OTP Verification in a Web Application (React + Node.js + Fast2SMS)

One-Time Password (OTP) verification is one of the most widely used authentication mechanisms in modern web applications. Whether you're building a user registration system, login flow, password reset feature, or mobile number verification, OTP authentication helps verify that users actually own the phone number they're using.

For developers building applications in India, there's an additional requirement: DLT (Distributed Ledger Technology) compliance. Before sending transactional SMS messages, businesses must register with a telecom-approved DLT platform and create approved SMS templates.

In this article, we'll cover the complete OTP implementation workflow using:

  • ⚛️ React
  • 🟢 Node.js
  • 🚀 Express.js
  • 📩 Fast2SMS
  • 📱 DLT Compliance

Let's dive in!

📌 OTP Verification Flow

User Registration
       │
       ▼
Enter Mobile Number
       │
       ▼
Generate OTP
       │
       ├────────► Store OTP (Redis / Database)
       │
       ▼
Fast2SMS API
       │
       ▼
User Receives OTP
       │
       ▼
User Enters OTP
       │
       ▼
Verify OTP
       │
       ▼
Registration/Login Successful
Enter fullscreen mode Exit fullscreen mode

Why Use OTP Verification?

OTP authentication improves application security by verifying that users have access to their registered mobile number.

Common use cases

  • User Registration
  • Login Authentication
  • Password Reset
  • Mobile Number Verification
  • Two-Factor Authentication (2FA)

Unlike passwords, OTPs are temporary and expire after a short duration, making them much more secure against unauthorized access.

Step 1: Register on a DLT Platform

If you're sending SMS messages in India, your business must first register on a telecom-approved DLT platform.

DLT registration helps telecom operators prevent spam and fraudulent SMS messages.

Popular DLT providers include:

  • Jio DLT
  • Airtel DLT
  • Vodafone Idea (Vi) DLT

After registration, you'll be able to create:

  • Business Entity
  • Sender ID
  • SMS Templates
  • Template IDs

Step 2: Register Your Business Entity

The next step is registering your organization.

Typical requirements include:

  • Company Name
  • PAN
  • GST
  • Business Registration Documents
  • Authorized Person Details

Requirements may vary depending on the telecom provider.

Step 3: Create a Sender ID

A Sender ID identifies your organization when SMS messages are delivered.

Example:

ABCORG
Enter fullscreen mode Exit fullscreen mode

Users receive SMS like this:

ABCORG: Your OTP is 583214.
Enter fullscreen mode Exit fullscreen mode

Step 4: Create an OTP SMS Template

Every OTP message must use an approved SMS template.

Example:

Your OTP for registration is {#var#}.

This OTP is valid for 5 minutes.

Do not share this OTP with anyone.
Enter fullscreen mode Exit fullscreen mode

Here,

{#var#}
Enter fullscreen mode Exit fullscreen mode

is replaced with the generated OTP.

Example SMS:

Your OTP for registration is 583214.

This OTP is valid for 5 minutes.

Do not share this OTP with anyone.
Enter fullscreen mode Exit fullscreen mode

Step 5: Obtain the Template ID

Once approved, the DLT portal provides a Template ID.

Example:

1707161234567890123
Enter fullscreen mode Exit fullscreen mode

Store these values safely:

  • Entity ID
  • Sender ID
  • Template ID

You'll need them while configuring your SMS provider.

Step 6: Configure Fast2SMS

After DLT approval, create an account with Fast2SMS.

Your application architecture should look like this:

React Frontend
       │
       ▼
Node.js + Express
       │
       ▼
Fast2SMS API
       │
       ▼
User Mobile
Enter fullscreen mode Exit fullscreen mode

Never call the Fast2SMS API directly from React. Keep API keys secure by sending SMS requests through your backend.

Step 7: Generate OTP

Generate a random six-digit OTP on your server.

const otp = Math.floor(100000 + Math.random() * 900000);

console.log(otp);
Enter fullscreen mode Exit fullscreen mode

Example output:

583214
Enter fullscreen mode Exit fullscreen mode

Step 8: Store OTP

Store the OTP temporarily.

Example:

{
  "phone": "9876543210",
  "otp": "583214",
  "expiresAt": "2026-08-14T11:00:00"
}
Enter fullscreen mode Exit fullscreen mode

For production systems:

  • ✅ Store hashed OTPs
  • ✅ Set expiration time
  • ✅ Use Redis whenever possible

Step 9: Send OTP

Example:

await sendSMS({
    phone: userPhone,
    otp
});
Enter fullscreen mode Exit fullscreen mode

Fast2SMS sends the SMS to the user's mobile number.

Step 10: User Enters OTP

React sends the OTP to your backend.

await axios.post("/api/auth/verify-otp",{
    phone,
    otp
});
Enter fullscreen mode Exit fullscreen mode

Step 11: Verify OTP

Compare the stored OTP with the submitted OTP.

if (enteredOtp === storedOtp) {

    // Verified

} else {

    // Invalid OTP

}
Enter fullscreen mode Exit fullscreen mode

Also verify the expiration time.

if(Date.now() > otpExpiresAt){

   return res.status(400).json({
      message:"OTP expired"
   });

}
Enter fullscreen mode Exit fullscreen mode

Only proceed if the OTP is valid and hasn't expired.

Example API Endpoints

Send OTP

POST /api/auth/send-otp
Enter fullscreen mode Exit fullscreen mode

Request

{
  "phone":"9876543210"
}
Enter fullscreen mode Exit fullscreen mode

Response

{
  "success":true,
  "message":"OTP sent successfully"
}
Enter fullscreen mode Exit fullscreen mode

Verify OTP

POST /api/auth/verify-otp
Enter fullscreen mode Exit fullscreen mode

Request

{
  "phone":"9876543210",
  "otp":"583214"
}
Enter fullscreen mode Exit fullscreen mode

Response

{
  "success":true,
  "message":"OTP verified successfully"
}
Enter fullscreen mode Exit fullscreen mode

Security Best Practices

Never build an OTP system without implementing proper security measures.

✔ Hash OTPs before storing them.

✔ Set OTP validity to 5 minutes.

✔ Delete OTP after successful verification.

✔ Allow a maximum of 5 verification attempts.

✔ Add a 30–60 second resend cooldown.

✔ Validate mobile numbers.

✔ Rate-limit OTP APIs.

✔ Store API credentials securely.

✔ Use HTTPS.

These measures protect your application from abuse and brute-force attacks.

DLT vs Fast2SMS

Many developers think DLT is an SMS provider—but that's not the case.

DLT Fast2SMS
Regulatory platform SMS provider
Registers business Sends SMS
Approves templates Provides APIs
Creates Sender IDs Delivers OTP
Provides Template IDs Backend integration

The complete flow looks like this:

DLT Registration
       │
       ▼
Sender ID
       │
       ▼
SMS Template Approval
       │
       ▼
Fast2SMS Configuration
       │
       ▼
Backend OTP API
       │
       ▼
React Frontend
       │
       ▼
OTP Verification
Enter fullscreen mode Exit fullscreen mode

Final Implementation Flow

1. Register Business on DLT
          ↓
2. Create Entity
          ↓
3. Create Sender ID
          ↓
4. Create OTP Template
          ↓
5. Get Template ID
          ↓
6. Configure Fast2SMS
          ↓
7. Generate OTP
          ↓
8. Store OTP
          ↓
9. Send SMS
          ↓
10. User Enters OTP
          ↓
11. Verify OTP
          ↓
12. Registration/Login Successful
Enter fullscreen mode Exit fullscreen mode

Conclusion

Implementing OTP verification is more than generating a random six-digit number. A production-ready solution requires secure backend APIs, temporary OTP storage, expiration handling, rate limiting, and compliance with India's DLT regulations.

Using React, Node.js, Express.js, and Fast2SMS, you can build a secure, scalable, and reliable OTP authentication system for your applications.

If you're building authentication features for your next project, following this architecture will save you time and help you avoid common implementation mistakes.

Have questions or suggestions? Drop them in the comments!

⭐ If you found this article useful, give it a ❤️ and share it with fellow developers. Happy coding!

Top comments (0)