الاستيثاق Authentication في Next.js

يتيح لك الاستيثاق Authentication معرفة هوية المستخدم، بينما تتحكم من خلال رخصة الولج أو التصريح authorization بما يمكن الوصول إليه من موارد. تقدم لك Next.js أنماطًا متعددة من الاستيثاق وصُمم كل نمط لحالة مختلفة. سنمر في هذه الصفحة على كل حالة لتتمكن من الاختيار بناء على المعطيات المتوفرة.

أنماط الاستيثاق في Next.js

إن الخطوة الرئيسية في تحديد نمط الاستيثاق الذي تحتاجه هي فهم استراتيجية إحضار البيانات التي تريدها. يمكنك بعد ذلك تحديد مزود خدمة الاستيثاق الذي يدعم هذه الاستراتيجية. ستجد عمومًا نمطين أساسيين:

استخدام التوليد الساكن ليصيَّر الخادم حالة تحميل يليها إحضار بيانات المستخدم من جانب العميل.
إحضار بيانات المستخدم من جانب الخادم.

الاستيثاق في صفحات التوليد الساكن

تقرر Next.js تلقائيًا إن كانت الصفحة ساكنة وذلك إن لم تتطلب أية بيانات محجوبة. أي بمعنى آخر غياب الدالتين getServerSideProps و getInitialProps في هذه الصفحة. يمكن لهذه الصفحة تصيير حالة تحميل loading state من الخادم بالتزامن مع تنفيذ عملية إحضار بيانات المستخدم إلى طرف العميل. ومن ميزات هذه النمط أنه يسمح بتقديم الصفحات من شبكة توصيل محتوى CDN عامة وإعادة تحميلها باستخدام المكوّن next/link، وهذا ما يؤدي عمليًا إلى بلوغ مرحلة التفاعل Time to Interactive (واختصارًا TTI) بسرعة أكبر.

لنلق نظرة على هذه الصفحة الشخصية التي تصيّر مبدئيًا هيكل التحميل. حالما تنتهي معالجة طلب مصدره مستخدم معين ستُظهر هذه الصفحة اسم المستخدم:

// pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // إحضار بيانات المستخدم من جانب العميل
  const { user } = useUser({ redirectTo: '/login' })

  // تصيير حالة التحميل من ناحية الخادم
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>
  }

  // أظهر اسم المستخدم بعد إنتهاء تنفيذ الطلب
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

يمكنك الاطلاع على هذا المثال العملي، وتحقق من من مثال with-iron-session لمزيد من التفاصيل حول كيفية عملها.

الاستيثاق من صفحات يصيّرها الخادم

إن صُدّرت الدالة غير المتزامنة getServerSideProps من صفحة، تُصيّر Next.js هذه الصفحة مسبقًا عند كل طلب مستخدمة البيانات التي تعيدها تلك الدالة:

export async function getServerSideProps(context) {
  return {
    props: {}, // تمرر إلى مكوّن الصفحة على شكل خاصيات
  }
}

لنحوّل مثال الصفحة الشخصية السابق إلى صفحات مصيّرة من قبل الخادم. إن كانت هناك جلسة عمل ستُعاد القيمة user على شكل خاصية للمكوَّن Profile في الصفحة.

// pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  //أظهر اسم المستخدم دون الحاجة لحالة التحميل
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

إن ميزة هذا النمط هي منع عرض محتوى للحظات سريعة (أجزاء من الثانية) لا يجب عرضه إلا لمستخدم سجل دخوله قبل أن يُعاد توجيهه إلى المتصفح إن لم يكن. ومن المهم ملاحظة أن إحضار البيانات بواسطة الدالة سيمنع التصيير حتى يُجاب طلب الاستيثاق. ولكي تمنع ظاهرة عنق الزجاجة bottleneck وتزيد من قيمة مؤشر (زمن وصول أول بايت Time to First Byte واختصارًا TTFB) عليك أن تتأكد من سرعة الاستيثاق وإلا فكر باستخدام التوليد الساكن.

مكتبات الاستيثاق في Next.js

لنلق نظرة اللآن على بعض مكتبات الاستيثاق الخاصة ونستكشف طرق العمل معها.

iron-session: وذلك إن احتجت إلى خدمة لتقديم جلسة مُشفّرة عند مستوى منخفض دون حالة stateless.
next-auth: وذك إن أردت منظومة استيثاق كاملة الميزات دمجت معها مزوّدات (Google و Facebook و GitHub وغيرها) وكذلك مفاتيح استيثاق JWT و JWE عبر بريد إلكتروني/كلمة سر، وروابط الاستيثاق magic links وغيرها.

تدعم هذه المكتبات كلا نمطي الاستيثاق، وإن كنت مهتمًا باستخدام الأداة الوسطية Passport، الق نظرة على المثاليين الخارجيين التاليين على GitHub:

مكتبات استيثاق أخرى

الق نظرة على مخزن GitHub المخصص لهذا الغرض.

أمثلة

المصادر

الصفحة Authentication من توثيق Next.js الرسمي.