لقد أفسدتُ إعداد Next.js Auth Matcher الخاص بي ثلاث مرات

لقد تسببتُ في تعطل ثلاثة مشاريع قبل أن أفهم كيفية عمل proxy.ts في Next.js 16.

كان الخطأ صامتاً. لا سجلات (logs). لا تحذيرات. لا أخطاء. فقط عمليات إعادة توجيه (redirects) معطلة وثغرات أمنية.

إذا كنت تقوم بالترقية إلى Next.js 16، فلا تكتفِ بمجرد تشغيل codemod ثم ترحل. عليك التحقق من هذه الأشياء الثلاثة.

فخ عملية الترقية

قامت Next.js بتغيير اسم middleware.ts إلى proxy.ts. هذا ليس مجرد تغيير في الاسم.

إذا قمت بتحديث حزمتك يدوياً بدون استخدام codemod، فقد يظل ملف middleware.ts القديم موجوداً. سيتم تجميعه (compile) بشكل صحيح، وسيجتاز فحوصات TypeScript، لكنه لن يفعل شيئاً. لن يتم اعتراض المسارات (routes) الخاصة بك، ولن تعمل عمليات إعادة التوجيه (redirects).

تحقق من هذه الأشياء الثلاثة يدوياً:

فجوة الـ Matcher

الـ matcher هو المكان الذي تفشل فيه إعدادات المصادقة (auth) في أغلب الأحيان.

إذا كان الـ matcher واسعاً جداً، فسيتم تشغيل الـ proxy على كل ملف CSS وصورة، مما يتسبب في حلقات إعادة توجيه (redirect loops) لا نهائية.

وإذا كان الـ matcher ضيقاً جداً، فستخلق ثغرة أمنية.

إذا لم يكن المسار (route) موجوداً في الـ matcher الخاص بك، فلن يعمل الـ proxy أبداً. يمكن للمستخدم إرسال ترويسات (headers) خاصة به إلى ذلك المسار. وإذا كان الـ Server Component الخاص بك يثق في تلك الترويسات، فيمكن للمهاجم انتحال شخصية أي شخص.

الحل: لا تثق بالترويسات

لقد تعلمت ذلك بالطريقة الصعبة: لا تعتمد فقط على الترويسات (headers) التي يمررها الـ proxy.

استخدم نهج الطبقتين:

هذا الفحص الثاني يغلق الفجوة. حتى لو أغفل الـ matcher مساراً ما، فإن الـ Server Component سيكشف المستخدم غير المصرح له. هذا يضيف بضع أجزاء من الثانية من التأخير (latency) ولكنه يمنع فشلاً أمنياً جسيماً.

قائمة التحقق الملخصة:

المصدر: https://dev.to/shubhradev/i-got-the-proxyts-matcher-wrong-for-three-projects-before-i-understood-why-4e5c