NEXTJS-SMS-AUTH

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

One of the most common features you need when building a side project or a startup MVP is SMS Authentication (OTP). However, when you actually try to integrate an SMS API, you often hit a massive wall of bureaucracy.

“Please submit your business registration.”
“We need a telecommunications service certificate.”
“You must pre-register a sender ID.”

For a solo developer or an early-stage founder trying to launch an MVP over the weekend, this kind of paperwork is a huge waste of time.

In this tutorial, we will learn how to implement a fully functional SMS authentication system in just 10 minutes using Next.js App Router and EasyAuth—a developer-friendly API that requires zero paperwork and can be set up in 5 minutes.

Why EasyAuth + Next.js App Router?

The Next.js App Router allows seamless integration between server-side logic (Route Handlers) and Client Components, enabling rapid development while keeping your API keys perfectly secure.

By combining this with EasyAuth, you get the following benefits:

Zero Paperwork: Get your API key instantly without submitting business licenses or certificates.
Auto Sender ID: No tedious pre-registration process for the sender's phone number.
Highly Affordable: Costs only 15~~25 KRW per message, about half the price of traditional providers (30~~50 KRW).
Extremely Simple: Built around just two clean endpoints: POST /send and POST /verify.

Let's dive into the code.

Step 1: Environment Setup

First, sign up on the EasyAuth dashboard, grab your API key, and add it to your project's .env.local file.

EASYAUTH_API_KEY=your_easyauth_api_key_here

Step 2: Creating API Route Handlers

If you call the EasyAuth API directly from the client, your API key will be exposed. To prevent this, we'll create backend routes using Next.js Route Handlers to proxy our requests securely.

1. Send OTP Route (`app/api/send-sms/route.ts`)

import { NextResponse } from 'next/server';

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

    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({ phone }),
    });

    if (!response.ok) throw new Error('Failed to send');

    return NextResponse.json({ success: true, message: 'Verification code sent.' });
  } catch (error) {
    return NextResponse.json({ success: false, error: 'Error occurred while sending SMS.' }, { status: 500 });
  }
}

2. Verify OTP Route (`app/api/verify-sms/route.ts`)

import { NextResponse } from 'next/server';

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

    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({ phone, code }),
    });

    const data = await response.json();

    if (!data.success) {
      return NextResponse.json({ success: false, error: 'Invalid verification code.' }, { status: 400 });
    }

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

Step 3: Implementing the Client Component (Complete Code)

Now, let's create the UI component where users will input their phone number and the OTP code. Create a file at app/components/SmsAuth.tsx and paste the following code.

'use client';

import { useState } from 'react';

export default function SmsAuth() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState&lt;'SEND' | 'VERIFY'&gt;('SEND');
  const [isLoading, setIsLoading] = useState(false);
  const [message, setMessage] = useState('');

  const handleSendSms = async () =&gt; {
    setIsLoading(true);
    setMessage('');
    
    try {
      const res = await fetch('/api/send-sms', {
        method: 'POST',
        body: JSON.stringify({ phone }),
      });
      const data = await res.json();
      
      if (data.success) {
        setStep('VERIFY');
        setMessage('Verification code sent. Please enter it within 3 minutes.');
      } else {
        setMessage(data.error);
      }
    } catch (err) {
      setMessage('A network error occurred.');
    } finally {
      setIsLoading(false);
    }
  };

  const handleVerifyCode = async () =&gt; {
    setIsLoading(true);
    setMessage('');
    
    try {
      const res = await fetch('/api/verify-sms', {
        method: 'POST',
        body: JSON.stringify({ phone, code }),
      });
      const data = await res.json();
      
      if (data.success) {
        setMessage('✅ Phone verification complete!');
        // TODO: Proceed to the next step (e.g., signup completion)
      } else {
        setMessage('❌ ' + data.error);
      }
    } catch (err) {
      setMessage('A network error occurred.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h2>Phone Verification</h2>
      
      <div>
        <div>
          Phone Number
          <div>
             setPhone(e.target.value)}
              placeholder='e.g. 01012345678'
              disabled={step === 'VERIFY'}
              className='flex-1 px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 outline-none'
            /&gt;
            
              {step === 'VERIFY' ? 'Resend' : 'Send Code'}
            
          </div>
        </div>

        {step === 'VERIFY' &amp;&amp; (
          <div>
            Verification Code
            <div>
               setCode(e.target.value)}
                placeholder='Enter 6-digit code'
                className='flex-1 px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 outline-none'
              /&gt;
              
                Verify
              
            </div>
          </div>
        )}

        {message &amp;&amp; (
          <p>
            {message}
          </p>
        )}
      </div>
    </div>
  );
}

Tips & Best Practices for Production

API Key Security (Golden Rule)
Never call the EasyAuth API directly from a Client Component ('use client'). Doing so exposes your secret API key in the browser's network tab. Always proxy the request through Next.js Route Handlers or Server Actions as shown above.
Implement Rate Limiting
To prevent malicious users from abusing your SMS endpoint and draining your credits, implement IP-based rate limiting on your server side. Tools like Upstash Redis make this very easy.
Enhance UX with a Timer
In a real-world application, it is highly recommended to display a 3-minute (180 seconds) countdown timer using setInterval once the SMS has been sent.

Conclusion

We just built a secure, fully functional SMS authentication flow in Next.js App Router using EasyAuth, without submitting a single piece of paperwork. The whole process, from setup to coding, takes less than 10 minutes.

Are you building a toy project, a startup MVP, or an e-commerce platform where speed is everything? Sign up for [EasyAuth] today, claim your 10 free test credits, and try this code out immediately! Stop wasting your precious weekends struggling with outdated SMS API providers.