ระบบยืนยันตัวตนเป็นส่วนสำคัญของเว็บแอปพลิเคชันแทบทุกประเภท ไม่ว่าจะเป็นระบบสมาชิก แพลตฟอร์ม SaaS ระบบหลังบ้าน หรือแอปพลิเคชันภายในองค์กร

แม้การสร้างหน้า Login จะดูไม่ซับซ้อน แต่ระบบ Authentication ที่พร้อมใช้งานจริงยังต้องรองรับองค์ประกอบอีกหลายส่วน เช่น

  • การลงทะเบียนและเข้าสู่ระบบ
  • การจัดการ Session
  • การยืนยันอีเมลและรีเซ็ตรหัสผ่าน
  • Social Login
  • Two-Factor Authentication
  • การจัดการสิทธิ์และบทบาท
  • การป้องกันการโจมตีและการใช้งานผิดปกติ

Better Auth จึงเป็นอีกทางเลือกที่น่าสนใจสำหรับนักพัฒนา JavaScript และ TypeScript ที่ต้องการระบบ Authentication ซึ่งควบคุมได้จากภายในโค้ดของตนเอง

#Better Auth คืออะไร

Better Auth เป็นเฟรมเวิร์กสำหรับจัดการ Authentication และ Authorization บน TypeScript ที่ออกแบบมาให้ไม่ผูกติดกับเว็บเฟรมเวิร์กใดเว็บเฟรมเวิร์กหนึ่ง หรือที่เรียกว่า framework-agnostic

นักพัฒนาสามารถนำไปใช้ร่วมกับ Next.js, React Router, Nuxt, SvelteKit, Hono, Express, Elysia, Cloudflare Workers และแพลตฟอร์มอื่นที่รองรับมาตรฐาน Request และ Response ได้

Better Auth มีความสามารถพื้นฐานพร้อมใช้งาน เช่น

  • Email และ Password
  • Social Login
  • Account Management
  • Session Management
  • Rate Limiting
  • Database Migration
  • Organization และ Access Control
  • Two-Factor Authentication

นอกจากนี้ยังขยายความสามารถผ่านระบบ Plugin ได้ เช่น Passkey, Magic Link, Email OTP, Phone Number, Anonymous Session, Multi-session และ SSO

#Authentication และ Authorization ต่างกันอย่างไร

#Authentication

Authentication คือกระบวนการตรวจสอบว่า ผู้ใช้เป็นใคร

ผู้ใช้กรอก Email และ Password
          ↓
ระบบตรวจสอบข้อมูลบัญชี
          ↓
สร้าง Session ให้ผู้ใช้

#Authorization

Authorization คือกระบวนการตรวจสอบว่า ผู้ใช้มีสิทธิ์ทำอะไร

Administrator → จัดการผู้ใช้ทั้งหมด
Instructor    → จัดการรายวิชา
Student       → ดูข้อมูลและส่งงาน

ระบบที่ดีจึงไม่ควรหยุดอยู่เพียงการ Login แต่ต้องควบคุมการเข้าถึงข้อมูลและฟังก์ชันตามบทบาทของผู้ใช้ด้วย

#จุดเด่นของ Better Auth

#1. ออกแบบมาสำหรับ TypeScript

Better Auth พัฒนาทั้งฝั่ง Server และ Client ด้วย TypeScript ทำให้สามารถอนุมานชนิดข้อมูลของ User, Session และข้อมูลที่เพิ่มผ่าน Plugin ได้

import { createAuthClient } from "better-auth/client";

const authClient = createAuthClient();

export type Session = typeof authClient.$Infer.Session;

แนวทางนี้ช่วยลดการประกาศ Type ซ้ำ และลดความเสี่ยงที่ Type ฝั่ง Frontend จะไม่ตรงกับข้อมูลฝั่ง Backend

#2. ควบคุมข้อมูลผู้ใช้ได้เอง

Better Auth เชื่อมต่อกับฐานข้อมูลของระบบเพื่อจัดเก็บข้อมูล เช่น

  • User
  • Account
  • Session
  • Verification Token
  • ข้อมูลเพิ่มเติมจาก Plugin

จึงเหมาะกับระบบที่ต้องการควบคุมโครงสร้างข้อมูลและนโยบายการจัดเก็บข้อมูลด้วยตนเอง โดยรองรับ SQLite, PostgreSQL และ MySQL รวมถึง Adapter สำหรับ ORM เช่น Drizzle, Prisma และ MongoDB

#3. ขยายความสามารถผ่าน Plugin

Better Auth ใช้ Plugin เป็นกลไกหลักในการเพิ่มฟังก์ชันที่ซับซ้อน โดย Plugin สามารถเพิ่ม Endpoint, Database Schema, Middleware และ Client API ให้กับระบบได้

ตัวอย่างความสามารถที่เพิ่มผ่าน Plugin ได้แก่

  • Two-Factor Authentication
  • Passkey
  • Magic Link
  • Email OTP
  • Organization
  • Admin
  • API Key
  • SSO
  • OAuth Provider
  • Multi-session

#4. รองรับ Organization และ Multi-tenant

Organization Plugin ช่วยจัดการสมาชิก ทีม บทบาท และสิทธิ์ภายในองค์กร เหมาะกับระบบ SaaS ที่ผู้ใช้หนึ่งคนอาจเป็นสมาชิกของหลายองค์กร

Organization
├── Owner
├── Administrator
├── Member
└── Teams
    ├── Development
    ├── Marketing
    └── Support

แต่ละบทบาทสามารถกำหนด Permission ที่แตกต่างกันได้ เช่น create, read, update และ delete

#5. รองรับระบบความปลอดภัยสมัยใหม่

Better Auth สามารถเพิ่ม Passkey ผ่านมาตรฐาน WebAuthn และ FIDO2 ทำให้ผู้ใช้เข้าสู่ระบบด้วย Biometrics, PIN หรือ Security Key โดยไม่ต้องใช้รหัสผ่านแบบเดิม

สำหรับระบบองค์กรยังสามารถรองรับ OIDC, OAuth 2.0 และ SAML 2.0 ผ่านระบบ SSO ได้

#ทดลองใช้งาน Better Auth กับ Next.js

ตัวอย่างต่อไปนี้เป็นการติดตั้ง Better Auth ใน Next.js โดยใช้ SQLite เพื่อให้ทดลองใช้งานได้ง่าย

#1. ติดตั้งแพ็กเกจ

npm install better-auth better-sqlite3

#2. กำหนด Environment Variables

สร้างไฟล์ .env ที่โฟลเดอร์หลักของโปรเจกต์

BETTER_AUTH_SECRET=replace-with-a-secure-random-secret
BETTER_AUTH_URL=http://localhost:3000

ค่า BETTER_AUTH_SECRET ควรสร้างจากข้อมูลสุ่มที่มีความแข็งแรงสูง

openssl rand -base64 32

ไม่ควร Commit ไฟล์ .env หรือ Secret Key ขึ้น Git Repository

#3. สร้าง Better Auth Instance

สร้างไฟล์ src/lib/auth.ts

import { betterAuth } from "better-auth";
import Database from "better-sqlite3";

export const auth = betterAuth({
  database: new Database("./sqlite.db"),

  emailAndPassword: {
    enabled: true,
  },

  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
  },
});

Configuration นี้เปิดใช้งาน Email/Password และ GitHub Login พร้อมกำหนดให้ SQLite เป็นฐานข้อมูลสำหรับจัดเก็บ User, Account และ Session

#4. สร้างตารางฐานข้อมูล

npx auth@latest migrate

สำหรับโปรเจกต์ที่ใช้ Prisma หรือ Drizzle สามารถใช้คำสั่งต่อไปนี้เพื่อสร้าง Schema หรือ Migration

npx auth@latest generate

#5. เชื่อมต่อ API Route

สำหรับ Next.js App Router ให้สร้างไฟล์

src/app/api/auth/[...all]/route.ts

เพิ่มโค้ดดังนี้

import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

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

Route นี้จะรับคำขอภายใต้ /api/auth/* และส่งต่อให้ Better Auth จัดการ

#6. สร้าง Auth Client

สร้างไฟล์ src/lib/auth-client.ts

import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
  baseURL: "http://localhost:3000",
});

กรณี Frontend และ Auth Server ทำงานภายใต้ Domain เดียวกัน สามารถละ baseURL ได้

#ตัวอย่างการสมัครสมาชิก

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

const { data, error } = await authClient.signUp.email({
  name: "สมชาย ใจดี",
  email: "somchai@example.com",
  password: "secure-password",
  callbackURL: "/dashboard",
});

if (error) {
  console.error(error.message);
}

#ตัวอย่างการเข้าสู่ระบบ

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

const { data, error } = await authClient.signIn.email({
  email: "somchai@example.com",
  password: "secure-password",
  rememberMe: true,
  callbackURL: "/dashboard",
});

if (error) {
  console.error(error.message);
}

สำหรับ Social Login สามารถใช้ signIn.social() ได้

await authClient.signIn.social({
  provider: "github",
  callbackURL: "/dashboard",
  errorCallbackURL: "/login-error",
  newUserCallbackURL: "/welcome",
});

#การอ่านข้อมูล Session

ภายใน React Component สามารถใช้ useSession() เพื่อติดตามสถานะ Session แบบ Reactive ได้

"use client";

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

export function UserProfile() {
  const {
    data: session,
    isPending,
    error,
  } = authClient.useSession();

  if (isPending) {
    return <p>กำลังโหลดข้อมูล...</p>;
  }

  if (error || !session) {
    return <p>กรุณาเข้าสู่ระบบ</p>;
  }

  return (
    <section>
      <h2>ยินดีต้อนรับ {session.user.name}</h2>
      <p>{session.user.email}</p>
    </section>
  );
}

Better Auth ใช้ Cookie-based Session เป็นแนวทางพื้นฐาน โดย Server จะตรวจสอบ Session Token และส่งข้อมูลผู้ใช้กลับมาเมื่อ Session ยังมีผลใช้งาน

#การออกจากระบบ

await authClient.signOut({
  fetchOptions: {
    onSuccess: () => {
      window.location.href = "/login";
    },
  },
});

#เพิ่ม Two-Factor Authentication

import { betterAuth } from "better-auth";
import { twoFactor } from "better-auth/plugins";

export const auth = betterAuth({
  plugins: [
    twoFactor(),
  ],
});

หลังจากเพิ่ม Plugin แล้วควรอัปเดต Database Schema

npx auth@latest migrate

#ตัวอย่างการเพิ่ม Role ให้กับ User

import { betterAuth } from "better-auth";

export const auth = betterAuth({
  user: {
    additionalFields: {
      role: {
        type: "string",
        input: false,
      },
    },
  },
});

การกำหนด input: false ช่วยป้องกันไม่ให้ผู้ใช้ส่งค่าบทบาทของตนเองเข้ามาขณะสมัครสมาชิก เช่น กำหนดตนเองเป็น admin

อย่างไรก็ตาม ทุก API Endpoint ต้องตรวจสอบ Permission ฝั่ง Server ก่อนดำเนินการกับข้อมูลสำคัญเสมอ

#Better Auth เหมาะกับระบบประเภทใด

ประเภทระบบ เหตุผลที่เหมาะสม
Next.js Full-stack ใช้ TypeScript ร่วมกันทั้ง Client และ Server
SaaS Platform รองรับ Organization, Team และ Access Control
Multi-tenant Application แยกผู้ใช้และสิทธิ์ตามองค์กรได้
Internal Application เชื่อมต่อ SSO และระบบองค์กรได้
Developer Platform เพิ่ม API Key, OAuth และ Plugin เฉพาะทางได้
ระบบที่ควบคุมข้อมูลเอง จัดเก็บ User และ Session ในฐานข้อมูลของระบบ

#Better Auth อาจไม่ใช่ตัวเลือกแรกเมื่อใด

Better Auth อาจไม่ใช่ตัวเลือกแรกในกรณีต่อไปนี้

  1. ระบบไม่ได้ใช้ JavaScript หรือ TypeScript เป็น Backend หลัก
  2. ทีมต้องการบริการ Authentication แบบ Managed เต็มรูปแบบ
  3. ระบบเดิมมี Authentication ที่มีเสถียรภาพอยู่แล้ว
  4. โครงการเป็น Laravel Monolith ซึ่งใช้ Fortify, Sanctum, Socialite และ Policy ได้โดยตรง
  5. ทีมยังไม่มีความพร้อมในการดูแล Email Delivery, OAuth Configuration, Database Migration และ Security Monitoring

สำหรับ Laravel ที่ใช้ Inertia React การใช้ระบบ Authentication ของ Laravel มักมีโครงสร้างตรงไปตรงมากว่า แต่ Better Auth จะน่าสนใจเมื่อระบบเป็น TypeScript-first หรือมี Auth Service กลางสำหรับหลายแอปพลิเคชัน

#ข้อแนะนำด้านความปลอดภัย

ก่อนนำ Better Auth ไปใช้ใน Production ควรตรวจสอบอย่างน้อยประเด็นต่อไปนี้

  • ใช้ HTTPS ทุก Environment ที่เปิดให้ผู้ใช้ภายนอกเข้าถึง
  • จัดเก็บ Secret ใน Secret Manager หรือ Environment Variable
  • เปิด Email Verification สำหรับระบบที่ต้องตรวจสอบตัวตน
  • เพิ่ม Rate Limiting ใน Endpoint ที่เกี่ยวข้องกับ Login
  • ไม่เปิดเผยรายละเอียด Error ที่ช่วยให้คาดเดาบัญชีผู้ใช้ได้
  • ตรวจสอบ Authorization ฝั่ง Server ทุกครั้ง
  • เปิด 2FA หรือ Passkey สำหรับบัญชีที่มีสิทธิ์สูง
  • กำหนดอายุและนโยบาย Session ให้เหมาะกับระดับความเสี่ยง
  • บันทึก Audit Log สำหรับเหตุการณ์สำคัญ
  • ทดสอบการยกเลิก Session และ Account Recovery ก่อนเปิดใช้งานจริง

#สรุป

Better Auth เป็นเฟรมเวิร์ก Authentication และ Authorization ที่ออกแบบมาสำหรับระบบ TypeScript สมัยใหม่ มีจุดเด่นด้าน Type Safety, Database Integration, Session Management และ Plugin Ecosystem

นักพัฒนาสามารถเริ่มต้นจาก Email/Password หรือ Social Login แล้วค่อยขยายไปสู่ความสามารถระดับสูง เช่น Passkey, Two-Factor Authentication, Organization, Multi-tenant และ Enterprise SSO ได้ตามความต้องการของระบบ

ความสะดวกในการพัฒนา
        +
การควบคุมข้อมูลและโครงสร้างระบบ
        +
ความสามารถในการขยายระบบในอนาคต

สำหรับโครงการ Next.js, React หรือ Backend ที่ใช้ Node.js และ TypeScript เป็นหลัก Better Auth ถือเป็นเครื่องมือที่ควรนำมาศึกษาและทดลองใช้ในการพัฒนาระบบ Authentication ยุคใหม่