Next.js: المصادقة والتفويض

// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth'
import GitHub from 'next-auth/providers/github'
import Google from 'next-auth/providers/google'
import Credentials from 'next-auth/providers/credentials'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub,
    Google,
    Credentials({
      credentials: { email: {}, password: {} },
      async authorize(credentials) {
        const user = { id: '1', name: 'Alice', email: 'alice@taskflow.io', role: 'admin' }
        return credentials.email === 'alice@taskflow.io' && credentials.password === 'pass123' ? user : null
      }
    })
  ],
  callbacks: { session: ({ session, token }) => ({ ...session, user: { ...session.user, role: token.role } }) }
})

npm install next-auth@beta
npx auth secret    # إنشاء AUTH_SECRET

// auth.ts — إعداد المصادقة المركزي
import NextAuth from 'next-auth'
import GitHub from 'next-auth/providers/github'
import Google from 'next-auth/providers/google'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub({ clientId: process.env.GITHUB_ID!, clientSecret: process.env.GITHUB_SECRET! }),
    Google({ clientId: process.env.GOOGLE_ID!, clientSecret: process.env.GOOGLE_SECRET! })
  ]
})

تم تنفيذ كود TypeScript بنجاح.

// auth.ts — مزج Credentials + OAuth
import NextAuth from 'next-auth'
import Credentials from 'next-auth/providers/credentials'
import GitHub from 'next-auth/providers/github'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      name: 'credentials',
      credentials: {
        email: { label: 'البريد الإلكتروني', type: 'email' },
        password: { label: 'كلمة المرور', type: 'password' }
      },
      async authorize(credentials) {
        const { email, password } = credentials as { email: string; password: string }
        // في المشروع الفعلي: استعلام قاعدة البيانات
        const user = { id: '1', name: 'Alice', email, role: 'admin' }
        if (email === 'admin@taskflow.io' && password === 'admin123') return user
        return null
      }
    }),
    GitHub
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.role = (user as any).role
      return token
    },
    async session({ session, token }) {
      session.user.role = token.role as string
      return session
    }
  }
})

تم تحميل تكوين TypeScript بنجاح.

// auth.ts — Database Session + Prisma
import NextAuth from 'next-auth'
import { PrismaAdapter } from '@auth/prisma-adapter'
import { prisma } from '@/lib/prisma'

export const { handlers, signIn, signOut, auth } = NextAuth({
  adapter: PrismaAdapter(prisma),
  session: { strategy: 'database' },
  providers: [GitHub, Google]
})

تم تنفيذ وحدة TypeScript بنجاح.

// app/dashboard/page.tsx — استرجاع Session من جانب الخادم
import { auth } from '@/auth'

export default async function DashboardPage() {
  const session = await auth()

  if (!session?.user) return <p>يرجى تسجيل الدخول أولاً</p>

  return (
    <div>
      <h1>مرحبًا بعودتك، {session.user.name}</h1>
      <p>البريد الإلكتروني: {session.user.email}</p>
      <p>الدور: {session.user.role}</p>
      <img src={session.user.image!} alt="صورة رمزية" width={48} height={48} />
    </div>
  )
}

<h1>مرحبًا بعودتك، Alice</h1>
<p>البريد الإلكتروني: alice@taskflow.io</p>
<p>الدور: admin</p>

<h1>Welcome back, Alice</h1>
<p>Email: alice@taskflow.io</p>
<p>Role: admin</p>

// middleware.ts
import { auth } from '@/auth'
import { NextResponse } from 'next/server'

export default auth((req) => {
  const { pathname } = req.nextUrl
  const isLoggedIn = !!req.auth
  const isPublicPath = pathname.startsWith('/login') ||
    pathname.startsWith('/register') ||
    pathname.startsWith('/api/auth')

  if (!isLoggedIn && !isPublicPath) {
    return NextResponse.redirect(new URL('/login', req.url))
  }

  // RBAC: منع غير admin من زيارة /admin
  if (pathname.startsWith('/admin') && req.auth?.user?.role !== 'admin') {
    return NextResponse.redirect(new URL('/dashboard', req.url))
  }

  return NextResponse.next()
})

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|images).*)']
}

يعترض Middleware الطلبات ويعيد توجيهها بناءً على الشروط.

// app/api/projects/route.ts — API محمي
import { getToken } from 'next-auth/jwt'
import { NextRequest, NextResponse } from 'next/server'

export async function GET(req: NextRequest) {
  const token = await getToken({ req })

  if (!token) {
    return NextResponse.json({ error: 'غير مسجل الدخول' }, { status: 401 })
  }

  // token.role من استدعاء JWT
  if (token.role !== 'admin' && token.role !== 'editor') {
    return NextResponse.json({ error: 'صلاحيات غير كافية' }, { status: 403 })
  }

  return NextResponse.json({ projects: [{ id: 1, name: 'TaskFlow' }] })
}

GET app/api/projects/route.ts ← يتحقق من token المصادقة، ويعيد البيانات المحمية كـ JSON.

npm install @clerk/nextjs
# في .env.local، أضف:
# NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...
# CLERK_SECRET_KEY=...

// app/layout.tsx — ClerkProvider يغلف التخطيط الجذر
import { ClerkProvider } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="ar">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

يعرض واجهة مستخدم مكون RootLayout.

// app/page.tsx — صفحة تسجيل الدخول
import { SignIn, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'

export default function HomePage() {
  return (
    <div>
      <SignedOut>
        <SignIn routing="hash" />
      </SignedOut>
      <SignedIn>
        <div>
          <UserButton afterSignOutUrl="/" />
          <h1>مرحبًا بك في TaskFlow</h1>
        </div>
      </SignedIn>
    </div>
  )
}

يعرض: مرحبًا بك في TaskFlow
النص المرئي: مرحبًا بك في TaskFlow

// app/dashboard/page.tsx — حماية Clerk auth()
import { auth } from '@clerk/nextjs/server'
import { redirect } from 'next/navigation'

export default async function DashboardPage() {
  const { userId } = auth()

  if (!userId) redirect('/sign-in')

  return <div>لوحة التحكم — UserID: {userId}</div>
}

// middleware.ts
import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: ['/((?!_next|sign-in|sign-up|favicon.ico).*)']
}

مخطط: المستخدم؛ admin وصول كامل؛ editor قراءة وكتابة المشاريع؛ viewer للقراءة فقط؛ إنشاء/حذف العناصر؛ إدارة الفريق.

// components/PermissionGuard.tsx
import { auth } from '@/auth'
import { redirect } from 'next/navigation'

type Role = 'admin' | 'editor' | 'viewer'

const roleHierarchy: Record<Role, number> = { admin: 100, editor: 50, viewer: 20 }

export async function PermissionGuard({
  children,
  minRole
}: {
  children: React.ReactNode
  minRole: Role
}) {
  const session = await auth()
  const userRole = (session?.user?.role as Role) || 'viewer'

  if (roleHierarchy[userRole] < roleHierarchy[minRole]) {
    redirect('/dashboard')
  }

  return <>{children}</>
}

يعرض واجهة مستخدم مكون PermissionGuard.

// app/admin/page.tsx — استخدام PermissionGuard
import { PermissionGuard } from '@/components/PermissionGuard'

export default function AdminPage() {
  return (
    <PermissionGuard minRole="admin">
      <h1>لوحة الإدارة</h1>
      <p>هذه الصفحة لا يمكن رؤيتها إلا من قبل admin.</p>
    </PermissionGuard>
  )
}

// app/dashboard/layout.tsx — تخطيط محمي + RBAC
import { auth } from '@/auth'
import { redirect } from 'next/navigation'
import { PermissionGuard } from '@/components/PermissionGuard'

export default async function DashboardLayout({
  children,
  analytics,
  team
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  const session = await auth()

  if (!session) redirect('/login')

  const user = session.user!

  return (
    <div>
      <header>
        <h1>TaskFlow</h1>
        <p>مرحبًا، {user.name} ({user.role})</p>
        <nav>
          <a href="/dashboard">نظرة عامة</a>
          {user.role === 'admin' && <a href="/admin">الإدارة</a>}
          <a href="/api/auth/signout">خروج</a>
        </nav>
      </header>
      <div style={{ display: 'flex', gap: '2rem' }}>
        <main>{children}</main>
        <aside>
          {analytics}
          <PermissionGuard minRole="editor">{team}</PermissionGuard>
        </aside>
      </div>
    </div>
  )
}

// app/api/projects/[id]/route.ts — حماية API كاملة
import { getToken } from 'next-auth/jwt'
import { NextRequest, NextResponse } from 'next/server'

const roles = { admin: 100, editor: 50, viewer: 20 }

export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const token = await getToken({ req })
  const { id } = await params

  if (!token) return NextResponse.json({ error: 'غير مصرح' }, { status: 401 })
  if (roles[token.role as keyof typeof roles] < 50) {
    return NextResponse.json({ error: 'محظور' }, { status: 403 })
  }

  // حذف العنصر فعليًا
  return NextResponse.json({ id, deleted: true })
}

{ "error": "غير مصرح" }

{ "error": "محظور" }