Implementing Mobile SMS Authentication in 5 Minutes with Next.js App Router & Server Actions

If you're building a side project or a startup MVP, mobile SMS authentication (OTP verification) is often a critical requirement. However, integrating a traditional SMS API provider usually leads to a massive roadblock. Most providers require a business registration certificate, proof of telecom service, and strict caller ID pre-verification.

Have you ever been frustrated thinking, "I'm just building a weekend toy project, I don't have a registered business yet!"? Today, we will learn how to implement SMS OTP verification seamlessly without a dedicated backend, using Next.js App Router's Server Actions and EasyAuth—a developer-friendly SMS API that requires absolutely zero paperwork and takes only 5 minutes to set up.

Why Next.js Server Actions?

Next.js Server Actions allow you to call server-side code directly from your Client Components. This means you can securely interact with third-party APIs (like EasyAuth) while keeping your API keys hidden safely on the server, all without having to create dedicated API routes (app/api/...). This significantly boosts developer productivity and keeps your codebase clean.

Step-by-Step Implementation Guide

1. Understanding the EasyAuth API Structure

EasyAuth simplifies SMS authentication into two highly intuitive endpoints:

• POST /send: Send the One-Time Password (OTP) to the user's phone.
• POST /verify: Verify the OTP entered by the user.

2. Creating the Server Actions

First, create an app/actions.ts file. This will contain the logic executed purely on the server. By declaring "use server" at the very top, Next.js guarantees this code will not be bundled into the client.

// app/actions.ts
"use server"

const EASYAUTH_API_URL = "https://api.easyauth.co.kr";
const API_KEY = process.env.EASYAUTH_API_KEY;

export async function sendAuthCode(phoneNumber: string) {
  try {
    const response = await fetch(`${EASYAUTH_API_URL}/send`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${API_KEY}`
      },
      body: JSON.stringify({ phone: phoneNumber })
    });
    const data = await response.json();
    return { success: response.ok, data };
  } catch (error) {
    return { success: false, error: "Failed to send SMS" };
  }
}

export async function verifyAuthCode(phoneNumber: string, code: string) {
  try {
    const response = await fetch(`${EASYAUTH_API_URL}/verify`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${API_KEY}`
      },
      body: JSON.stringify({ phone: phoneNumber, code })
    });
    const data = await response.json();
    return { success: response.ok, data };
  } catch (error) {
    return { success: false, error: "Failed to verify code" };
  }
}

3. Building the Client UI Component

Next, let's build the user interface in app/page.tsx where users can input their phone number and the OTP code.

// app/page.tsx
"use client"

import { useState } from "react";
import { sendAuthCode, verifyAuthCode } from "./actions";

export default function SMSAuthPage() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [step, setStep] = useState<1 | 2>(1);
  const [loading, setLoading] = useState(false);

  const handleSendCode = async () => {
    setLoading(true);
    const res = await sendAuthCode(phone);
    setLoading(false);
    
    if (res.success) {
      alert("Authentication code sent successfully.");
      setStep(2);
    } else {
      alert("Failed to send code.");
    }
  };

  const handleVerifyCode = async () => {
    setLoading(true);
    const res = await verifyAuthCode(phone, code);
    setLoading(false);

    if (res.success) {
      alert("Verification successful!");
      // TODO: Proceed to login or next step
    } else {
      alert("Invalid authentication code.");
    }
  };

  return (
    <div>
      <h1>Mobile Verification</h1>
      
      <div>
        <div>
          Phone Number
          <div>
             setPhone(e.target.value)}
              disabled={step === 2}
              className="flex-1 border p-2 rounded"
              placeholder="e.g., 01012345678"
            /&gt;
            {step === 1 &amp;&amp; (
              
                {loading ? "Sending..." : "Send Code"}
              
            )}
          </div>
        </div>

        {step === 2 &amp;&amp; (
          <div>
            Verification Code
            <div>
               setCode(e.target.value)}
                className="flex-1 border p-2 rounded"
                placeholder="6-digit code"
              /&gt;
              
                {loading ? "Verifying..." : "Verify Code"}
              
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Tips & Security Best Practices

1. Rate Limiting: To prevent malicious users from abusing your SMS endpoint and racking up costs, it's highly recommended to implement IP-based rate limiting using tools like Redis inside your Server Actions.
2. Input Validation: Use schema validation libraries like Zod to validate the format of the phone number on both the client side and inside the Server Action before calling the external API.

Conclusion: A Developer-Centric Authentication Experience

By combining Next.js Server Actions with EasyAuth, you can build a robust SMS OTP verification system in under 5 minutes, completely bypassing the need for a dedicated backend or agonizing paperwork.

EasyAuth is the ultimate SMS API designed explicitly for developers. It offers:

• Zero Paperwork: Start instantly without submitting a business registration certificate.
• Auto Caller ID: Skip the cumbersome process of pre-registering a sender phone number.
• Highly Affordable: Only 15~25 KRW per SMS, significantly cheaper than the industry average of 30~50 KRW.
• Free Trial: Sign up and get 10 free credits immediately to test your integration.

Stop wasting valuable time integrating clunky legacy authentication modules. Accelerate your MVP development and add SMS authentication to your project today with EasyAuth!