Implementing SMS Authentication in Next.js App Router in 5 Minutes (No Paperwork)

1. Prologue: The Reality of Adding SMS Auth to a Side Project

"I just need to add phone number verification to my login page..." Have you ever had this thought while building a side project or startup MVP, only to run into a massive wall when signing up for an SMS API provider?

> "Please upload your business registration and telecom service usage certificate." > "Sender ID registration is required. Review takes 3-5 business days."

For indie hackers, freelancers, or founders who haven't even registered a business yet, this administrative red tape is the biggest momentum killer.

What's the solution? Meet EasyAuth(이지어스)—the ultra-simple SMS authentication API built specifically for developers.

• Zero Paperwork: No need to submit business registrations or telecom certificates.
• Auto Sender ID: Skip the manual sender ID pre-registration.
• 5-Minute Setup: Grab your API key upon sign-up and integrate immediately.

Today, we will walk through a step-by-step guide on how to implement complete SMS verification in just 5 minutes using Next.js App Router and EasyAuth.

2. System Architecture & API Structure

EasyAuth's API is incredibly developer-friendly, requiring you to interact with just two endpoints:

• POST /send: Sends a 6-digit OTP code to the user's phone.
• POST /verify: Verifies the code entered by the user.

For security reasons, we won't call the external API directly from the client. Instead, we'll use Next.js App Router's Route Handlers to act as proxy API endpoints.

3. Step-by-Step Implementation Guide

Step 1. Environment Variables Setup

After signing up for EasyAuth, add your API key to your .env.local file.

EASYAUTH_API_KEY=your_api_key_here

Step 2. Send OTP API (Backend)

Create a new Route Handler at app/api/auth/sms/send/route.ts following the Next.js App Router conventions.

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  try {
    const { phoneNumber } = await request.json();

    if (!phoneNumber) {
      return NextResponse.json({ error: 'Phone number is required.' }, { status: 400 });
    }

    // Call EasyAuth API
    const response = await fetch('https://api.easyauth.co.kr/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`,
      },
      body: JSON.stringify({ to: phoneNumber }),
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || 'Failed to send OTP code');
    }

    return NextResponse.json({ success: true, message: 'OTP sent successfully.' });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

Step 3. Verify OTP API (Backend)

Next, create the endpoint to verify the code at app/api/auth/sms/verify/route.ts.

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  try {
    const { phoneNumber, code } = await request.json();

    if (!phoneNumber || !code) {
      return NextResponse.json({ error: 'Invalid request.' }, { status: 400 });
    }

    const response = await fetch('https://api.easyauth.co.kr/verify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`,
      },
      body: JSON.stringify({ to: phoneNumber, code }),
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || 'Invalid verification code.');
    }

    return NextResponse.json({ success: true, message: 'Verification successful.' });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

Step 4. Client Component Implementation (Frontend)

Now let's build the UI. Create a Client Component at app/components/SmsAuth.tsx.

'use client';

import { useState } from 'react';

export default function SmsAuth() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState<1 | 2>(1);
  const [loading, setLoading] = useState(false);

  const handleSendSms = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/auth/sms/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phoneNumber }),
      });
      const data = await res.json();
      
      if (res.ok) {
        alert('Verification code sent.');
        setStep(2);
      } else {
        alert(data.error);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleVerifyCode = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/auth/sms/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phoneNumber, code }),
      });
      const data = await res.json();
      
      if (res.ok) {
        alert('Authentication completely successful!');
        // Proceed with login/signup flow
      } else {
        alert(data.error);
      }
    } finally {
      setLoading(false);
    }
  };

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

      {step === 2 &amp;&amp; (
        <div>
          6-Digit Code
          <div>
             setCode(e.target.value)}
              className="flex-1 border p-2 rounded"
              placeholder="123456"
              maxLength={6}
            /&gt;
            
              Verify
            
          </div>
        </div>
      )}
    </div>
  );
}

4. Best Practices for Production

1. Add a Countdown Timer: Improve UX by displaying a 3-minute (180 seconds) countdown timer on the frontend once the code is sent.
2. Prevent Abuse (Rate Limiting): Implement IP-based rate limiting via Next.js Middleware or inside your Route Handlers to prevent malicious users from draining your SMS credits.
3. Input Validation: Validate the phone number format using Regular Expressions (e.g., ^010\d{8}$) on both the client and server sides.

5. Conclusion: Focus on Coding, Let EasyAuth Handle the Auth

We've just implemented a fully functional SMS authentication flow in Next.js App Router using EasyAuth. As you can see, the entire process takes just two simple API calls: send and verify.

EasyAuth boasts highly reasonable pricing at 15-25 KRW per message, compared to the 30-50 KRW industry standard. But the absolute biggest advantage is that you can launch your service in 5 minutes without the headache of submitting paperwork or waiting for approvals.

If you are a developer working on a side project or a fast-moving startup needing to test an MVP quickly, give EasyAuth a try. Sign up today and get 10 free test credits to run the code we just wrote!

Keep your focus on your product's core business logic. Fast, simple, and zero-paperwork SMS authentication is EasyAuth's job.

---

Tags: Next.js, SMS Auth, App Router, EasyAuth, Indie Hacker