How are routes protected from unauthorized access?

It utilizes TanStack Router's beforeLoad hook to perform authentication checks and redirects before a route component is rendered, providing a performant and secure guard layer.

Where does this skill store authentication tokens?

The skill provides flexible utilities for both localStorage (for persistent sessions) and sessionStorage (for tab-specific sessions) depending on your security requirements.

Can I use this with any backend API?

Yes, as long as your backend utilizes token-based authentication (like JWT). The skill generates an API client structure that is easily adaptable to your specific endpoint requirements.

Does this skill support Server Side Rendering (SSR)?

This specific skill is designed for client-only (SPA) modes. For TanStack Start with SSR and session-based authentication, use the tanstack-start-auth skill instead.

TanStack Client Authentication

Name: TanStack Client Authentication
Author: agusmdev

byagusmdev

0•

Security & Testing

Implements secure token-based authentication and route guards for TanStack Router and TanStack Start client-side applications.

This skill provides a standardized architectural pattern for managing JWT or token-based authentication in TanStack-based Single Page Applications (SPAs). It automates the setup of essential security infrastructure, including persistent token storage via localStorage or sessionStorage, a global authentication context with React hooks, and high-performance route guards using TanStack Router's beforeLoad functionality. It is ideal for developers building modern React frontends that need to securely interface with external API backends while maintaining a seamless user experience during login, registration, and session persistence.

Key Features

01Pre-configured ProtectedRoute components for declarative UI security

02Global AuthState management with React Context and the useAuth hook

03Standardized API integration patterns for login, logout, and profile synchronization

04Persistent token storage utilities for both localStorage and sessionStorage

050 GitHub stars

06Secure route protection using TanStack Router's beforeLoad lifecycle guards

Use Cases

01Migrating manual authentication logic to a robust, standardized TanStack Router pattern

02Implementing JWT-based security for a TanStack Start project running in client-only mode

03Building a React SPA that requires secure user login and protected dashboard access

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agusmdev/fullstack-ai-template tanstack-client-auth

For use in Claude.ai and ChatGPT

Download Skill