auth-and-guards

Implements route protection, redirects, and RBAC guards in TanStack Router applications.

Updated May 26, 2026
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill auth-and-guards-albo-club
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: auth-and-guards
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/tanstack-router-core/auth-and-guards
Command: npx skills add https://github.com/Albo-Club/albo-os --skill auth-and-guards-albo-club

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router, @tanstack/react-start.

What problem does it solve? Securing routes in a TanStack Router application requires coordinating beforeLoad guards, redirect handling, and auth state injection without leaking protected data or breaking navigation flows. ## Core Features & Use Cases - Redirect-Based Route Guards: Protect routes with beforeLoad and redirect() inside _authenticated pathless layout routes, with redirect-back via sanitized search params. - RBAC and Permissions: Enforce role-based and permission-based access with hasRole, hasAnyRole, and hasPermission checks in nested layout routes. - Auth Context Injection: Flow live auth state into the router via createRootRouteWithContext and RouterProvider's context prop without recreating the router. - Use Case: Build an admin dashboard where only users with the admin role can access /_authenticated/_admin routes, unauthenticated visitors are redirected to /login, and after login they return to their original destination. ## Quick Start Protect my TanStack Router dashboard routes so unauthenticated users are redirected to a login page and returned to their original URL after signing in.

Frequently Asked Questions about auth-and-guards

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

FAQPage Schema
How do I protect routes in TanStack Router?

Create a pathless _authenticated layout route with a beforeLoad function that throws redirect() to /login when context.auth.isAuthenticated is false. Any route file placed under src/routes/_authenticated/ is automatically protected.

How to redirect back to the original page after login in TanStack Router?

Pass location.href as a redirect search param when throwing redirect() to /login, then validate it with validateSearch and sanitize it to a relative path. After successful login, navigate to that saved redirect target.

Does a beforeLoad route guard protect createServerFn server functions?

No. A beforeLoad guard only protects the route's UI; createServerFn produces an RPC endpoint reachable directly regardless of the route. Every server function touching user data needs authMiddleware or an in-handler auth check.

Why does my redirect get swallowed in beforeLoad try/catch?

redirect() works by throwing, so a catch block intercepts it. Use the isRedirect helper to check caught errors and re-throw redirects, handling only genuine errors in the catch block.

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

Extend your auth state with hasRole, hasAnyRole, and hasPermission helpers, then check them in beforeLoad of nested pathless layout routes like _admin or _moderator. Failed checks throw redirect() to an unauthorized page.

Can I show a login form instead of redirecting unauthenticated users?

Yes. In the _authenticated layout route component, read auth from Route.useRouteContext() and render a login form instead of Outlet when unauthenticated. The URL stays unchanged and protected content appears after login.