مصادقة حديثة باستخدام Next.js و NextAuth.js
مقدمة
المصادقة هي جانب حاسم في تطبيقات الويب الحديثة. تعمل 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
، يمكنك بسهولة إدارة جلسات المستخدم وحماية موارد التطبيق الخاص بك.