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

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

Majd Muhtaseb30‏/05‏/202510 دقيقة

مقدمة

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

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

• Node.js مثبت
• فهم أساسي لـ React و Next.js

إعداد مشروع Next.js

1. إنشاء مشروع Next.js جديد:

   npx create-next-app my-auth-app
   cd my-auth-app
   

2. تثبيت NextAuth.js و Prisma:

   npm install next-auth @prisma/client
   npm install -D prisma
   

تهيئة Prisma

1. تهيئة Prisma:

   npx prisma init
   

   يقوم هذا بإنشاء دليل prisma مع ملف schema.prisma.

2. حدد نموذج المستخدم الخاص بك في 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
   }
   

3. قم بتحديث ملف .env الخاص بك بعنوان URL لقاعدة البيانات:

   DATABASE_URL="file:./dev.db"
   

4. تشغيل عمليات الترحيل:

   npx prisma migrate dev --name init
   npx prisma generate
   

تهيئة NextAuth.js

1. أنشئ ملف [...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 الخاص بك.

2. قم بتضمين _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
   

بناء واجهة المستخدم

1. إنشاء نموذج تسجيل دخول بسيط:

   // 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;
   

2. استخدم 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. يتم تشجيع إجراء المزيد من التخصيصات والتحسينات الأمنية، مثل إضافة التحقق من الصحة ومعالجة الأخطاء الأكثر قوة.