skills.rest
guillempuche
guillempucheCOMMUNITY
Explore all skills by this author →
GitHub

router-core/auth-and-guards

Enforce authentication and RBAC guards on TanStack Router routes.

Updated Aug 27, 2026
Search Tags:#routing#rbac#auth#redirect#tanstack-router#beforeload#isredirect
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill router-core-auth-and-guards-guillempuche
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/auth-and-guards
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/router-core/skills/router-core/auth-and-guards
Command: npx skills add https://github.com/guillempuche/engranatge --skill router-core-auth-and-guards-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates insecure route access and flash of protected content by enforcing authentication and authorization checks before any protected route renders, and by providing safe redirect handling and auth state integration with the router.

Core Features & Use Cases

  • beforeLoad route guards run prior to rendering to block unauthenticated users and perform redirects.
  • Redirect-based and inline auth support both redirect-back login flows and inline login layouts that keep the current URL unchanged.
  • Robust redirect handling with isRedirect detection to avoid swallowing thrown redirects in try/catch blocks.
  • RBAC support and permission checks for admin, moderator, or permission-based access control at layout and page level.
  • Auth provider and router context integration for connecting Auth0, Clerk, Supabase, or custom providers and injecting live auth state via RouterProvider.

Quick Start

Add a pathless _authenticated layout route with a beforeLoad that throws redirect to /login when context.auth.isAuthenticated is false and validate redirect search params on the login route.

Frequently Asked Questions about router-core/auth-and-guards

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

FAQPage Schema
How do I protect TanStack Router routes from unauthorized access?▼

You can protect TanStack Router routes by adding a pathless layout route with a beforeLoad guard that checks authentication state and throws a redirect to the login page when access is unauthorized. This prevents protected content from flashing before rendering.

Why does my TanStack Router beforeLoad redirect get swallowed in a try/catch block?▼

Redirects thrown inside try/catch blocks can be swallowed accidentally. You must use isRedirect detection to check the caught error and rethrow intentionally thrown redirects, ensuring the router processes the navigation interruption correctly.

How do I implement role-based access control with TanStack Router?▼

Role-based access control is implemented using RBAC helpers within beforeLoad guards to validate user roles and permissions before rendering layout or page routes, blocking users who lack the required admin or moderator permissions.

Can I integrate external auth providers like Clerk or Supabase with TanStack Router guards?▼

Yes, you can connect external auth providers by injecting live authentication state into the router context via RouterProvider, allowing beforeLoad guards to access the current auth status and perform redirects or inline login flows.

What is the difference between redirect-based and inline login flows in route protection?▼

Redirect-based login sends unauthenticated users to a separate login URL with a return path, while inline login keeps the current URL unchanged by rendering a login layout directly within the protected route structure.

Related Skills

Explore More Software Engineering Skills→
rezicsrezics
6

router-core/auth-and-guards

Enforce authentication and RBAC on TanStack Router routes with beforeLoad and redirects.

Official
Advanced
AmirNikFinanceAmirNikFinance

auth-work

Implement Wix member authentication with useMembers and protected routes.

Community
Advanced
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
bovinphangbovinphang
21

fec-route-protection

Implement client-side route protection and RBAC across React Router, Next.js, Vue Router, and Nuxt.

Community
Advanced