القائمة الرئيسية

الصفحات

تعديل المشاركة

ما تحتاج إلى معرفته عن تحديثات جديدة في "NextAuth.js v4"

New Updates in NextAuth.js v4،NextAuth.js v4،New Updates،in NextAuth.js v4،New Updates in NextAuth.js v4: What You Need to Know،NextAuth.js،useSession Hook،ما تحتاج إلى معرفته عن تحديثات جديدة في NextAuth.js v4،ما تحتاج إلى معرفته عن تحديثات جديدة في "NextAuth.js v4"،تحديثات جديدة في NextAuth.js v4 : ما تحتاج إلى معرفته،
 



ما تحتاج إلى معرفته عن تحديثات جديدة في "NextAuth.js v4"



المصادقة هي عنصر أساسي في تطوير التطبيق.
 يساعد على حماية بيانات المستخدم ومنع الأنشطة الضارة. 
ببساطة ، تحدد مصداقية هوية المستخدم ، مما يضمن أن المستخدمين المصرح لهم فقط 
يمكنهم الوصول إلى التطبيق وموارده.
يمكن أن يكون إنشاء نظام مصادقة مخصص مهمة تستغرق وقتًا طويلاً ، وهذا هو المكان
 الذي يكون فيه NextAuth.js مفيدًا. يوفر دعم المصادقة الآمنة للتطبيقات
 التي تم إنشاؤها باستخدام إطار عمل Next.js.


ما هو NextAuth.js ؟


NextAuth.js هي مكتبة خفيفة الوزن مفتوحة المصدر توفر
 المصادقة ودعم التخويل لتطبيقات Next.js. 
يتيح للمطورين إعداد المصادقة والترخيص لتطبيقات Next.js الخاصة بهم بسرعة وسهولة. 
يوفر ميزات مثل المصادقة مع عدة مزودين والبريد الإلكتروني والمصادقة بدون كلمة مرور.


كيف يعمل NextAuth.js في المصادقة ؟


يوفر حل المصادقة الخاص بـ NextAuth.js واجهة برمجة تطبيقات
 من جانب العميل يمكنك دمجها في تطبيق Next.js الخاص بك .
 يمكنك استخدامه لمصادقة المستخدمين بموفري تسجيل دخول مختلفين قاموا بإنشاء حسابات معهم.
تحت الغطاء ، تتم إعادة توجيه المستخدمين إلى صفحة تسجيل الدخول الخاصة بالموفر.
 عند المصادقة الناجحة ، يقوم الموفر بإرجاع بيانات الجلسة التي تحتوي على
 حمولة المستخدم. يمكن لهذه الحمولة إذن الوصول إلى التطبيق وموارده.


الميزات الجديدة في تحديثات  NextAuth.js (الإصدار 4)


في ديسمبر 2022 ، أصدرت NextAuth.js نسختها الرابعة. 
تم تحسين هذا الإصدار عن نسخته السابقة v3 بتحديثات وتعديلات جديدة. 
تركز التغييرات بشكل أساسي على تحسين استخدام المكتبة في عملية المصادقة:

1. تحديثات على useSession Hook


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


import { useSession } from "next-auth/react"

export default function Component() {
    const { data: session, status } = useSession()

    if (status === "authenticated") { 
        return <p>Signed in as {session.user.email}</p> 
    }

    return <p> Not signed in </p>
}


2. يصبح سياق SessionProvider إلزاميًا


الإصدار الجديد الرابع يفرض استخدام سياق SessionProvider. 
هذا يعني أنه سيتعين عليك تغليف تطبيقك بموفر جلسة الاستخدام.
 يوصي NextAuth.js بلف تطبيقك داخل ملف _app.jsx .
بالإضافة إلى ذلك ، تم استبدال طريقة clientMaxAge بـ refetchInterval. 
سيسهل هذا إحضار الجلسة بشكل دوري في الخلفية:


import { SessionProvider } from "next-auth/react" 

export default function App({
    Component, pageProps: { session, ...pageProps }, 
}) {
    return ( 
        <SessionProvider session={session} refetchInterval={5 * 60}> 
        <Component {...pageProps} /> </SessionProvider>
    )
}


3. استيراد الموردين بشكل فردي


يوفر NextAuth.js العديد من خدمات الموفر التي يمكنك استخدامها لتسجيل دخول مستخدم. يشملوا:

استخدام موفري OAuth المدمجين (مثل GitHub و Google).








باستخدام مزود البريد الإلكتروني.
في هذا الإصدار الجديد ، تحتاج إلى استيراد كل مزود على حدة:

import GoogleProvider from "next-auth/providers/google"
import Auth0Provider from "next-auth/providers/auth0";


4. تغييرات طفيفة أخرى


تمت إعادة تسمية الاستيراد من جانب العميل إلى المصادقة / التفاعل التالي من المصادقة / العميل التالي.
التغييرات على وسيطات عمليات رد الاتصال:

signIn({ user, account, profile, email, credentials })
session({ session, token, user })
jwt({ token, user, account, profile, isNewUser })


الشروع في استخدام NextAuth.js في المصادقة


لدمج NextAuth.js في تطبيقات Next.js ، اتبع الخطوات التالية:

1- قم بإنشاء تطبيق Next.js عن طريق تشغيل هذا الأمر:
 npx create-next-app <app name>
2- قم بتشغيل npm install next-auth في جهازك الطرفي لتثبيت
 NextAuth.js في تطبيق Next.js الخاص بك.
3- قم بزيارة وثائق NextAuth.js الرسمية وحدد المزود / الموفرون
 المفضلون لديك من قائمة المدعومين. بعد ذلك ، قم بإنشاء حساب في وحدة تحكم 
المطورين للمزود / الموفرين الذي اخترته وقم بتسجيل تطبيق Next.js الخاص بك.
4- في وحدة تحكم المطورين للمزود / الموفرين الذي اخترته ، حدد عنوان URL
 للمسار الرئيسي وعنوان URL لإعادة توجيه الاتصال ، واحفظ التغييرات 
وانسخ ClientID و Client Secret .
5- في الدليل الجذر لتطبيق Next.js ، قم بإنشاء ملف .
env للاحتفاظ بمعرف العميل وسر العميل .
6- أخيرًا ، في الدليل / pages / api ، أنشئ مجلدًا جديدًا يسمى auth . 
في مجلد المصادقة ، قم بإنشاء ملف جديد ، وقم بتسميته [... nextauth] .js. 
في الملف الذي تم إنشاؤه ، أضف الكود أدناه. 
يُظهر الرمز واجهة برمجة تطبيقات NextAuth.js من جانب العميل باستخدام موفر Google:


import GoogleProvider from "next-auth/providers/google";

providers: [
    GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET
   })
]


يمكنك الآن المضي قدمًا وإنشاء صفحة مصادقة تسجيل الدخول.
 فيما يلي عرض DOM لمكون تسجيل الدخول:


import React from 'react';
import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()

  if (session) {
    return (
      <>
        <p> Signed in as {session.user.email} </p>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }

  return (
    <>
      <p> Not signed in </p> 
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

يصل useSession Hook إلى كائن جلسة المستخدم الحالي. 
بمجرد أن يقوم المستخدم بتسجيل الدخول والمصادقة عليه من قبل Google ، 
يتم إرجاع كائن جلسة مع حمولة المستخدم. يسمح هذا لـ Next.js بعرض تفاصيل
 المستخدم على جانب العميل من التطبيق ، في هذه الحالة البريد الإلكتروني.

أنظمة المصادقة المخصصة مقابل الحلول الجاهزة للاستخدام مثل NextAuth.js


بالاختيار بين بناء نظام مصادقة مخصص ودمج حل مصادقة جاهز للاستخدام مثل
 NextAuth.js ، من المهم مراعاة التكلفة والتعقيد والأمان لكل حل.
إذا كانت لديك الموارد والخبرة اللازمة لتطوير نظام مصادقة مخصص ، فقد يكون هذا هو أفضل نهج لك.
 ومع ذلك ، إذا كنت تبحث عن حل جاهز سهل التنفيذ وآمن وفعال من حيث التكلفة ،
 فقد يكون NextAuth.js خيارًا جيدًا للنظر فيه. في النهاية ، سيعتمد الاختيار على احتياجاتك وتفضيلاتك.



أخر المواضيع من قسم : التكنولوجيا

جدول المحتويات