# JWT Authentication คืออะไร? คู่มือระบบ Login ด้วย JWT ใน Laravel และ Next.js สำหรับนักพัฒนา SME ปี 2026
ระบบ Authentication (การยืนยันตัวตน) เป็นพื้นฐานที่สำคัญที่สุดของทุกแอปพลิเคชันธุรกิจ ไม่ว่าจะเป็นระบบ CRM, E-commerce หรือ Internal Tool แต่นักพัฒนาหลายคนยังสับสนว่าควรใช้ Session-based Authentication หรือ JWT (JSON Web Token) และจะ Implement ยังไงให้ถูกต้อง
ปัญหาที่พบบ่อยในโปรเจกต์ Laravel + Next.js คือการจัดการ Authentication ระหว่าง Frontend และ Backend ที่อยู่คนละ Domain โดยเฉพาะเมื่อต้องรองรับ Mobile App หรือ Third-party Integration ด้วย
บทความนี้จะอธิบาย JWT คืออะไร, ทำงานอย่างไร, ข้อดีข้อเสียเมื่อเทียบกับ Session, และวิธี Implement ระบบ JWT Authentication อย่างถูกต้องด้วย Laravel Sanctum และ Next.js
JWT คืออะไร?
JWT (JSON Web Token) คือ Open Standard (RFC 7519) สำหรับการส่งข้อมูลระหว่าง Client และ Server อย่างปลอดภัย โดยข้อมูลถูก Encode เป็น JSON Object และลงลายมือชื่อ (Sign) ด้วย Secret Key หรือ RSA Key
JWT ประกอบด้วย 3 ส่วน คั่นด้วยจุด (.) ดังนี้:
ตัวอย่าง JWT: `eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsInJvbGUiOiJhZG1pbiJ9.signature`
Session vs JWT: เลือกอะไรดี?
| เกณฑ์ | Session Authentication | JWT Authentication |
|-------|----------------------|-------------------|
| เก็บข้อมูลที่ | Server (Database/Redis) | Client (Cookie/LocalStorage) |
| Scalability | ต้องแชร์ Session Store | Stateless รองรับ Scale ง่าย |
| เพิกถอน (Revoke) | ทำได้ทันที | ต้องใช้ Blacklist/Short Expiry |
| เหมาะกับ | Web App แบบ Traditional | API, Mobile App, Microservices |
| ความปลอดภัย | ดีกว่าถ้า Config ถูก | ดีถ้าเก็บใน HttpOnly Cookie |
สรุป: ถ้าเป็น Laravel + Next.js แนะนำให้ใช้ Laravel Sanctum ซึ่งรองรับทั้ง Session (สำหรับ Web) และ API Token (สำหรับ Mobile/SPA) ในชุดเดียว
วิธีสร้าง JWT Authentication ด้วย Laravel Sanctum
ขั้นตอนที่ 1: ติดตั้ง Sanctum
```bash
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate
```
ขั้นตอนที่ 2: เพิ่ม HasApiTokens ใน User Model
```php
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
}
```
ขั้นตอนที่ 3: สร้าง Auth Controller
```php
class AuthController extends Controller
{
public function login(Request $request)
{
$request->validate([
'email' => 'required|email',
'password' => 'required',
]);
if (!Auth::attempt($request->only('email', 'password'))) {
return response()->json(['message' => 'Invalid credentials'], 401);
}
$user = Auth::user();
$token = $user->createToken('auth-token')->plainTextToken;
return response()->json([
'token' => $token,
'user' => $user,
]);
}
public function logout(Request $request)
{
$request->user()->currentAccessToken()->delete();
return response()->json(['message' => 'Logged out successfully']);
}
}
```
ขั้นตอนที่ 4: เพิ่ม Routes
```php
Route::post('/login', [AuthController::class, 'login']);
Route::middleware('auth:sanctum')->group(function () {
Route::post('/logout', [AuthController::class, 'logout']);
Route::get('/user', fn(Request $r) => $r->user());
});
```
วิธีใช้ JWT Token ใน Next.js
ขั้นตอนที่ 5: Login จาก Next.js
```typescript
// lib/auth.ts
export async function loginUser(email: string, password: string) {
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
});
if (!response.ok) throw new Error('Login failed');
const data = await response.json();
return data;
}
```
ขั้นตอนที่ 6: ป้องกัน Routes ด้วย Middleware
```typescript
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*', '/admin/:path*'],
};
```
Best Practices ความปลอดภัย JWT
ความปลอดภัยของระบบ JWT ขึ้นอยู่กับการ Implement ที่ถูกต้อง สิ่งที่ควรทำและไม่ควรทำ:
เปรียบเทียบ Authentication Libraries สำหรับ Next.js
| Library | ความง่าย | JWT Support | Provider Support | เหมาะกับ |
|---------|---------|-------------|-----------------|---------|
| Laravel Sanctum (API) | ★★★★★ | ✓ | — | Laravel Backend |
| NextAuth.js | ★★★★ | ✓ | Google, GitHub | Full-stack Next.js |
| Auth.js v5 | ★★★ | ✓ | 50+ Providers | Enterprise |
| Supabase Auth | ★★★★★ | ✓ | Google, Facebook | Supabase Backend |
สรุปและก้าวต่อไป
JWT Authentication เป็นมาตรฐานที่ควรรู้สำหรับนักพัฒนา Full-stack ทุกคน โดยเฉพาะถ้าทำงานกับ Laravel + Next.js การใช้ Laravel Sanctum เป็นตัวเลือกที่ดีที่สุดเพราะรองรับทั้ง Web และ API ในชุดเดียว
Checklist ก่อน Deploy:
ต้องการให้ ADS FIT ช่วยออกแบบระบบ Authentication ที่ปลอดภัยสำหรับโปรเจกต์ของคุณ? ติดต่อเราวันนี้ ทีม Developer ของเราพร้อมช่วยคุณสร้างระบบที่ปลอดภัย เสถียร และ Scale ได้