frontend-api-client-with-jwt
Next.jsでJWT処理を行うAPIクライアントを構築する
APIクライアントでJWT認証を管理するのは複雑で、エラーが起きやすいです。このスキルは、Next.jsアプリケーションで自動トークン更新、エラーハンドリング、一貫したレスポンス解析を備えた安全で中央集約型のAPI通信を実装するためのフレームワークを提供します。
スキルの ZIP をダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロード に移動
オンにして使い始める
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-api-client-with-jwt」を使用しています。 Create an API client that handles JWT authentication
期待される結果:
- ベースURLとタイムアウト設定を備えた中央集約型APIクライアントの構成
- Bearerトークン形式でのAuthorizationヘッダー付与
- 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
期待される結果:
- すべてのAPI通信でHTTPSを使用する
- XSS攻撃を防ぐためにトークンを安全に保存する
- 適切なCORS処理を実装する
- エラーメッセージに機密データを露出させない
- 処理前にレスポンスを検証する
セキュリティ監査
中リスク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.
Confirmed security concerns (3)
品質スコア
作成できるもの
Next.js APIクライアントのアーキテクチャ
安全なJWTトークン処理と自動更新を備えたNext.jsアプリケーション向けの中央集約型APIクライアントを設計する。
認証フローの統合
クライアントおよびサーバーコンポーネント全体でトークン更新を伴うシームレスな認証フローを実装する。
React HookのAPIパターン
JWTトークンとエラーを一貫して処理するAPI通信向けのカスタムフックを構築する。
これらのプロンプトを試す
Create an API client in Next.js that automatically attaches JWT tokens to requests and handles token refresh on 401 errors.
Implement automatic token refresh in a Next.js application before JWT expiration to prevent request failures.
Build error response parsing for an API client that identifies 401 and 403 errors and redirects users appropriately.
Create request interceptors for a Next.js API client that add authorization headers and log outgoing requests.
ベストプラクティス
- JWTトークンを安全に保管し、APIリクエスト前に検証して不要な呼び出しを防ぐ
- 401エラー後に反応的に行うのではなく、有効期限前に先回りしてトークン更新を実装する
- 送信中のトークンを保護するため、すべてのAPI通信にHTTPSを使用する
回避
- XSS保護なしにlocalStorageへJWTトークンを保存すると、スクリプト注入攻撃でトークンが露出する
- エラーハンドリングなしでAPI呼び出しを行うとサイレント失敗が発生し、ユーザー体験が悪化する
- 調整なしにトークン更新を実装すると、同時リクエストで競合状態が発生する