المهارات frontend-api-client-with-jwt
📦

frontend-api-client-with-jwt

v1.0.0 مخاطر متوسطة

بناء عملاء API مع التعامل مع JWT في Next.js

إدارة مصادقة JWT في عملاء API معقدة وعرضة للأخطاء. توفر هذه المهارة إطارًا لتنفيذ اتصال API آمن ومركزي مع تحديث تلقائي للرمز المميز، ومعالجة الأخطاء، وتحليل استجابات متسق في تطبيقات Next.js.

يدعم: Claude Codex Code(CC)
📊 72 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

موارد مهيّأة لـ Agents

استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.

تفاصيل Markdown GET /skills/abdul-haseeb360-frontend-api-client-with-jwt.md manifest موقَّع GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/manifest lockfile موقَّع GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/lockfile

اختبرها

جارٍ استخدام "frontend-api-client-with-jwt". Create an API client that handles JWT authentication

النتيجة المتوقعة:

  • تكوين عميل API مركزي مع إعدادات عنوان URL الأساسي والمهلة
  • إرفاق ترويسة التفويض بصيغة رمز Bearer
  • آلية تحديث الرمز تُفعّل عند استجابات 401
  • معالجة أخطاء فشل المصادقة مع تغذية راجعة للمستخدم
  • معترض طلب للتسجيل وحقن الترويسات

جارٍ استخدام "frontend-api-client-with-jwt". How do I handle token expiration in my Next.js app

النتيجة المتوقعة:

  • التحقق من انتهاء صلاحية الرمز قبل إجراء الطلبات
  • تحديث الرموز بشكل استباقي قبل انتهائها
  • معالجة فشل التحديث بإعادة التوجيه إلى تسجيل الدخول
  • تخزين الرموز المحدَّثة بأمان بعد التحديث
  • تنسيق التحديث عبر عدة طلبات متزامنة

جارٍ استخدام "frontend-api-client-with-jwt". What security considerations exist for JWT in frontend

النتيجة المتوقعة:

  • استخدم HTTPS لجميع اتصالات API
  • خزن الرموز بأمان لمنع هجمات XSS
  • نفّذ معالجة CORS بشكل صحيح
  • تجنب كشف البيانات الحساسة في رسائل الخطأ
  • تحقق من الاستجابات قبل المعالجة

التدقيق الأمني

مخاطر متوسطة
v6 • 6/28/2026

The static findings are documentation terms in SKILL.md, not executable code, command execution, scanning, or exfiltration behavior. One semantic concern remains: the skill lists localStorage as a JWT storage option without enough warning about XSS exposure, so publication should include a security warning.

1
الملفات التي تم فحصها
171
الأسطر التي تم تحليلها
3
Review items
0
False positives ignored

Confirmed security concerns (3)

متوسط
SKILL.md:76
Security-Sensitive Token Storage Guidance
Static verdict: TRUE POSITIVE as a guidance risk, not as executable malware. The skill lists browser storage options for JWT tokens, including localStorage, which can expose bearer tokens to XSS if used without strong safeguards.
The line explicitly names token storage mechanisms in JWT guidance. The file is prose rather than code, so the risk is insecure implementation advice rather than direct credential access.
منخفض
SKILL.md:7SKILL.md:94
False Positive: JWT and HTTP Status Terminology
Static verdict: FALSE POSITIVE. The weak cryptographic algorithm detections point to a JWT description and an HTTP 200-299 status range, with no cryptographic API, algorithm selection, or hashing implementation present.
Both locations are plain documentation text. I found no code path, crypto function, or recommendation to use a weak algorithm.
منخفض
SKILL.md:74SKILL.md:100SKILL.md:132SKILL.md:141SKILL.md:149SKILL.md:166
False Positive: Reconnaissance Terms in API Guidance
Static verdict: FALSE POSITIVE. The system and network reconnaissance detections are ordinary API-client documentation about valid tokens, HTTP 401 handling, context access, error messages, refresh performance, and token tests.
The referenced lines contain no shell commands, port scanning, host discovery, probing loops, or data collection behavior. They are conceptual guidance for API request handling and tests.
دقّقه: codex عرض سجل التدقيق →

درجة الجودة

55
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
70
المجتمع
56
الأمان
83
الامتثال للمواصفات

ما الذي يمكنك بناؤه

معمارية عميل API في Next.js

تصميم عميل API مركزي لتطبيقات Next.js مع تعامل آمن مع رموز JWT وتحديث تلقائي.

تكامل تدفق المصادقة

تنفيذ تدفقات مصادقة سلسة مع تحديث الرموز عبر مكونات العميل والخادم.

أنماط API باستخدام React Hook

بناء Hooks مخصصة لاتصال API تتعامل مع رموز JWT والأخطاء بشكل متسق.

جرّب هذه الموجّهات

إعداد عميل API أساسي 
أنشئ عميل API في Next.js يقوم تلقائيًا بإرفاق رموز JWT بالطلبات ويتعامل مع تحديث الرمز عند أخطاء 401.
تنفيذ تحديث الرمز المميز 
نفّذ تحديثًا تلقائيًا للرمز المميز في تطبيق Next.js قبل انتهاء صلاحية JWT لمنع فشل الطلبات.
معالجة استجابات الأخطاء 
ابنِ تحليلًا لاستجابات الأخطاء لعميل API يعرّف أخطاء 401 و403 ويعيد توجيه المستخدمين بشكل مناسب.
معترضات الطلب 
أنشئ معترضات طلب لعميل API في Next.js تضيف ترويسات التفويض وتُسجل الطلبات الصادرة.

أفضل الممارسات

  • خزّن رموز JWT بأمان وتحقق منها قبل إجراء طلبات API لمنع الاستدعاءات غير الضرورية
  • نفّذ تحديث الرمز بشكل استباقي قبل انتهاء الصلاحية بدلًا من التفاعل بعد أخطاء 401
  • استخدم HTTPS لجميع اتصالات API لحماية الرموز أثناء النقل

تجنب

  • تخزين رموز JWT في localStorage دون حماية من XSS يعرّض الرموز لهجمات حقن السكربتات
  • إجراء استدعاءات API دون معالجة الأخطاء يسبب إخفاقات صامتة وتجربة مستخدم سيئة
  • تنفيذ تحديث الرموز دون تنسيق قد يسبب حالات سباق مع الطلبات المتزامنة

الأسئلة المتكررة

هل هذه المهارة متوافقة مع Next.js App Router وPages Router؟
نعم، تنطبق المفاهيم على كل من Next.js App Router وPages Router مع تطبيقات خاصة بالسياق.
ما هو الحد الأقصى لعدد طلبات API المتزامنة المدعومة؟
لا يوجد حد ثابت. الإطار ينسق تحديث الرموز عبر الطلبات دون حظر.
كيف يتكامل هذا مع مزودي المصادقة الحاليين؟
توفر هذه المهارة أنماطًا لأي مصادقة تعتمد على JWT. تكامل مع تخزين الرموز الحالي ونقاط نهاية التحديث لديك.
هل تُخزَّن الرموز بأمان في هذا التنفيذ؟
تصف المهارة أنماطًا آمنة. التنفيذ الفعلي يعتمد على اختيار التخزين مثل ملفات تعريف الارتباط أو التخزين الآمن.
ماذا يجب أن أفعل إذا فشل تحديث الرمز المميز مرارًا؟
أعد توجيه المستخدمين إلى تسجيل الدخول بعد فشل التحديث. امسح الرموز المخزنة وقدّم رسائل خطأ واضحة.
كيف يقارن هذا باستخدام معترضات Axios؟
توفر المهارة أنماط معترضات مماثلة. يمكن أن يستخدم التنفيذ fetch أو Axios أو أي مكتبة عميل HTTP.

تفاصيل المطور

المؤلف

Claude

الترخيص

MIT

Version

v1.0.0

المستودع

https://github.com/Abdul-Haseeb360/Hackathon-II-AI-Native-Systems/tree/main/.claude/skills/frontend-api-client

مرجع

main

بنية الملفات

📄 SKILL.md