Compétences frontend-api-client-with-jwt
📦

frontend-api-client-with-jwt

v1.0.0 Risque moyen

Créer des clients API avec gestion JWT dans Next.js

La gestion de l'authentification JWT dans les clients API est complexe et sujette aux erreurs. Cette compétence fournit un cadre pour implémenter une communication API sécurisée et centralisée avec actualisation automatique des jetons, gestion des erreurs et analyse cohérente des réponses dans les applications Next.js.

Prend en charge: Claude Codex Code(CC)
📊 72 Adéquat
1

Télécharger le ZIP de la compétence

2

Importer dans Claude

Accédez à Paramètres → Capacités → Skills → Importer une compétence

3

Activez et commencez à utiliser

Ressources lisibles par les agents

Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/abdul-haseeb360-frontend-api-client-with-jwt.md manifest signé GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/manifest lockfile signé GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/lockfile

Tester

Utilisation de « frontend-api-client-with-jwt ». Créer un client API qui gère l'authentification JWT

Résultat attendu:

  • Configuration centralisée du client API avec URL de base et paramètres de timeout
  • Attachement de l'en-tête d'autorisation au format Bearer token
  • Mécanisme d'actualisation des jetons déclenché lors des réponses 401
  • Gestion des erreurs pour les échecs d'authentification avec retour utilisateur
  • Intercepteur de requêtes pour la journalisation et l'injection d'en-têtes

Utilisation de « frontend-api-client-with-jwt ». Comment gérer l'expiration des jetons dans mon application Next.js

Résultat attendu:

  • Valider l'expiration des jetons avant d'effectuer des requêtes
  • Actualiser les jetons de manière proactive avant leur expiration
  • Gérer les échecs d'actualisation en redirigeant vers la connexion
  • Stocker les jetons mis à jour de manière sécurisée après actualisation
  • Coordonner l'actualisation entre plusieurs requêtes concurrentes

Utilisation de « frontend-api-client-with-jwt ». Quelles considérations de sécurité existent pour JWT dans le frontend

Résultat attendu:

  • Utiliser HTTPS pour toutes les communications API
  • Stocker les jetons de manière sécurisée pour prévenir les attaques XSS
  • Implémenter une gestion appropriée du CORS
  • Éviter d'exposer des données sensibles dans les messages d'erreur
  • Valider les réponses avant traitement

Audit de sécurité

Risque moyen
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
Fichiers analysés
171
Lignes analysées
3
Review items
0
False positives ignored

Confirmed security concerns (3)

Moyen
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.
Faible
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.
Faible
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.
Audité par: codex Voir l’historique des audits →

Score de qualité

55
Architecture
100
Maintenabilité
87
Contenu
70
Communauté
56
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez créer

Architecture de client API Next.js

Concevoir un client API centralisé pour les applications Next.js avec gestion sécurisée des jetons JWT et actualisation automatique.

Intégration du flux d'authentification

Implémenter des flux d'authentification fluides avec actualisation des jetons entre les composants client et serveur.

Modèles d'API avec React Hooks

Construire des hooks personnalisés pour la communication API qui gèrent les jetons JWT et les erreurs de manière cohérente.

Essayez ces prompts

Configuration de base du client API 
Créer un client API dans Next.js qui attache automatiquement les jetons JWT aux requêtes et gère l'actualisation des jetons lors des erreurs 401.
Implémentation de l'actualisation des jetons 
Implémenter l'actualisation automatique des jetons dans une application Next.js avant l'expiration du JWT pour éviter les échecs de requêtes.
Gestion des réponses d'erreur 
Construire l'analyse des réponses d'erreur pour un client API qui identifie les erreurs 401 et 403 et redirige les utilisateurs de manière appropriée.
Intercepteurs de requêtes 
Créer des intercepteurs de requêtes pour un client API Next.js qui ajoutent des en-têtes d'autorisation et enregistrent les requêtes sortantes.

Bonnes pratiques

  • Stocker les jetons JWT de manière sécurisée et les valider avant d'effectuer des requêtes API pour éviter les appels inutiles
  • Implémenter l'actualisation des jetons de manière proactive avant expiration plutôt que de manière réactive après les erreurs 401
  • Utiliser HTTPS pour toutes les communications API afin de protéger les jetons pendant la transmission

Éviter

  • Stocker les jetons JWT dans localStorage sans protection XSS expose les jetons aux attaques par injection de script
  • Effectuer des appels API sans gestion des erreurs provoque des échecs silencieux et une mauvaise expérience utilisateur
  • Implémenter l'actualisation des jetons sans coordination peut causer des conditions de concurrence avec les requêtes concurrentes

Foire aux questions

Cette compétence est-elle compatible avec Next.js App Router et Pages Router ?
Oui, les concepts s'appliquent à la fois à Next.js App Router et Pages Router avec des implémentations spécifiques au contexte.
Quel est le nombre maximum de requêtes API concurrentes prises en charge ?
Il n'y a pas de limite fixe. Le cadre coordonne l'actualisation des jetons entre les requêtes sans blocage.
Comment s'intègre-t-elle avec les fournisseurs d'authentification existants ?
Cette compétence fournit des modèles pour toute authentification basée sur JWT. Intégrez-la avec vos points de terminaison de stockage et d'actualisation de jetons existants.
Les jetons sont-ils stockés de manière sécurisée dans cette implémentation ?
La compétence décrit des modèles sécurisés. L'implémentation réelle dépend du choix de stockage comme les cookies ou le stockage sécurisé.
Que dois-je faire si l'actualisation des jetons échoue à plusieurs reprises ?
Rediriger les utilisateurs vers la connexion après échec de l'actualisation. Effacer les jetons stockés et fournir des messages d'erreur clairs.
Comment cela se compare-t-il à l'utilisation des intercepteurs Axios ?
La compétence fournit des modèles d'intercepteurs similaires. L'implémentation peut utiliser fetch, Axios ou toute bibliothèque de client HTTP.

Détails du développeur

Auteur

Claude

Licence

MIT

Version

v1.0.0

Dépôt

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

Réf

main

Structure de fichiers

📄 SKILL.md