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

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

المؤلفMajd Muhtaseb30‏/05‏/202510 دقيقة
مصادقة الويب الحديثة باستخدام Next.js و NextAuth.js و Prisma

مقدمة

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