Clerk React Router Patterns

What it does

When your agent uses it

• : react-router auth
• React-router protected route
• Loader authentication
• SSR auth react-router

Example prompts

• “/clerk-react-router-patterns”

Requirements

• Node.js
• Pre-approved tools (allowed-tools): WebFetch

Workflow steps

3 steps, taken from the step headings in SKILL.md.

1. 1vite.config.ts (v8 only — REQUIRED)
2. 2root.tsx
3. 3react-router.config.ts (v7 only)

What it can do on your machine

Read from SKILL.md and the folder at commit 347e8ab. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • WebFetch

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships script files (TypeScript), which the agent can run.

  Shell commands in SKILL.md call:

  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • github.com
  • clerk.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Clerk React Router Patterns loads about 1.8k tokens when it runs, and up to ~3.1k if it reads all its reference files. Until then it costs about 92 tokens; SKILL.md has 487 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~92

When it runs · the whole SKILL.md, loaded when a task matches

~1.8k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~3.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from geekskai/blog at commit 347e8ab, republished under its MIT licence (© geekskai). 487 words, ~1,840 tokens.

name

clerk-react-router-patterns

description

React Router v7/v8 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router, useNavigate may be used only in the context of a Router.

allowed-tools

WebFetch

license

MIT

metadata.author

clerk

metadata.version

1.1.0

Error: useNavigate() may be used only in the context of a <Router> component.

import { reactRouter } from '@react-router/dev/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [reactRouter()],
  ssr: {
    noExternal: ['@clerk/react-router'],
  },
})

import { Outlet } from 'react-router'
import { rootAuthLoader, clerkMiddleware } from '@clerk/react-router/server'
import { ClerkProvider } from '@clerk/react-router'
import type { Route } from './+types/root'

export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args)
}

export default function App({ loaderData }: Route.ComponentProps) {
  return (
    <ClerkProvider loaderData={loaderData}>
      <Outlet />
    </ClerkProvider>
  )
}

import type { Config } from '@react-router/dev/config'

export default {
  future: {
    v8_middleware: true,
  },
} satisfies Config

Request → clerkMiddleware() → rootAuthLoader → page loader → component
                 ↓                   ↓               ↓
           attaches auth      injects state     getAuth(args)
           to context         to response       reads context

import { getAuth } from '@clerk/react-router/server'
import type { Route } from './+types/dashboard'

export async function loader(args: Route.LoaderArgs) {
  const { userId } = await getAuth(args)
  if (!userId) throw redirect('/sign-in')

  const data = await fetchUserData(userId)
  return { data }
}

import { getAuth } from '@clerk/react-router/server'

export async function action(args: Route.ActionArgs) {
  const { userId, orgId } = await getAuth(args)
  if (!userId) throw new Response('Unauthorized', { status: 401 })

  const formData = await args.request.formData()
  await saveData(userId, orgId, formData)
  return redirect('/dashboard')
}

import { useAuth, useUser } from '@clerk/react-router'

export function Profile() {
  const { userId, isSignedIn } = useAuth()
  const { user } = useUser()
  if (!isSignedIn) return null
  return <p>{user?.firstName}</p>
}

import { OrganizationSwitcher } from '@clerk/react-router'

export function Nav() {
  return <OrganizationSwitcher afterSelectOrganizationUrl="/dashboard" />
}

export async function loader(args: Route.LoaderArgs) {
  const { userId, orgId } = await getAuth(args)
  if (!userId) throw redirect('/sign-in')
  if (!orgId) throw redirect('/select-org')

  return { data: await fetchOrgData(orgId) }
}

© geekskai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 11 other files (references) in .agents/skills/clerk-react-router-patterns of geekskai/blog.

• SKILL.md
• evals/evals.json
• references/loaders-actions.md
• references/protected-routes.md
• references/ssr-auth.md
• templates/react-router-basic-auth/app/app.css
• templates/react-router-basic-auth/app/root.tsx
• templates/react-router-basic-auth/app/routes.ts
• templates/react-router-basic-auth/app/routes/home.tsx
• templates/react-router-basic-auth/package.json
• templates/react-router-basic-auth/react-router.config.ts
• templates/react-router-basic-auth/vite.config.ts

Open the folder on GitHubat commit 347e8ab

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in geekskai/blog, which our catalogue first saw on October 7, 2026.

• growupanand/ConvoForm.agents/skills/clerk-react-router-patterns