العودة للمقالات

مصادقة حديثة باستخدام Next.js و NextAuth.js

Majd Muhtaseb09‏/08‏/20258 دقيقة

مقدمة

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

المتطلبات الأساسية

• تثبيت Node.js و npm
• إنشاء مشروع Next.js

التثبيت

قم بتثبيت next-auth:

npm install next-auth
# or
yarn add next-auth

الإعداد

1. إنشاء مسار API:

   قم بإنشاء ملف pages/api/auth/[...nextauth].js:

   import NextAuth from "next-auth"
   import GoogleProvider from "next-auth/providers/google"
   
   export default NextAuth({
     providers: [
       GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET
       })
     ],
     secret: process.env.NEXTAUTH_SECRET
   })
   

2. متغيرات البيئة:

   قم بتعيين متغيرات البيئة التالية في ملف .env.local الخاص بك:

   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   NEXTAUTH_SECRET=your_secret_key
   NEXTAUTH_URL=http://localhost:3000 # أو عنوان URL الذي تم نشره
   

   • احصل على GOOGLE_CLIENT_ID و GOOGLE_CLIENT_SECRET من Google Cloud Console.
   • قم بإنشاء سلسلة عشوائية لـ NEXTAUTH_SECRET.

3. تغليف تطبيقك بـ SessionProvider:

   في _app.js أو _app.tsx:

   import { SessionProvider } from "next-auth/react"
   
   function MyApp({ Component, pageProps: { session, ...pageProps } }) {
     return (
       <SessionProvider session={session}>
         <Component {...pageProps} />
       </SessionProvider>
     )
   }
   
   export default MyApp
   

الاستخدام

1. الحصول على الجلسة:

   استخدم الخطاف useSession للوصول إلى جلسة المستخدم الحالية:

   import { useSession, signIn, signOut } from "next-auth/react"
   
   export default function Component() {
     const { data: session } = useSession()
     if (session) {
       return (
         <>
           تم تسجيل الدخول باسم {session.user.email} <br />
           <button onClick={() => signOut()}>تسجيل الخروج</button>
         </>
       )
     }
     return (
       <>
         لم يتم تسجيل الدخول <br />
         <button onClick={() => signIn()}>تسجيل الدخول</button>
       </>
     )
   }
   

خاتمة

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