Next.js/authentication

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

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

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

• استخدام التوليد الساكن ليصيَّر الخادم حالة تحميل يليها إحضار بيانات المستخدم إلى جانب العميل.
• إحضار بيانات المستخدم إلى جانب العميل لإزالة محتوىً لم يُستوثق منه.

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

تقرر Next.js تلقائيًا إن كانت الصفحة ساكنة وذلك إن لم تتطلب أية بيانات محجوبة. أي بمعنى آخر غياب الدالتين getServerSideProps و getInitialProps في هذه الصفحة. يمكن لهذه الصفحة تصيير حمل من الخادم يليه إحضار بيانات المستخدم إلى طرف العميل. ومن ميزات هذه النمط أنه يسمح بتقديم الصفحات من شبكة توصيل محتوى 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

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

إن صُدّرت الدالة غير المتزامنة 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:

• with-passport
• with-passport-and-next-connect

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

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

المصادر

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