Skills frontend-api-client-with-jwt

📦

frontend-api-client-with-jwt

Name: frontend-api-client-with-jwt
Author: Claude

v1.0.0 Mittleres Risiko

API-Clients mit JWT-Verwaltung in Next.js erstellen

Die Verwaltung der JWT-Authentifizierung in API-Clients ist komplex und fehleranfällig. Dieses Skill bietet ein Framework für die Implementierung sicherer, zentralisierter API-Kommunikation mit automatischer Token-Aktualisierung, Fehlerbehandlung und konsistentem Response-Parsing in Next.js-Anwendungen.

Unterstützt: Claude Codex Code(CC)

📊 72 Angemessen

Skill-ZIP herunterladen

In Claude hochladen

Öffnen Sie Einstellungen → Fähigkeiten → Skills → Skill hochladen

Einschalten und loslegen

Agent-lesbare Ressourcen

Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.

Markdown-Detailseite GET /skills/abdul-haseeb360-frontend-api-client-with-jwt.md Signiertes manifest GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/manifest Signiertes lockfile GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/lockfile

Testen

„frontend-api-client-with-jwt“ wird verwendet. Erstellen Sie einen API-Client, der JWT-Authentifizierung verwaltet

Erwartetes Ergebnis:

Zentralisierte API-Client-Konfiguration mit Basis-URL und Timeout-Einstellungen
Anhängen von Autorisierungs-Headern im Bearer-Token-Format
Token-Aktualisierungsmechanismus, der bei 401-Antworten ausgelöst wird
Fehlerbehandlung für Authentifizierungsfehler mit Benutzer-Feedback
Request-Interceptor für Protokollierung und Header-Injektion

„frontend-api-client-with-jwt“ wird verwendet. Wie behandle ich Token-Ablauf in meiner Next.js-App

Erwartetes Ergebnis:

Token-Ablauf vor dem Durchführen von Anfragen validieren
Tokens proaktiv aktualisieren, bevor sie ablaufen
Aktualisierungsfehler durch Umleitung zum Login behandeln
Aktualisierte Tokens nach der Aktualisierung sicher speichern
Aktualisierung über mehrere gleichzeitige Anfragen hinweg koordinieren

„frontend-api-client-with-jwt“ wird verwendet. Welche Sicherheitsaspekte gibt es für JWT im Frontend

Erwartetes Ergebnis:

HTTPS für alle API-Kommunikationen verwenden
Tokens sicher speichern, um XSS-Angriffe zu verhindern
Ordnungsgemäße CORS-Behandlung implementieren
Vermeiden Sie die Offenlegung sensibler Daten in Fehlermeldungen
Antworten vor der Verarbeitung validieren

Sicherheitsaudit

Mittleres Risiko

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.

Gescannte Dateien

171

Analysierte Zeilen

Review items

False positives ignored

Confirmed security concerns (3)

Mittel

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.

Niedrig

SKILL.md:7 SKILL.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.

Niedrig

SKILL.md:74 SKILL.md:100 SKILL.md:132 SKILL.md:141 SKILL.md:149 SKILL.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.

Geprüft von: codex Audit-Verlauf anzeigen →

Qualitätsbewertung

Architektur

100

Wartbarkeit

Inhalt

Community

Sicherheit

Spezifikationskonformität

Was Sie erstellen können

Next.js API-Client-Architektur

Entwerfen Sie einen zentralisierten API-Client für Next.js-Anwendungen mit sicherer JWT-Token-Verwaltung und automatischer Aktualisierung.

Integration von Authentifizierungsabläufen

Implementieren Sie nahtlose Authentifizierungsabläufe mit Token-Aktualisierung über Client- und Server-Komponenten hinweg.

React Hook API-Muster

Erstellen Sie benutzerdefinierte Hooks für API-Kommunikation, die JWT-Tokens und Fehler konsistent behandeln.

Diese Prompts ausprobieren

Grundlegende API-Client-Einrichtung

Erstellen Sie einen API-Client in Next.js, der automatisch JWT-Tokens an Anfragen anhängt und Token-Aktualisierung bei 401-Fehlern durchführt.

Token-Aktualisierung-Implementierung

Implementieren Sie automatische Token-Aktualisierung in einer Next.js-Anwendung vor JWT-Ablauf, um Anfragefehler zu vermeiden.

Fehlerantwort-Behandlung

Erstellen Sie Fehlerantwort-Parsing für einen API-Client, der 401- und 403-Fehler identifiziert und Benutzer entsprechend umleitet.

Request-Interceptors

Erstellen Sie Request-Interceptors für einen Next.js API-Client, die Autorisierungs-Header hinzufügen und ausgehende Anfragen protokollieren.

Bewährte Praktiken

Speichern Sie JWT-Tokens sicher und validieren Sie sie vor API-Anfragen, um unnötige Aufrufe zu vermeiden
Implementieren Sie Token-Aktualisierung proaktiv vor Ablauf, anstatt reaktiv nach 401-Fehlern
Verwenden Sie HTTPS für alle API-Kommunikationen, um Tokens während der Übertragung zu schützen

Vermeiden

Das Speichern von JWT-Tokens in localStorage ohne XSS-Schutz setzt Tokens Script-Injection-Angriffen aus
API-Aufrufe ohne Fehlerbehandlung führen zu stillen Fehlern und schlechter Benutzererfahrung
Die Implementierung von Token-Aktualisierung ohne Koordination kann zu Race Conditions bei gleichzeitigen Anfragen führen

Häufig gestellte Fragen

Ist dieses Skill mit Next.js App Router und Pages Router kompatibel?

Ja, die Konzepte gelten sowohl für Next.js App Router als auch für Pages Router mit kontextspezifischen Implementierungen.

Wie viele gleichzeitige API-Anfragen werden maximal unterstützt?

Es gibt keine feste Grenze. Das Framework koordiniert die Token-Aktualisierung über Anfragen hinweg ohne Blockierung.

Wie lässt sich dies mit bestehenden Authentifizierungsanbietern integrieren?

Dieses Skill bietet Muster für jede JWT-basierte Authentifizierung. Integrieren Sie es mit Ihren bestehenden Token-Speicher- und Aktualisierungs-Endpunkten.

Werden Tokens in dieser Implementierung sicher gespeichert?

Das Skill beschreibt sichere Muster. Die tatsächliche Implementierung hängt von der Speicherwahl wie Cookies oder sicherem Speicher ab.

Was soll ich tun, wenn die Token-Aktualisierung wiederholt fehlschlägt?

Leiten Sie Benutzer nach wiederholtem Aktualisierungsfehler zum Login weiter. Löschen Sie gespeicherte Tokens und geben Sie klare Fehlermeldungen aus.

Wie verhält sich dies im Vergleich zur Verwendung von Axios-Interceptors?

Das Skill bietet ähnliche Interceptor-Muster. Die Implementierung kann fetch, Axios oder jede HTTP-Client-Bibliothek verwenden.