What is the most frustrating part of building a side project or an MVP? For many developers, it’s integrating SMS authentication. Most legacy SMS APIs require tedious paperwork, such as business registration and telecom certificates. For solo developers or startups trying to rapidly test an idea, this is a massive barrier to entry.

In this guide, we will learn how to implement SMS verification in just 5 minutes with zero paperwork using EasyAuth and the highly popular T3 Stack (Next.js + tRPC).

Why Choose EasyAuth?

• Zero Paperwork: Sign up and use the API instantly without submitting any business documents.
• Automatic Caller ID: No need to go through telecom verification to register a sender number.
• Simple Architecture: Just two endpoints complete the flow: POST /send and POST /verify.
• Cost-Effective: Only 15-25 KRW per message (compared to the standard 30-50 KRW), with 10 free credits provided upon signup.

Let’s dive into integrating EasyAuth into the T3 Stack.

1. Setting up the tRPC Router (Backend)

In the T3 Stack, we don't need to create standard API routes. Instead, we use tRPC mutations. First, create a new router file at src/server/api/routers/sms.ts.

import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";

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

export const smsRouter = createTRPCRouter({
  // 1. Send OTP
  sendOtp: publicProcedure
    .input(z.object({ phoneNumber: z.string().min(10) }))
    .mutation(async ({ input }) => {
      const response = await fetch(`${EASYAUTH_API_URL}/send`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${API_KEY}`,
        },
        body: JSON.stringify({ to: input.phoneNumber }),
      });

      if (!response.ok) throw new Error("Failed to send SMS.");
      return { success: true, message: "OTP sent successfully." };
    }),

  // 2. Verify OTP
  verifyOtp: publicProcedure
    .input(z.object({ 
      phoneNumber: z.string(),
      code: z.string().length(6) 
    }))
    .mutation(async ({ input }) => {
      const response = await fetch(`${EASYAUTH_API_URL}/verify`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${API_KEY}`,
        },
        body: JSON.stringify({ 
          to: input.phoneNumber,
          code: input.code 
        }),
      });

      if (!response.ok) throw new Error("Invalid OTP code.");
      return { success: true, message: "Verification successful." };
    }),
});

Make sure to merge this router into your root API router in src/server/api/root.ts.

2. Frontend Integration

Now, let's create a Client Component in Next.js to handle the UI using tRPC hooks. We'll use standard React state for simplicity.

import { useState } from "react";
import { api } from "~/utils/api";

export default function SmsAuth() {
  const [phoneNumber, setPhoneNumber] = useState("");
  const [code, setCode] = useState("");
  const [isSent, setIsSent] = useState(false);

  const sendOtpMutation = api.sms.sendOtp.useMutation({
    onSuccess: () => setIsSent(true),
    onError: (err) => alert(err.message),
  });

  const verifyOtpMutation = api.sms.verifyOtp.useMutation({
    onSuccess: () => alert("Verification Complete!"),
    onError: (err) => alert(err.message),
  });

  const handleSend = () => sendOtpMutation.mutate({ phoneNumber });
  const handleVerify = () => verifyOtpMutation.mutate({ phoneNumber, code });

  return (
    <div>
      <h2>Phone Verification</h2>
      
      <div>
         setPhoneNumber(e.target.value)}
          disabled={isSent}
          className="flex-1 border p-2 rounded"
        /&gt;
        
          {isSent ? "Resend" : "Send OTP"}
        
      </div>

      {isSent &amp;&amp; (
        <div>
           setCode(e.target.value)}
            className="flex-1 border p-2 rounded"
          /&gt;
          
            Verify
          
        </div>
      )}
    </div>
  );
}

Conclusion

Without any complex paperwork or telecom reviews, we've successfully implemented SMS authentication using just two API endpoints (/send and /verify) combined with the power of the T3 Stack. EasyAuth handles all the complex backend logic out of the box, like storing OTP codes and checking expirations.

If you are building a toy project, a freelance gig, or a startup MVP, give EasyAuth a try. You can start testing instantly with 10 free credits provided upon signup, and scale your application effortlessly with an incredibly low cost of 15-25 KRW per message!