비트베이크

Implementing SMS Mobile Verification in 5 Minutes with Better Auth (Zero Paperwork)

2026-06-04T01:02:28.672Z

Image related to foundational concepts of web application authentication for developers.

Implementing SMS Mobile Verification in 5 Minutes with Better Auth (Zero Paperwork)

When building a side project or a startup MVP with Next.js or Node.js, implementing SMS Phone Verification (OTP) is a common hurdle. However, when developers look into traditional SMS API providers, they are often met with a frustrating wall of red tape.

> "Wait, I need to submit a business registration certificate and telecom proof? I'm just an indie hacker!" > "I have to pre-register a sender ID and wait days for approval?"

For solo developers and lean startups, time is your most valuable asset. Today, we’ll explore how to implement a powerful SMS OTP system in under 5 minutes by combining Better Auth (the hottest next-gen TypeScript auth library) with EasyAuth (an API built for developers that requires absolutely zero paperwork).

Solution Overview

  1. Setting up Better Auth in a TS environment (like Next.js)
  2. Integrating EasyAuth to bypass complex documentation requirements
  3. Implementing Send (POST /send) and Verify API endpoints seamlessly

🛠️ Why Better Auth + EasyAuth?

Better Auth: The Next-Gen TS Auth Library

Better Auth has quickly become the go-to authentication library for modern web development. It's more intuitive than legacy solutions, boasts an incredible plugin ecosystem, and includes a built-in phoneNumber plugin for effortless SMS OTP handling.

EasyAuth: The Frictionless SMS API

Sending an SMS usually requires navigating archaic telecom bureaucracy. EasyAuth strips all of that away:

  • Zero Paperwork: No business registration or ID required.
  • Instant Start: Get your API key and integrate within 5 minutes.
  • Automatic Sender ID: No need to pre-register your sending number.
  • Cost-Effective: Highly affordable at 15-25 KRW (~$0.01-$0.02) per SMS.
  • Free Trial: 10 free SMS credits provided instantly upon sign-up.

Let's dive into the code.


💻 Step-by-Step Implementation

Step 1: Install Better Auth Plugins

First, install Better Auth and configure the phoneNumber plugin in your project.

npm install better-auth

Step 2: Implement Server-side Logic (auth.ts)

Better Auth automatically generates the OTP code. We just need to hook into the sendOTP callback and trigger EasyAuth's POST /send endpoint. You can grab your EasyAuth API Key directly from their dashboard.

// lib/auth.ts
import { betterAuth } from "better-auth";
import { phoneNumber } from "better-auth/plugins";

export const auth = betterAuth({
  plugins: [
    phoneNumber({
      // Better Auth handles the code generation natively [1.1.1]
      sendOTP: async ({ phoneNumber, code }, request) => {
        try {
          // Trigger EasyAuth API to send the SMS
          const response = await fetch("https://api.easyauth.kr/send", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "Authorization": `Bearer ${process.env.EASYAUTH_API_KEY}`,
            },
            body: JSON.stringify({
              to: phoneNumber,
              content: `[MyApp] Your verification code is [${code}]. Valid for 3 minutes.`,
            }),
          });

          if (!response.ok) {
            throw new Error("Failed to send SMS via EasyAuth");
          }
          
          console.log(`OTP successfully sent to ${phoneNumber}`);
        } catch (error) {
          console.error("EasyAuth Delivery Error:", error);
          throw error;
        }
      },
    }),
  ],
});

Step 3: Implement Client-side Verification (auth-client.ts)

Create the client-side instance of Better Auth.

// lib/auth-client.ts
import { createAuthClient } from "better-auth/react";
import { phoneNumberClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  plugins: [
    phoneNumberClient()
  ]
});

Now, let's put it together in a React component that handles both sending and verifying the OTP.

// components/PhoneAuth.tsx
import { useState } from "react";
import { authClient } from "@/lib/auth-client";

export default function PhoneAuth() {
  const [phone, setPhone] = useState("");
  const [otp, setOtp] = useState("");
  const [step, setStep] = useState<"SEND" | "VERIFY">("SEND");

  const handleSendOTP = async () => {
    const { data, error } = await authClient.phoneNumber.sendOtp({
      phoneNumber: phone,
    });
    
    if (error) return alert(error.message);
    setStep("VERIFY");
    alert("Verification code has been sent.");
  };

  const handleVerifyOTP = async () => {
    const { data, error } = await authClient.phoneNumber.verify({
      phoneNumber: phone,
      code: otp,
    });

    if (error) return alert(error.message);
    alert("Phone number verified successfully!");
    // Proceed to sign up or log in
  };

  return (
    <div>
      <h2>Phone Verification</h2>
      
      {step === "SEND" ? (
        <div>
           setPhone(e.target.value)} 
          /&gt;
          
            Send Code
          
        </div>
      ) : (
        <div>
           setOtp(e.target.value)} 
          /&gt;
          
            Verify
          
        </div>
      )}
    </div>
  );
}

💡 Tips & Best Practices

Using EasyAuth as a Standalone Service

If you are building a lightweight project and don't need the full session management of Better Auth, you can use EasyAuth independently. EasyAuth provides its own POST /verify endpoint, allowing you to delegate the entire validation logic to their server without managing a database.

// 1. Send OTP (Standalone)
await fetch("https://api.easyauth.kr/send", { /* ... */ });

// 2. Verify OTP (No DB required on your end)
const verifyRes = await fetch("https://api.easyauth.kr/verify", {
  method: "POST",
  body: JSON.stringify({ to: phone, code: userEnteredCode })
});

E.164 Phone Number Formatting

Always format phone numbers according to the E.164 international standard. Instead of 010-1234-5678, parse the input to +821012345678 on the client side before triggering the API. Better Auth and modern SMS providers rely on this convention for global routing.


🎯 Conclusion

In the past, implementing SMS verification meant accepting weeks of delays, tedious paperwork, and high infrastructure costs. Today, by leveraging the elegant architecture of Better Auth alongside the developer-first API of EasyAuth, anyone can build a secure phone authentication system in just 5 minutes.

Racing to launch your side project or startup MVP? Say goodbye to bureaucratic red tape. Sign up for EasyAuth today and test out your code immediately with 10 free SMS credits!

(Tags: Better Auth, Next.js, SMS Verification, TypeScript, EasyAuth, Startup MVP)

Start advertising on Bitbake

Contact Us

More Articles

2026-06-04T01:04:15.823Z

The 2026 E-Commerce New Product Launch Survival Formula: Dominating Platform Search Rankings in 7 Days via Reward-Based Trials and Purchase Verification

2026-06-04T01:04:15.800Z

2026 이커머스 신제품 론칭 생존 공식: 리워드형 체험단과 구매 인증으로 7일 만에 플랫폼 검색 랭킹 장악하기

2026-06-01T01:01:58.264Z

Surviving the 2026 Cookieless Era for B2C: Building Zero-Party Data with Reward-Based Quiz Marketing

2026-06-01T01:01:58.231Z

2026 쿠키리스 시대의 B2C 생존법: 리워드 기반 퀴즈 마케팅으로 제로파티 데이터 구축하기

Services

HomeFeedFAQCustomer Service

Inquiry

Bitbake

LAEM Studio | Business Registration No.: 542-40-01042

4th Floor, 402-J270, 16 Su-ro 116beon-gil, Wabu-eup, Namyangju-si, Gyeonggi-do

TwitterInstagramNaver Blog