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

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

Majd Muhtaseb28‏/04‏/202510 دقيقة

مقدمة

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

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

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

التثبيت

أولاً، قم بتثبيت NextAuth.js:

npm install next-auth
# أو
yarn add next-auth
# أو
pnpm add next-auth

الإعداد

قم بإنشاء ملف باسم [...nextauth].js داخل الدليل pages/api/auth. سيتعامل هذا الملف مع مسارات المصادقة.

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    })
  ],
  secret: process.env.NEXTAUTH_SECRET
}

export default NextAuth(authOptions)

تذكر تعيين متغيرات البيئة GOOGLE_CLIENT_ID و GOOGLE_CLIENT_SECRET و NEXTAUTH_SECRET. يمكنك الحصول على معرف عميل Google وسر العميل من Google Cloud Console. قم بإنشاء سلسلة عشوائية آمنة لـ NEXTAUTH_SECRET.

الاستخدام

في مكونات Next.js الخاصة بك، يمكنك استخدام الخطاف useSession للوصول إلى جلسة المستخدم:

// components/Profile.js
import { useSession, signOut } from "next-auth/react"

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

  if (session) {
    return (
      <>
        تم تسجيل الدخول باسم {session.user.email} <br />
        <button onClick={() => signOut()}>تسجيل الخروج</button>
      </>
    )
  }
  return (
    <>
        لم يتم تسجيل الدخول <br />
      <a href="/api/auth/signin">تسجيل الدخول</a>
    </>
  )
}

قم بتضمين تطبيقك بـ SessionProvider في _app.js:

// pages/_app.js
import { SessionProvider } from "next-auth/react"

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

export default MyApp

مسارات API (اختياري)

يمكنك أيضًا حماية مسارات API باستخدام الدالة getSession:

// pages/api/protected.js
import { getSession } from "next-auth/react"

export default async function handler(req, res) {
  const session = await getSession({ req })

  if (session) {
    res.send({ content: "هذا محتوى محمي." })
  } else {
    res.status(401).send({ error: "يجب تسجيل الدخول لعرض المحتوى المحمي." })
  }
}

خاتمة

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