Implementing SMS Authentication with Better Auth in Next.js 15: 2026 Complete Guide

You wanted to add SMS verification to your side project. Then you found out the provider needs business registration documents, a pre-registered sender number, and a three-day approval process. Sound familiar?

In this guide, we'll build a complete SMS OTP authentication system from scratch using Better Auth's Phone Number plugin and Next.js 15 App Router — with real, working code you can copy and adapt today.

What You'll Learn

• Setting up Better Auth with Next.js 15 App Router
• Configuring the Phone Number plugin for OTP-based auth
• Connecting a custom SMS delivery provider
• Building the OTP send/verify UI in React
• Security best practices for production

---

Step 1: Project Setup

Install Better Auth

npx create-next-app@latest my-auth-app --app --typescript
cd my-auth-app
npm install better-auth

Environment Variables

Create a .env.local file:

BETTER_AUTH_SECRET=your-secret-key-at-least-32-characters-long
BETTER_AUTH_URL=http://localhost:3000
DATABASE_URL=file:./dev.db
SMS_API_KEY=your-sms-api-key

The BETTER_AUTH_SECRET must be at least 32 characters. Generate one with openssl rand -base64 32.

---

Step 2: Server-Side Auth Configuration

Create your auth instance in lib/auth.ts:

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

export const auth = betterAuth({
  database: new Database("./sqlite.db"),
  plugins: [
    phoneNumber({
      otpLength: 6,
      expiresIn: 300, // 5 minutes
      allowedAttempts: 3,
      sendOTP: async ({ phoneNumber, code }, ctx) => {
        // Send OTP via your SMS provider
        await fetch("https://api.easyauth.kr/v1/send", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${process.env.SMS_API_KEY}`,
          },
          body: JSON.stringify({
            phoneNumber,
            code,
          }),
        });
        // Note: Better Auth docs recommend NOT awaiting sendOTP
        // to prevent timing attacks and speed up responses
      },
      signUpOnVerification: {
        getTempEmail: (phoneNumber) => `${phoneNumber}@phone.local`,
        getTempName: (phoneNumber) => phoneNumber,
      },
    }),
  ],
});

Key Configuration Options

| Option | Default | Description | |--------|---------|-------------| | otpLength | 6 | Number of digits in the OTP code | | expiresIn | 300 | OTP expiration in seconds | | allowedAttempts | 3 | Failed attempts before OTP is invalidated | | signUpOnVerification | — | Auto-create user accounts on first verification | | phoneNumberValidator | — | Custom validation function for phone numbers | | verifyOTP | — | Custom verification logic (for external providers) |

Connect the Next.js Route Handler

// app/api/auth/[...all]/route.ts
import { toNextJsHandler } from "better-auth/next-js";
import { auth } from "@/lib/auth";

export const { POST, GET } = toNextJsHandler(auth);

This single catch-all route handler exposes all Better Auth endpoints under /api/auth/*.

Run Database Migration

npx auth migrate

This automatically adds phoneNumber (string) and phoneNumberVerified (boolean) columns to your user table.

---

Step 3: Client Configuration

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

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

The phoneNumberClient plugin adds two methods to your client:

• authClient.phoneNumber.sendOtp() — triggers OTP delivery
• authClient.phoneNumber.verify() — validates the code and creates a session

---

Step 4: Build the SMS Auth UI

// app/components/PhoneAuth.tsx
"use client";

import { useState } from "react";
import { authClient } from "@/lib/auth-client";

export default function PhoneAuth() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [step, setStep] = useState<"phone" | "verify">("phone");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleSendOTP = async () => {
    setLoading(true);
    setError("");
    try {
      await authClient.phoneNumber.sendOtp({
        phoneNumber: phone,
      });
      setStep("verify");
    } catch (e) {
      setError("Failed to send OTP. Please check the number and try again.");
    } finally {
      setLoading(false);
    }
  };

  const handleVerify = async () => {
    setLoading(true);
    setError("");
    try {
      await authClient.phoneNumber.verify({
        phoneNumber: phone,
        code,
      });
      // Verification successful — session is now active
      window.location.href = "/dashboard";
    } catch (e) {
      setError("Invalid code. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1>Phone Verification</h1>

      {step === "phone" ? (
        <div>
           setPhone(e.target.value)}
            className="w-full p-3 border rounded-lg"
          /&gt;
          
            {loading ? "Sending..." : "Send Verification Code"}
          
        </div>
      ) : (
        <div>
          <p>
            Enter the 6-digit code sent to {phone}
          </p>
           setCode(e.target.value)}
            className="w-full p-3 border rounded-lg text-center text-2xl tracking-widest"
          /&gt;
          
            {loading ? "Verifying..." : "Verify"}
          
           { setStep("phone"); setCode(""); }}
            className="w-full p-3 text-gray-500 text-sm"
          &gt;
            Use a different number
          
        </div>
      )}

      {error &amp;&amp; <p>{error}</p>}
    </div>
  );
}

---

Step 5: Session Check in Server Components

One of the biggest advantages of Better Auth with Next.js 15 is seamless server-side session access:

// app/dashboard/page.tsx
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function Dashboard() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) redirect("/login");

  return (
    <div>
      <h1>Welcome!</h1>
      <p>Phone: {session.user.phoneNumber}</p>
      <p>Verified: {session.user.phoneNumberVerified ? "Yes" : "No"}</p>
    </div>
  );
}

---

Step 6: Password Reset via Phone (Optional)

Better Auth's phone plugin also supports password reset flows via SMS:

// Request a password reset OTP
await authClient.phoneNumber.requestPasswordReset({
  phoneNumber: "+1234567890",
});

// Reset the password with the OTP
await authClient.phoneNumber.resetPassword({
  phoneNumber: "+1234567890",
  otp: "123456",
  newPassword: "newSecurePassword",
});

This gives users an alternative recovery path when they've lost access to their email.

---

Security Best Practices

1. Rate Limiting

Better Auth provides built-in brute force protection. When allowedAttempts is exceeded, the OTP is automatically deleted and a 403 response is returned. The user must request a new code.

For additional protection, consider adding application-level rate limiting on the /api/auth/* routes:

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const rateLimitMap = new Map();

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith("/api/auth")) {
    const ip = request.headers.get("x-forwarded-for") ?? "unknown";
    const now = Date.now();
    const windowMs = 60_000; // 1 minute
    const maxRequests = 10;

    const entry = rateLimitMap.get(ip);
    if (entry && now - entry.timestamp < windowMs) {
      if (entry.count >= maxRequests) {
        return NextResponse.json(
          { error: "Too many requests" },
          { status: 429 }
        );
      }
      entry.count++;
    } else {
      rateLimitMap.set(ip, { count: 1, timestamp: now });
    }
  }

  return NextResponse.next();
}

> Note: For production, use a Redis-backed rate limiter instead of an in-memory Map.

2. Phone Number Validation

Always validate phone numbers server-side before sending OTPs:

phoneNumber({
  phoneNumberValidator: (phoneNumber) => {
    // E.164 format validation
    return /^\+[1-9]\d{1,14}$/.test(phoneNumber);
  },
})

3. Timing Attack Prevention

As recommended by the Better Auth documentation, avoid awaiting the sendOTP function. This ensures consistent response times regardless of whether the phone number exists in your system, preventing attackers from enumerating valid numbers.

4. OTP Expiration

Keep expiresIn short (300 seconds or less). Longer windows increase the risk of interception.

---

Choosing an SMS Provider

The biggest friction point in SMS authentication isn't the code — it's the provider setup. Most SMS services require business registration, sender number pre-registration, compliance documents, and days of approval time.

For side projects, MVPs, and indie apps, this overhead kills momentum. Services like EasyAuth remove that barrier entirely — no documents required, API keys issued instantly on signup, and pricing starts at just 15-25 KRW per message (roughly $0.01-0.02 USD). They also offer 10 free messages to get started. Simply drop the API call into your sendOTP callback and your entire auth flow is live.

---

Project Structure Overview

my-auth-app/
├── app/
│   ├── api/auth/[...all]/route.ts   # Better Auth route handler
│   ├── components/PhoneAuth.tsx       # OTP UI component
│   ├── dashboard/page.tsx             # Protected page
│   ├── login/page.tsx                 # Login page
│   └── layout.tsx
├── lib/
│   ├── auth.ts                        # Server auth config
│   └── auth-client.ts                 # Client auth config
├── middleware.ts                       # Rate limiting
├── .env.local
└── package.json

---

Wrapping Up

Better Auth's Phone Number plugin handles the heavy lifting of OTP authentication — code generation, expiration, brute force protection, session creation — all behind a single sendOTP callback. Combined with Next.js 15's App Router, you get server-side session checks in React Server Components and a clean client-side API for sending and verifying codes.

The entire implementation is around 100 lines of actual code across 4-5 files. The hardest part used to be finding an SMS provider that doesn't require a week of paperwork. With no-friction services like EasyAuth, you can go from npx create-next-app to a fully working SMS auth system in under 30 minutes.

Build fast, validate fast. 🚀