ازاي تبني نظام Authentication متكامل واحترافي في نكست جي إس (Nuxt 3) باستخدام NuxtAuth

أهلاً بيك يا بشمهندس في عالم تطوير الويب (Web Development). لو بتطور تطبيق باستخدام فريم وورك نكست (Nuxt 3)، أكيد في لحظة معينة جالك طلب من العملاء أو حتى من نفسك: "هو أنا كل مرة هقعد أكتب كود تسجيل الدخول (Login) ومنع الصلاحيات من الأول؟". وجع دماغ حماية التطبيقات (Application Security) وإدارة جلسات المستخدمين (User Sessions) وتخزين التوكنز (Tokens) دايمًا بياخد وقت وجهد كبير، خصوصاً لو عايز تربط الموقع بتسجيل الدخول عن طريق جوجل أو فيسبوك (Social Logins).

في المقال ده، هناخد رحلة خطوة بخطوة عشان نبني نظام مصادقة وتأمين (Authentication System) متكامل واحترافي جوه تطبيق نكست، باستخدام مكتبة نكست أوث (NuxtAuth) الرهيبة. هنفهم إزاي نربط التوكنز المحلية (Local Credentials) وكمان نسهل على المستخدم الدخول بحساباته السوشيال ميديا، وكل ده بطريقة نظيفة وسهلة البلع للمبرمجين المبتدئين والمحترفين.

ليه بنحتاج نظام Authentication قوي في تطبيقات الويب؟

حماية البيانات (Data Protection) مش مجرد رفاهية في أي موقع، دي العصب الأساسي لأي مشروع ناجح. تخيل إنك عامل تطبيق ويب وعامل شغل عالي، وبعدين يجي حد يخترق أو يشوف بيانات المستخدمين الخاصة! هنا بتيجي أهمية نظام الـ (Authentication) عشان نتأكد إن كل مستخدم هو فعلاً الشخص اللي ادعاه، ونحدد الصلاحيات بتاعته (Authorization) جوه صفحات التطبيق. زمان كنا بنقعد نعمل كوكي (Cookies) ولوجيك معقد، لكن دلوقتي مع نكست (Nuxt 3) ومكتبات زي نكست أوث (NuxtAuth)، الموضوع بقى أسهل بكتير وأكثر أماناً (Secure).

الخطوة الأولى: تثبيت وإعداد حزمة NuxtAuth في مشروعك

عشان نبتدي الشغل العملي، لازم يكون عندنا مشروع نكست جاهز. هنفتح التيرمينال (Terminal) ونكتب أمر التثبيت الخاص بالمكتبة. طبعاً، NuxtAuth المبنيه على Auth.js بتوفر علينا ساعات طويلة من الكتابة اليدوية.

تعالوا نبص على أمر التثبيت في ملف package.json أو تنزلها دايركت من التيرمينال:

npx nuxi module add @sidebase/nuxt-auth

بعد ما بنزل الحزمة، لازم نروح لملف الإعدادات الأساسي nuxt.config.ts عشان نعرف التطبيق إننا هنستخدم موديول الأوث (Auth Module). ده هيخلي نكست يفهم الراوتنج (Routing) والجلوسات تلقائياً.

إعداد ملف التكوين (Configuration File) والربط مع Backend

الخطوة الجاية هي إننا نعمل إعدادات البيئة (Environment Variables) بتاعت التطبيق. في ملف .env بتاعنا، لازم نحط السر الخاص بالتشفير (Secret) ورابط السيرفر الخلفي (Backend API URL) اللي هيبعت ويستقبل بيانات المستخدمين.

افتح ملف .env وحط الكود ده:

NUXT_AUTH_SECRET=your-super-secret-key-that-no-one-knows
NUXT_AUTH_ORIGIN=http://localhost:3000

بعد كدة، بنروح نعمل ملف إعدادات الأوث في مجلد السيرفر أو الجذر حسب وثائق المكتبة، عشان نحدد إزاي بنتحقق من بيانات المستخدم (Credentials Provider) وإزاي بنربط مع مزودي خدمة الإنترنت أو السوشيال ميديا زي Google و GitHub.

بناء صفحات تسجيل الدخول (Login Page) واستخدام الـ Composables

دلوقتي جه وقت الشغل الجد، وهو إننا نعمل واجهة المستخدم (UI) اللي هيسجل منها دخول. نكست أوث بتوفرلنا دوال جاهزة (Composables) زي signIn و signOut و useAuth عشان نقدر نتحكم في حالة المستخدم (Authentication State) بكل سهولة.

بص معايا على الكود البسيط ده لصفحة تسجيل الدخول:

<script setup>
const { signIn } = useAuth()

const username = ref('')
const password = ref('')

const handleLogin = async () => {
  try {
    await signIn('credentials', {
      username: username.value,
      password: password.value,
      callbackUrl: '/dashboard'
    })
  } catch (error) {
    console.error('فشل تسجيل الدخول:', error)
  }
}
</script>

<template>
  <div class="login-container">
    <h2>تسجيل الدخول للنظام</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="username" type="text" placeholder="اسم المستخدم" />
      <input v-model="password" type="password" placeholder="كلمة المرور" />
      <button type="submit">دخول</button>
    </form>
  </div>
</template>

حماية المسارات (Route Guards) ومنع المتسللين

مش منطقي أبداً إن أي حد يدخل على صفحة لوحة التحكم (Dashboard) من غير ما يكون مسجل دخول! هنا بيجي دور حماية المسارات في نكست (Route Middleware). بنعمل ملف ميدلوير جديد وليكن auth.ts جوه مجلد middleware.

الكود بيكون بالصيغة دي:

export default defineNuxtRouteMiddleware((to, from) => {
  const { status } = useAuth()
  
  if (status.value === 'unauthenticated') {
    return navigateTo('/login')
  }
})

بعد ما نعمل الميدلوير ده، نقدر نربطه بأي صفحة محمية بكل سهولة عن طريق إضافة السطر ده جوه تاج السكريبت في الصفحة: definePageMeta({ middleware: ['auth'] }).

الخاتمة: نصيحة أخيرة لتطوير مهاراتك

يا صاحبي، بناء نظام Authentication ممكن في الاول يبان معقد وفيه تفاصيل كتير، بس السر كله في الممارسة المستمرة وقراءة التوثيق الرسمي (Documentation) للمكتبات. متستعجلش وعود نفسك تكتب الكود بايدك وتجرب حالات الخطأ (Error Handling) عشان تطلع منتج نهائي قوي وآمن. بالتوفيق في مشروعك القادم!