Next.js/authentication

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

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

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

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

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

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

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