skills.rest
clerk
clerkOFFICIAL
Explore all skills by this author →
Website𝕏@ClerkGitHub

clerk-react-router-patterns

Implement Clerk authentication patterns in React Router v7 apps.

66|4|Updated Jan 6, 2026
Search Tags:#authentication#middleware#ssr#clerk#react-router#protected-routes#getauth
One-click install
npx skills add https://github.com/clerk/skills --skill clerk-react-router-patterns-clerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-react-router-patterns
Source: https://github.com/clerk/skills/tree/main/skills/frameworks/clerk-react-router-patterns
Command: npx skills add https://github.com/clerk/skills --skill clerk-react-router-patterns-clerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes uncertainty and common mistakes when adding Clerk authentication to React Router v7 applications, ensuring server-side loaders, middleware, and client components receive consistent auth state and avoiding broken redirects or empty getAuth results.

Core Features & Use Cases

  • Middleware and Loader Integration: Shows how to register clerkMiddleware and call rootAuthLoader so auth is available across the request pipeline.
  • Loader and Action Protection: Demonstrates using getAuth in loaders and actions to protect routes, redirect unauthenticated users, and scope requests to an organization.
  • SSR and Client Components: Covers fetching SSR user data in loaders and consuming auth in client hooks and components like OrganizationSwitcher.

Quick Start

Call rootAuthLoader in your root.tsx loader, export middleware = [clerkMiddleware()] and wrap the app with ClerkApp so getAuth works in nested loaders.

Frequently Asked Questions about clerk-react-router-patterns

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

FAQPage Schema
How do I add Clerk authentication middleware to a React Router v7 application?▼

To add Clerk authentication middleware in React Router v7, export middleware = [clerkMiddleware()] and call rootAuthLoader in your root.tsx loader, ensuring getAuth works seamlessly across nested loaders and the request pipeline.

How do I protect routes and loaders using getAuth in React Router?▼

Protecting routes with getAuth in React Router involves calling it inside your loaders and actions to verify authentication, redirect unauthenticated users, and scope requests to specific organizations for secure data access.

Why does getAuth return empty results in my React Router loaders?▼

If getAuth returns empty results in React Router loaders, it usually means clerkMiddleware is not registered or rootAuthLoader is missing from the root loader, breaking the auth state pipeline.

How do I load SSR user data and use OrganizationSwitcher with React Router?▼

To load SSR user data and use OrganizationSwitcher in React Router, fetch user data within your loaders and wrap the application with ClerkApp to properly consume auth in client hooks and components.

Can I use Clerk authentication patterns for server-side rendering in React Router?▼

Yes, Clerk authentication patterns support server-side rendering in React Router by fetching SSR user data in loaders and passing consistent auth state to client components like OrganizationSwitcher.

Related Skills

Explore More Software Engineering Skills→
aaravminaaravmin
1

clerk-react-router-patterns

Integrate Clerk authentication into React Router v7 applications with middleware and loaders.

Community
Intermediate
koushik-haitkoushik-hait

clerk-react-router-patterns

Integrate Clerk authentication into React Router v7 loaders, actions, and SSR.

Community
Intermediate
RajAryanIITBHURajAryanIITBHU

clerk-orgs

Configure Clerk organization-based multi-tenancy and role-based access control in Next.js applications.

Community
Advanced
RajAryanIITBHURajAryanIITBHU

clerk-react-router-patterns

Configure Clerk authentication patterns for React Router v7 loaders and middleware.

Community
Intermediate