About

Imported from aiskillstore/marketplace (skills/abdul-haseeb360/frontend-api-client-with-jwt/SKILL.md). Install upstream with npx skills add aiskillstore/marketplace --skill frontend-api-client-with-jwt. Copyright stays with the author.

Frontend API Client with JWT Skill

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

When to Use This Skill

Use this conceptual skill when you need to implement a robust API client in Next.js that properly handles JWT tokens for authentication. This skill is appropriate for:

Creating centralized API communication layer in Next.js applications
Managing JWT-based authentication across multiple API endpoints
Handling token expiration and refresh scenarios
Standardizing error response parsing and handling
Implementing secure API communication patterns

This skill should NOT be used for:

Applications without JWT-based authentication
Static sites without API communication needs
Applications using alternative authentication methods (API keys, OAuth 2.0 client credentials, etc.)
Simple applications with minimal API interaction

Prerequisites

Next.js application (either App Router or Pages Router)
Understanding of JWT (JSON Web Token) concepts
Knowledge of HTTP headers and authorization mechanisms
Basic understanding of asynchronous JavaScript operations
Awareness of client-side vs server-side execution contexts

Conceptual Implementation Framework

Authorization Header Attachment Capability

Automatically attach JWT tokens to API requests as Authorization headers
Determine when to include tokens based on request type and endpoint
Handle token attachment for both client-side and server-side requests
Manage token inclusion in cross-origin requests appropriately
Ensure proper header formatting ("Bearer ")

Token Expiry Handling Capability

Detect JWT token expiration before making API requests
Implement automatic token refresh mechanisms
Handle token refresh failures gracefully
Maintain session continuity during token refresh
Coordinate token refresh across multiple concurrent requests
Store updated tokens securely after refresh

Error Response Parsing Capability

Parse structured error responses from API endpoints
Identify authentication-related errors (401, 403) for special handling
Extract meaningful error messages for user feedback
Handle different error response formats consistently
Distinguish between client errors, server errors, and network issues
Provide appropriate user feedback based on error types

API Call Centralization Capability

Create a unified interface for all API communications
Standardize request and response handling across the application
Implement consistent error handling and logging
Manage request/response interceptors for cross-cutting concerns
Provide type-safe API call patterns (when using TypeScript)
Enable request caching and deduplication where appropriate

Expected Input/Output

Input Requirements:

JWT Token Management:
- Valid JWT token for authorization
- Token refresh endpoint configuration
- Token storage mechanism (localStorage, cookies, etc.)
- Token expiration time and refresh timing
API Configuration:
- Base API URL for requests
- Request timeout settings
- Custom headers and request options
- Endpoint-specific configurations
Request Parameters:
- HTTP method (GET, POST, PUT, DELETE, etc.)
- Request URL or endpoint identifier
- Request body for POST/PUT operations
- Query parameters and path variables

Output Formats:

Successful API Response:
- HTTP 200-299 status codes
- Parsed response data matching expected format
- Updated token information when applicable
- Consistent response structure across all endpoints
Authentication Error Response:
- HTTP 401 Unauthorized for expired/invalid tokens
- Automatic token refresh attempt
- Redirect to login page after refresh failure
- Clear error messaging for authentication issues
Authorization Error Response:
- HTTP 403 Forbidden for insufficient permissions
- Appropriate error handling based on permission level
- User feedback for access restriction
General Error Response:
- Structured error object with message and code
- Appropriate HTTP status code
- Detailed error information for debugging
- User-friendly error messages for UI display

Integration Patterns

Client-Side Integration

Handle API calls from client components and client-side rendering
Manage token storage and retrieval in browser context
Implement request interceptors for header attachment
Coordinate with authentication state management

Server-Side Integration (when applicable)

Handle API calls from server components
Manage token transmission securely between server and client
Implement server-side token validation
Handle server-side error responses appropriately

React Component Integration

Provide hooks for API communication in functional components
Enable context-based API client access
Support both functional and class component patterns
Implement proper cleanup and cancellation mechanisms

Security Considerations

Token Storage: Secure JWT token storage to prevent XSS attacks
Header Transmission: Use HTTPS for all API communications
Token Refresh: Implement secure token refresh mechanisms
Error Information: Avoid exposing sensitive information in error messages
Request Validation: Validate request parameters before sending
Response Validation: Verify response integrity and format
Cross-Site Requests: Implement proper CORS handling

Performance Implications

Optimize token retrieval and attachment for minimal overhead
Implement efficient token refresh to avoid blocking requests
Consider request caching strategies for improved performance
Minimize redundant API calls through proper state management
Implement request batching where appropriate
Monitor and optimize network request timing

Error Handling and Validation

Validate JWT token format and expiration before requests
Handle network connectivity issues gracefully
Implement retry mechanisms for transient failures
Provide fallback behaviors for critical API failures
Log errors appropriately for debugging without exposing sensitive information
Implement circuit breaker patterns for service resilience

Testing Considerations

Test token attachment functionality with valid/invalid tokens
Verify token refresh mechanisms work correctly
Validate error response parsing across different error types
Test API client behavior in both client and server contexts
Verify proper cleanup and cancellation of requests
Test concurrent request handling and token refresh coordination

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/aiskillstore-marketplace-frontend-api-client-with-jwt/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

aiskillstore-marketplace-frontend-api-client-with-jwt.ocm.jsonjson

{
  "ocm": "1",
  "id": "aiskillstore-marketplace-frontend-api-client-with-jwt",
  "kind": "skill",
  "name": "frontend-api-client-with-jwt",
  "description": "A conceptual skill for building an API client in Next.js that handles JWT tokens",
  "publisher": "aiskillstore",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "nextjs",
      "api-client",
      "jwt",
      "authentication",
      "frontend",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "A conceptual skill for building an API client in Next.js that handles JWT tokens"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/aiskillstore/marketplace",
      "path": "skills/abdul-haseeb360/frontend-api-client-with-jwt/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/aiskillstore/marketplace/blob/HEAD/skills/abdul-haseeb360/frontend-api-client-with-jwt/SKILL.md",
      "key": "aiskillstore/marketplace/skills/abdul-haseeb360/frontend-api-client-with-jwt/SKILL.md"
    }
  },
  "instructions": "# Frontend API Client with JWT Skill\n\n## When to Use This Skill\n\nUse this conceptual skill when you need to implement a robust API client in Next.js that properly handles JWT tokens for authentication. This skill is appropriate for:\n\n- Creating centralized API communication layer in Next.js applications\n- Managing JWT-based authentication across multiple API endpoints\n- Handling token expiration and refresh scenarios\n- Standardizing error response parsing and handling\n- Implementing secure API communication patterns\n\nThis skill should NOT be used for:\n- Applications without JWT-based authentic",
  "cost": {
    "context_tokens": 1653
  }
}

Fetch it by URL: GET /api/v1/registry/aiskillstore-marketplace-frontend-api-client-with-jwt/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.