api-fetch-with-auth

Create authenticated API fetch function in Next.js. Use for frontend API calls.

16 stars

Best use case

api-fetch-with-auth is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Create authenticated API fetch function in Next.js. Use for frontend API calls.

Teams using api-fetch-with-auth should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/api-fetch-with-auth/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/frontend/api-fetch-with-auth/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/api-fetch-with-auth/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How api-fetch-with-auth Compares

Feature / Agentapi-fetch-with-authStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Create authenticated API fetch function in Next.js. Use for frontend API calls.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# APIFetchWithAuth Instructions
Input: Endpoint, method, body.
Output: Fetch function.
Steps:
1. Import getSession from better-auth/nextjs.
2. Attach Bearer token.
Example Code:
import { getSession } from 'better-auth/nextjs';
async function apiFetch(url: string, method: string, body?: any) {
  const session = await getSession();
  const token = session?.token;
  return fetch(url, {
    method,
    headers: { Authorization: `Bearer ${token}` },
    body: body ? JSON.stringify(body) : undefined,
  });
}

Related Skills

nextjs-supabase-auth

16
from diegosouzapw/awesome-omni-skill

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

md-fetch

16
from diegosouzapw/awesome-omni-skill

Fetch and read markdown files from the internet with support for partial content extraction and intelligent section ranking. Use when Claude needs to retrieve markdown documentation from URLs and extract specific portions by line numbers, section headers, search patterns, or query-based relevance ranking (BM25). Triggers include requests to fetch/download/read markdown from URLs, extract specific sections from online docs, find relevant sections by query, or get partial content from remote markdown files.

doc-coauthoring

16
from diegosouzapw/awesome-omni-skill

Guide users through structured collaborative documentation creation. Use when user wants to write documentation, update README, create architecture docs, draft proposals, technical specs, decision docs, refactor documentation, create API docs, or document code.

github-workflow-authoring

16
from diegosouzapw/awesome-omni-skill

This skill should be used when creating or improving GitHub Actions CI/CD workflows for Breenix kernel development. Use for authoring new test workflows, optimizing existing CI pipelines, adding new test types, fixing workflow configuration issues, or adapting workflows for new kernel features.

spec-author

16
from diegosouzapw/awesome-omni-skill

Writes or revises a feature specification with user stories and acceptance tests for this Next.js + FastAPI project. Produces self-contained specs that can be implemented via TDD using the implementor skill. Invoked by the spec-writer orchestrator, not directly.

skill-author

16
from diegosouzapw/awesome-omni-skill

Creates production-grade Claude Code skills from natural language descriptions. Use when building new skills, requested with "build me a skill that...", "create a skill for...", or "I need a skill to...". Generates complete skill files with proper frontmatter, context references, and quality self-assessment.

nestjs-authentication

16
from diegosouzapw/awesome-omni-skill

Use this skill whenever the user wants to design, implement, or refactor authentication and authorization in a NestJS TypeScript backend, including JWT, sessions, refresh tokens, guards, roles/permissions, and integration with modules/services/controllers.

gainforest-oauth-setup

16
from diegosouzapw/awesome-omni-skill

Implement ATProto OAuth authentication in a Next.js App Router application using gainforest-sdk-nextjs. Use when adding login, logout, session management, or authentication flows that integrate with GainForest, Hypercerts, or ATProto PDSes (climateai.org, gainforest.id).

full-stack-authentication

16
from diegosouzapw/awesome-omni-skill

Implements production-ready authentication flows (sign-up, login, logout, session management) into any software stack using Scalekit SDK. Use when users need to add secure authentication, OAuth flows, SSO capabilities, or user management to their application. Handles code generation across Node.js, Python, Go, and Java with proper security patterns.

fetching-youtube-transcripts

16
from diegosouzapw/awesome-omni-skill

Fetch transcripts and subtitles from YouTube videos using youtube-transcript-api. Use when extracting video transcripts, listing available languages, translating captions, or processing YouTube content for summarization or analysis.

es-fetch-api

16
from diegosouzapw/awesome-omni-skill

Use this skill when the user's input contains keywords like "es-fetch-api", "fetch wrapper", "http client", "api request", "/use fetch" or when they need to make HTTP requests in a JavaScript/TypeScript project. This skill provides installation guides, usage examples, and best practices.

create-auth

16
from diegosouzapw/awesome-omni-skill

Skill for creating auth layers in TypeScript/JavaScript apps using Better Auth.