อยากทำระบบ สมัครสมาชิก (Sign-up) + ล็อกอิน (Login) ใน Next.js ใช่ไหม? 🤔 ไม่ต้องห่วง บทความนี้จะพาไปทำแบบ step-by-step ตั้งแต่สร้างบัญชี, เข้ารหัสรหัสผ่าน, จัดการ JWT Token, ยันป้องกัน API รับรองว่าอ่านจบแล้วทำเป็นแน่นอน!
🎯 แผนที่ที่เราจะทำ
✅ สมัครสมาชิก (Sign-up)
✅ เข้าสู่ระบบ (Login) พร้อมสร้าง JWT Token
✅ ป้องกัน API ด้วย Token
✅ แสดงข้อมูลผู้ใช้ที่ล็อกอินอยู่
💡 ใช้แค่ Next.js API Routes, bcrypt, และ JSON Web Token (JWT) ไม่ต้องมีเซิร์ฟเวอร์เพิ่ม!
🛠️ ติดตั้ง Next.js และไลบรารีที่จำเป็น
ก่อนอื่นต้องมีโปรเจกต์ Next.js ถ้ายังไม่มีให้สร้างเลย
npx create-next-app@latest my-auth-app
cd my-auth-app
npm install bcryptjs jsonwebtoken
👉 bcryptjs – ใช้เข้ารหัสรหัสผ่าน
👉 jsonwebtoken – ใช้สร้างและตรวจสอบ JWT Token
🔐 สร้าง API สำหรับ สมัครสมาชิก (Sign-up)
📌 โค้ด: pages/api/auth/signup.js
import bcrypt from "bcryptjs";
let users = []; // จำลองเป็น Database (จริงๆ ควรใช้ MongoDB หรือ PostgreSQL)
export default async function handler(req, res) {
if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });
const { username, password } = req.body;
if (users.find((u) => u.username === username)) {
return res.status(400).json({ error: "Username already exists" });
}
const hashedPassword = await bcrypt.hash(password, 10);
const newUser = { id: Date.now(), username, password: hashedPassword };
users.push(newUser);
res.json({ message: "User registered", user: { id: newUser.id, username: newUser.username } });
}
🔹 เช็กว่าชื่อผู้ใช้ซ้ำหรือไม่
🔹 เข้ารหัสรหัสผ่านก่อนบันทึก
🔑 สร้าง API สำหรับ เข้าสู่ระบบ (Login)
📌 โค้ด: pages/api/auth/login.js
import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";
let users = []; // จำลอง Database (ใช้ร่วมกับ signup.js)
export default async function handler(req, res) {
if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });
const { username, password } = req.body;
const user = users.find((u) => u.username === username);
if (!user || !(await bcrypt.compare(password, user.password))) {
return res.status(401).json({ error: "Invalid credentials" });
}
const token = jwt.sign({ userId: user.id, username: user.username }, "SECRET_KEY", { expiresIn: "1h" });
res.json({ message: "Login successful", token });
}
🔐 ถ้าล็อกอินสำเร็จ จะสร้าง JWT Token และส่งกลับไปให้ client
🛡️ สร้าง API ที่ต้องใช้ Token ในการเข้าถึง
📌 โค้ด: pages/api/auth/me.js
import jwt from "jsonwebtoken";
export default function handler(req, res) {
const { authorization } = req.headers;
if (!authorization) return res.status(401).json({ error: "No token provided" });
try {
const token = authorization.split(" ")[1];
const decoded = jwt.verify(token, "SECRET_KEY");
res.json({ message: "Authenticated", user: decoded });
} catch (err) {
res.status(401).json({ error: "Invalid token" });
}
}
🔒 API นี้ต้องใช้ JWT Token ใน Authorization header เพื่อเข้าถึง
🎨 สร้างหน้า UI สำหรับ สมัครสมาชิก + ล็อกอิน
📌 โค้ด: pages/index.js
import { useState } from "react";
export default function Home() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [token, setToken] = useState(null);
const [message, setMessage] = useState("");
const signup = async () => {
const res = await fetch("/api/auth/signup", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
const data = await res.json();
setMessage(data.message);
};
const login = async () => {
const res = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
const data = await res.json();
if (data.token) {
setToken(data.token);
setMessage("Login successful!");
} else {
setMessage("Login failed");
}
};
const getUserData = async () => {
const res = await fetch("/api/auth/me", {
headers: { Authorization: `Bearer ${token}` },
});
const data = await res.json();
setMessage(data.message || "Access denied");
};
return (
<div>
<h1>Sign-up & Login System</h1>
<input type="text" placeholder="Username" onChange={(e) => setUsername(e.target.value)} />
<input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
<button onClick={signup}>Sign Up</button>
<button onClick={login}>Login</button>
<button onClick={getUserData} disabled={!token}>Get User Data</button>
<p>{message}</p>
</div>
);
}
💡 อธิบายโค้ด:
✅ กรอกชื่อผู้ใช้ + รหัสผ่าน แล้วกด Sign Up เพื่อสมัคร
✅ กด Login ถ้าสำเร็จจะได้ JWT Token
✅ กด Get User Data เพื่อเรียก API ที่ป้องกันไว้
🚀 ทดสอบระบบ
- รันเซิร์ฟเวอร์ npm run dev
- เปิด http://localhost:3000
- ลอง Sign-up > Login > กด Get User Data
ถ้า JWT Token ถูกต้อง API จะให้เข้าถึงข้อมูลได้! 🎉
🎯 สรุป
✅ Sign-up พร้อมเข้ารหัสรหัสผ่าน
✅ Login แล้วสร้าง JWT Token
✅ ป้องกัน API ด้วย JWT
✅ ใช้ Next.js API Routes ทำระบบ Authentication แบบ stateless
🚀 พร้อมใช้ในโปรเจกต์จริง เพิ่ม Database และ refresh token ได้เลย!
