router-core-auth-and-guards

Implement route guards and RBAC with TanStack Router and React context.

7|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/hashintel/brunch --skill router-core-auth-and-guards-hashintel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core-auth-and-guards
Source: https://github.com/hashintel/brunch/tree/main/.agents/skills/router-core-auth-and-guards
Command: npx skills add https://github.com/hashintel/brunch --skill router-core-auth-and-guards-hashintel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router, and includes references (resource) components.

What problem does it solve?

This Skill provides robust route protection and role-based access control for web applications.

Core Features & Use Cases

  • Route Protection: Implements route guards to restrict access based on authentication status using beforeLoad and redirect mechanisms.
  • Auth State Management: Integrates authentication state into the router context, enabling seamless injected security logic.
  • Use Case: Protect a dashboard page so that only authenticated users with specific roles or permissions can access it, providing a secure user experience.

Quick Start

Protect routes by adding a beforeLoad hook that redirects unauthenticated users to login.

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 React routes with authentication and role-based access control?

Integrate authentication state into the React router context to inject security logic directly into route handling. This enables seamless session validation and user permission checks before rendering protected content.

Does this route protection approach support multi-role applications needing RBAC?

Yes, this route protection approach supports multi-role applications needing RBAC. It validates user sessions and checks specific role permissions to ensure only authorized users access protected dashboard pages and features.

How do I redirect unauthenticated users to login with React route guards?

Redirect unauthenticated users to login by adding a beforeLoad hook to protected routes. This route guard intercepts navigation attempts and redirects users lacking valid sessions or required permissions to the login page.

How do I integrate auth state into the router context for secure routing?

Integrate authentication state into the router context to inject security logic directly into route handling. This enables seamless session validation and user permission checks before rendering protected content.

Does this route protection approach support multi-role applications needing RBAC?

Yes, this route protection approach supports multi-role applications needing RBAC. It validates user sessions and checks specific role permissions to ensure only authorized users access protected dashboard pages and features.

What's the best way to restrict access to a React dashboard based on user roles?

The best way to restrict access based on user roles is implementing RBAC route guards. This approach validates authentication status and specific permissions before loading dashboard content, redirecting unauthorized users automatically.