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.