# Build JWT API Clients for Next.js

Frontend teams need one reliable way to attach JWTs, refresh expired tokens, and parse API errors. This skill helps Claude, Codex, and Claude Code design a centralized Next.js client pattern.

## Install

```bash
npx skillstore add claude/abdul-haseeb360-frontend-api-client-with-jwt
```

## Metadata

- - Status: approved
- - Slug: abdul-haseeb360-frontend-api-client-with-jwt
- - Version: 1.0.0
- - Author: Claude
- - GitHub username: Abdul-Haseeb360
- - License: MIT
- - Repository: https://github.com/Abdul-Haseeb360/Hackathon-II-AI-Native-Systems/tree/main/.claude/skills/frontend-api-client
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Quality score: 72
- - Public page: https://skillstore.pages.dev/skills/abdul-haseeb360-frontend-api-client-with-jwt
- - Manifest: https://skillstore.pages.dev/api/skills/abdul-haseeb360-frontend-api-client-with-jwt/manifest

## Capabilities

- Defines when a Next.js project should use a centralized JWT API client.
- Outlines authorization header attachment for client-side and server-side requests.
- Describes token expiration detection, refresh attempts, and refresh failure behavior.
- Explains consistent parsing for authentication, authorization, and general API errors.
- Covers integration patterns for React components, hooks, and shared API access.
- Lists testing concerns for token attachment, refresh flows, and concurrent requests.

## Use Cases

- Standardize API Calls: Create a shared client pattern for headers, request options, and response parsing in a Next.js application.
- Plan Auth Refresh Behavior: Define how expired JWTs should refresh, fail, and redirect users when sessions cannot continue.
- Review Frontend Auth Design: Check whether an existing API layer handles token storage, errors, and concurrent refresh scenarios consistently.

## Prompt Templates

### Create a Basic Client Plan

```
Use this skill to outline a centralized Next.js API client for JWT authentication. Include request headers, error handling, and basic integration steps.
```

### Add Token Refresh Handling

```
Use this skill to design token expiration checks and refresh behavior for my Next.js API client. Include concurrent request handling and refresh failure behavior.
```

### Harden Storage and Error Rules

```
Use this skill to review my JWT token storage and API error handling plan. Flag XSS exposure, sensitive error leaks, and weak redirect behavior.
```

### Audit an Existing API Layer

```
Use this skill to evaluate my existing Next.js API client design. Compare it against token attachment, refresh coordination, error parsing, cleanup, and testing expectations.
```

## Limitations

- Provides conceptual implementation guidance, not a complete drop-in library.
- Does not include framework-specific source files or runnable tests.
- Requires the user to choose secure token storage for their threat model.
- Assumes JWT-based authentication and is not suited for unrelated auth systems.

## Best Practices

- Prefer secure, HttpOnly cookie-based storage when the application architecture supports it.
- Centralize authorization headers, refresh behavior, and error parsing in one client layer.
- Test concurrent refresh requests so only one refresh attempt updates shared auth state.

## Anti Patterns

- Do not scatter JWT attachment logic across individual components.
- Do not expose raw backend error details directly to users.
- Do not treat localStorage as safe token storage without an XSS threat review.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T03:53:14.169\+00:00
- - Summary: 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.

## Stats

- - Views: 177
- - Downloads: 5
- - Favorites: 0
- - Popularity score: 0