Magdy Atef Zahran

إزاي نضيف Two-Factor Authentication (2FA) للموقع في Next.js؟

لو شغال على موقع فيه تسجيل دخول فأنت أكيد عارف إن الباسورد لوحده مش كفاية لحماية الحسابات خاصة لو المستخدمين بيستخدموا باسوردات ضعيفة أو متكررة… طيب والحل؟

ـ المصادقة الثنائية (2FA) اللي بتضيف طبقة أمان إضافية عن طريق كود OTP (بيوصل على الإيميل أو تطبيق زي Google Authenticator)، يعني حتى لو حد سرب الباسورد مش هيقدر يدخل من غير الكود.

طيب إزاي نضيف Two-Factor Authentication (2FA) للموقع؟ دا اللي هنشرحه دلوقتي سوا بإذن الله 👇

1️⃣ هنستخدم NextAuth.js مع 2FA

NextAuth.js بيدعم 2FA وده أسرع حل لو بتستخدم OAuth Providers زي Google أو GitHub أو تسجيل دخول بالإيميل عادي.

- تثبيت NextAuth.js في المشروع:

npm install next-auth

- بعد كدا هنعدل الAPI Route الخاصة بالمصادقة (/pages/api/auth/[…nextauth].js):

import NextAuth from “next-auth”; import EmailProvider from “next-auth/providers/email”; export default NextAuth({ providers: [ EmailProvider({ server: process.env.EMAIL_SERVER, from: process.env.EMAIL_FROM, }), ], callbacks: { async signIn({ user }) { if (user && user.email) { // بعد التحقق من الإيميل، ابعت كود 2FA للمستخدم const otp = generateOTP(); // دالة لإنشاء كود عشوائي await sendOTPByEmail(user.email, otp); return “/verify-otp”; // توجيه المستخدم لصفحة تأكيد الكود } return true; }, }, });

👈 كدا لما المستخدم يدخل بالباسورد الموقع هيبعت له كود OTP على الإيميل وبعدها لازم يكتبه عشان يقدر يكمل تسجيل الدخول.

2️⃣ إنشاء صفحة تحقق من الكود (OTP Verification Page)

بعد ما المستخدم يدخل لازم يكتب الكود اللي وصله عشان يقدر يدخل لحسابه.

- إنشاء صفحة /verify-otp.js داخل /pages:

import { useState } from “react”; export default function VerifyOTP() { const [otp, setOtp] = useState(“”); const handleVerify = async () => { const res = await fetch(“/api/auth/verify-otp”, { method: “POST”, headers: { “Content-Type”: “application/json” }, body: JSON.stringify({ otp }), }); if (res.ok) { window.location.href = “/dashboard”; // لو الكود صح، دخّل المستخدم } else { alert(“الكود غلط، جرّب تاني!”); } }; return ( <div> <h2>أدخل كود التحقق</h2> setOtp(e.target.value)} /> <button>تأكيد</button> </div> ); }

👈 المستخدم بيكتب الكود، ولو صحيح، يدخل على حسابه.

3️⃣ إنشاء API لتأكيد الكود (OTP Verification API)

هنضيف API Route جديدة عشان تتحقق من الكود اللي المستخدم كتبه.

- إنشاء ملف /pages/api/auth/verify-otp.js:

export default async function handler(req, res) { if (req.method === “POST”) { const { otp } = JSON.parse(req.body); // تحقق من صحة الكود (هنا هتخزن الكود في DB أو Redis) const isValid = await checkOTPInDatabase(otp); if (isValid) { return res.status(200).json({ success: true }); } return res.status(401).json({ error: “OTP غير صحيح” }); } res.status(405).end(); }

👈 الكود بيتقارن بالكود المنخزن في الـ DB ولو متطابق المستخدم يدخل.

4️⃣ استخدام Google Authenticator بدل الـ OTP على الإيميل

لو عاوز الـ 2FA يكون أسرع وأفضل استخدم Google Authenticator بدل من الأكواد اللي بتوصل بالإيميل.

- تثبيت مكتبة Speakeasy لإنشاء أكواد Google Authenticator:

npm install speakeasy

- لما المستخدم يفعل الـ 2FA، هننشئ كود سري خاص بيه

import speakeasy from “speakeasy”; const secret = speakeasy.generateSecret({ length: 20 }); console.log(“Secret Key:”, secret.base32); // خزن المفتاح ده للمستخدم في DB