skills.rest
agusmdev
agusmdevCOMMUNITY
Explore all skills by this author →
Website𝕏@agusmdevGitHub

tanstack-client-auth

Manage login, logout, and token storage for TanStack SPA apps.

5|Updated Feb 12, 2026
Search Tags:#authorization#security#authentication#frontend#spa#token#tanstack-router
One-click install
npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-client-auth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-client-auth
Source: https://github.com/agusmdev/fullstack-ai-template/tree/main/.claude/skills/tanstack-client-auth
Command: npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-client-auth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This setup provides a client-side token-based authentication flow for TanStack SPA apps, including login/logout, protected routes, auth context, token storage, and route guards.

Core Features & Use Cases

  • Implement AuthContext and AuthProvider to manage user state and access tokens.
  • Protect routes via Protected Routes and beforeLoad guards, with automatic token attachment to API requests.
  • Enable seamless integration with TanStack Router and TanStack Start client-only mode for secure, authenticated experiences.

Quick Start

Create a TanStack Router or TanStack Start project and wire in the shared tanstack-client-auth skill to provide login/logout, token storage, auth context, protected routes, and route guards.

Frequently Asked Questions about tanstack-client-auth

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add client-side token-based authentication to a TanStack Router SPA?▼

Client-side token-based authentication for a TanStack Router SPA is added by implementing an AuthProvider, login/logout flows, and token storage utilities. Route guards in beforeLoad protect secured paths by verifying user state and access tokens.

How do I protect routes in TanStack Router using access tokens?▼

Protecting routes in TanStack Router uses beforeLoad guards to validate stored access tokens before rendering. Unauthenticated users are redirected away from protected routes until they complete the login flow.

Can I automatically attach Authorization headers to API requests in TanStack Start?▼

Yes, you can automatically attach Authorization headers to API requests in TanStack Start by integrating the token storage utilities with your API client. The auth context ensures the correct access token is applied to secure external API consumption.

Does this client-side auth flow work with TanStack Start client-only mode?▼

Yes, this client-side auth flow works with TanStack Start client-only mode. It provides the required auth context, token storage, and route guards specifically for SPA apps consuming external APIs without server-side rendering.

What is needed to manage user state and login flows in a TanStack SPA?▼

Managing user state and login flows in a TanStack SPA requires an AuthContext and AuthProvider to handle access tokens. Token storage utilities persist the session while route guards secure the application.

Related Skills

Explore More Software Engineering Skills→
wanghaishengwanghaisheng
10

tanstack-integration-best-practices

Define TanStack Query, Router, and Start integration patterns for SSR hydration.

Community
Advanced
NymfariousNymfarious
1

handling-authentication

Implement Supabase Auth, AuthContext, and protected routes for StickerNest applications.

Community
Advanced
cill-i-amcill-i-am

router-core/data-loading

Standardize TanStack Router data loading with loaders, caching, and lifecycle hooks.

Community
Advanced
RitenoobRitenoob

nextjs-supabase-ssr

Configure Supabase clients for Next.js 15 App Router authentication contexts.

Community
Advanced