مصادقة الويب الحديثة باستخدام Next.js و NextAuth.js و Prisma
مقدمة
تعتبر المصادقة حجر الزاوية في تطبيقات الويب الحديثة. يوفر Next.js، جنبًا إلى جنب مع NextAuth.js و Prisma، حلاً قويًا وأنيقًا لتنفيذ تدفقات مصادقة آمنة. يرشدك هذا المقال خلال إعداد نظام مصادقة أساسي باستخدام هذه التقنيات.
المتطلبات الأساسية
- Node.js مثبت
- فهم أساسي لـ React و Next.js
إعداد مشروع Next.js
-
إنشاء مشروع Next.js جديد:
npx create-next-app my-auth-app cd my-auth-app
-
تثبيت NextAuth.js و Prisma:
npm install next-auth @prisma/client npm install -D prisma
تهيئة Prisma
-
تهيئة Prisma:
npx prisma init
يقوم هذا بإنشاء دليل
prisma
مع ملفschema.prisma
. -
حدد نموذج المستخدم الخاص بك في
schema.prisma
:generator client { provider = "prisma-client-js" } datasource db { provider = "sqlite" url = env("DATABASE_URL") } model User { id String @id @default(uuid()) name String? email String? @unique password String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt }
-
قم بتحديث ملف
.env
الخاص بك بعنوان URL لقاعدة البيانات:DATABASE_URL="file:./dev.db"
-
تشغيل عمليات الترحيل:
npx prisma migrate dev --name init npx prisma generate
تهيئة NextAuth.js
-
أنشئ ملف
[...nextauth].js
فيpages/api/auth
:// pages/api/auth/[...nextauth].js import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" import { PrismaClient } from "@prisma/client" import bcrypt from 'bcryptjs'; const prisma = new PrismaClient(); export default NextAuth({ providers: [ CredentialsProvider({ name: "credentials", async authorize(credentials, req) { const user = await prisma.user.findUnique({ where: { email: credentials.email, }, }); if (!user) { throw new Error("No user found with this email"); } const isPasswordValid = await bcrypt.compare(credentials.password, user.password); if (!isPasswordValid) { throw new Error("Invalid password"); } return { id: user.id, email: user.email, name: user.name }; }, }), ], session: { strategy: "jwt", }, secret: process.env.NEXTAUTH_SECRET, });
تذكر تثبيت bcrypt
npm install bcryptjs
وقم بإنشاءNEXTAUTH_SECRET
آمن باستخدامopenssl rand -base64 32
وأضفه إلى ملف.env
الخاص بك. -
قم بتضمين
_app.js
الخاص بك معSessionProvider
:// pages/_app.js import { SessionProvider } from "next-auth/react" function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( <SessionProvider session={session}> <Component {...pageProps} /> </SessionProvider> ) } export default MyApp
بناء واجهة المستخدم
-
إنشاء نموذج تسجيل دخول بسيط:
// components/LoginForm.js import { useState } from 'react'; import { signIn } from 'next-auth/react'; function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); const result = await signIn('credentials', { email, password, redirect: false, }); if (result?.error) { console.error("Login error:", result.error); } }; return ( <form onSubmit={handleSubmit}> <input type="email" placeholder="البريد الإلكتروني" value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" placeholder="كلمة المرور" value={password} onChange={(e) => setPassword(e.target.value)} /> <button type="submit">تسجيل الدخول</button> </form> ); } export default LoginForm;
-
استخدم
useSession
لإدارة جلسة المستخدم في صفحاتك:// pages/index.js import { useSession, signIn, signOut } from "next-auth/react" import LoginForm from "../components/LoginForm"; export default function Home() { const { data: session } = useSession() if (session) { return ( <> تم تسجيل الدخول باسم {session.user.email} <br /> <button onClick={() => signOut()}>تسجيل الخروج</button> </> ) } return ( <> لم يتم تسجيل الدخول <br /> <LoginForm /> <button onClick={() => signIn()}>تسجيل الدخول</button> </> ) }
خاتمة
يوفر هذا المقال إعدادًا أساسيًا للمصادقة باستخدام Next.js و NextAuth.js و Prisma. يتم تشجيع إجراء المزيد من التخصيصات والتحسينات الأمنية، مثل إضافة التحقق من الصحة ومعالجة الأخطاء الأكثر قوة.