router-core/auth-and-guards

Protect routes with beforeLoad guards and RBAC in TanStack Router.

14.9k|1.8k|Updated Jan 14, 2019
One-click install
npx skills add https://github.com/TanStack/router --skill router-core-auth-and-guards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/auth-and-guards
Source: https://github.com/TanStack/router/tree/main/packages/router-core/skills/router-core/auth-and-guards
Command: npx skills add https://github.com/TanStack/router --skill router-core-auth-and-guards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Protects routes by enforcing authentication and authorization at the routing layer using beforeLoad, redirects, and RBAC, ensuring secure access to protected content.

Core Features & Use Cases

  • BeforeLoad-based route protection that prevents rendering of protected routes until authentication succeeds.
  • RBAC with roles and permissions to control access at page and nested-route levels.
  • Router context integration to share auth state across the app and implement redirect-based flows with providers (Auth0, Clerk, Supabase).

Quick Start

Create a pathless authentication boundary with a beforeLoad guard to redirect unauthenticated users to /login and protect all child routes.

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 routes with beforeLoad and redirect unauthenticated users in TanStack Router?▼

Use a pathless layout route with a beforeLoad guard to verify authentication and call redirect() to send unauthenticated users to the login page, preventing protected child routes from rendering until auth succeeds.

How do I implement RBAC role-based access control for nested routes?▼

Apply RBAC within the beforeLoad guard by checking user roles and permissions, then conditionally allow access or redirect. This controls authorization at both page and nested-route levels before rendering.

How does TanStack Router handle redirect errors caught in try/catch blocks?▼

Use the isRedirect helper to identify and re-throw redirects caught in try/catch blocks during beforeLoad execution, ensuring proper error handling while preserving the intended redirect flow.

Can I share auth state across routes using RouterProvider context?▼

Yes. Integrate your auth provider into the RouterProvider context to share authenticated state across the app, enabling consistent access control and redirect-based flows throughout all routes.

Does this auth guard pattern work with providers like Auth0, Clerk, or Supabase?▼

Yes. The beforeLoad guard and RouterProvider context integration support external auth providers including Auth0, Clerk, and Supabase to manage authenticated states and redirect-based access flows.

What's the best way to create an authentication boundary for protected content?▼

Create a pathless layout route with a beforeLoad guard that enforces authentication and redirects unauthenticated users, automatically protecting all nested child routes under that boundary.