Run any Skill in Manus with one click

clerk-tanstack-patterns

Stars1

Forks0

UpdatedJune 24, 2026 at 18:09

TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

gannonh

gannonh/kata-code

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

File Explorer

13 files

SKILL.md

readonly

name	clerk-tanstack-patterns
description	TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.
license	MIT
allowed-tools	WebFetch
metadata	{"author":"clerk","version":"1.0.0"}

TanStack React Start Patterns

What Do You Need?

Task	Reference
Protect routes with beforeLoad	references/router-guards.md
Auth in createServerFn	references/server-functions.md
Pass auth to loaders	references/loaders.md
Configure Vinxi + clerkMiddleware	references/vinxi-server.md

References

Reference	Description
`references/router-guards.md`	beforeLoad auth redirect
`references/server-functions.md`	createServerFn with auth()
`references/loaders.md`	Auth context in loaders
`references/vinxi-server.md`	clerkMiddleware() setup

Setup

npm install @clerk/tanstack-react-start

.env:

CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

src/start.ts (Vinxi entry):

import { clerkMiddleware } from "@clerk/tanstack-react-start/server";
import { createStart } from "@tanstack/react-start";

export const startInstance = createStart(() => {
  return {
    requestMiddleware: [clerkMiddleware()],
  };
});

src/routes/__root.tsx — wrap with <ClerkProvider>:

import { ClerkProvider } from "@clerk/tanstack-react-start";

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>{children}</ClerkProvider>
      </body>
    </html>
  );
}

Mental Model

TanStack Start runs on Vinxi. Auth flows through two layers:

Server layer — createServerFn + auth() from @clerk/tanstack-react-start/server
Router layer — beforeLoad on route definitions, throws redirect for unauthenticated

Both layers are server-executed. Client hooks (useAuth, useUser) are React hooks for the browser side.

Minimal Pattern

import { createFileRoute, redirect } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { auth } from "@clerk/tanstack-react-start/server";

const authStateFn = createServerFn().handler(async () => {
  const { isAuthenticated, userId } = await auth();
  if (!isAuthenticated) {
    throw redirect({ to: "/sign-in" });
  }
  return { userId };
});

export const Route = createFileRoute("/dashboard")({
  beforeLoad: async () => await authStateFn(),
});

Common Pitfalls

Symptom	Cause	Fix
`auth()` returns empty	Missing `clerkMiddleware` in start.ts	Add to `requestMiddleware` array
`redirect` not thrown	Using `return` instead of `throw`	`throw redirect(...)` in TanStack
Wrong import for `auth`	Mixing client/server imports	Server: `@clerk/tanstack-react-start/server`
Loader context missing userId	Not passing from beforeLoad	Return from beforeLoad, access via `context`
`ClerkProvider` missing	Forgot root wrapping	Add to `__root.tsx` shell component

Docs

TanStack React Start SDK

More from this repository

same repository

upstream-assess

gannonh/kata-code

Assess and selectively port changes from the upstream T3 Code fork (pingdotgg/t3code) into Kata Code. Use whenever the user wants to review what upstream has done, assess the diff, decide what to bring in, triage upstream commits, plan a vendor-pull, run an upstream scan, or figure out which upstream changes are worth porting. Covers scanning upstream since the last baseline, grouping commits by effort and risk, recommending Port/Skip/Watch per change, and re-implementing chosen changes as fork-original commits with Kata branding applied from the start.

2026-06-241

clerk-cli

gannonh/kata-code

Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, deploy verification, instance config, env keys, and any Clerk Backend or Platform API call. Use when the user mentions Clerk management tasks, "list clerk users", "create a clerk user", "update organization", "pull clerk config", "clerk env pull", "clerk doctor", "clerk deploy", "clerk deploy status", "clerk api", or any ad-hoc Clerk API request. Prefer the CLI over raw HTTP: it handles auth, key resolution, app/instance targeting, and formatting automatically.

2026-06-241

cloudflare

gannonh/kata-code

Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), feature flags (Flagship), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

2026-06-241

name	clerk-tanstack-patterns
description	TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.
license	MIT
allowed-tools	WebFetch
metadata	{"author":"clerk","version":"1.0.0"}

TanStack React Start Patterns

What Do You Need?

Task	Reference
Protect routes with beforeLoad	references/router-guards.md
Auth in createServerFn	references/server-functions.md
Pass auth to loaders	references/loaders.md
Configure Vinxi + clerkMiddleware	references/vinxi-server.md

References

Reference	Description
`references/router-guards.md`	beforeLoad auth redirect
`references/server-functions.md`	createServerFn with auth()
`references/loaders.md`	Auth context in loaders
`references/vinxi-server.md`	clerkMiddleware() setup

Setup

npm install @clerk/tanstack-react-start

.env:

CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

src/start.ts (Vinxi entry):

import { clerkMiddleware } from "@clerk/tanstack-react-start/server";
import { createStart } from "@tanstack/react-start";

export const startInstance = createStart(() => {
  return {
    requestMiddleware: [clerkMiddleware()],
  };
});

src/routes/__root.tsx — wrap with <ClerkProvider>:

import { ClerkProvider } from "@clerk/tanstack-react-start";

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>{children}</ClerkProvider>
      </body>
    </html>
  );
}

Mental Model

TanStack Start runs on Vinxi. Auth flows through two layers:

Server layer — createServerFn + auth() from @clerk/tanstack-react-start/server
Router layer — beforeLoad on route definitions, throws redirect for unauthenticated

Both layers are server-executed. Client hooks (useAuth, useUser) are React hooks for the browser side.

Minimal Pattern

import { createFileRoute, redirect } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { auth } from "@clerk/tanstack-react-start/server";

const authStateFn = createServerFn().handler(async () => {
  const { isAuthenticated, userId } = await auth();
  if (!isAuthenticated) {
    throw redirect({ to: "/sign-in" });
  }
  return { userId };
});

export const Route = createFileRoute("/dashboard")({
  beforeLoad: async () => await authStateFn(),
});

Common Pitfalls

Symptom	Cause	Fix
`auth()` returns empty	Missing `clerkMiddleware` in start.ts	Add to `requestMiddleware` array
`redirect` not thrown	Using `return` instead of `throw`	`throw redirect(...)` in TanStack
Wrong import for `auth`	Mixing client/server imports	Server: `@clerk/tanstack-react-start/server`
Loader context missing userId	Not passing from beforeLoad	Return from beforeLoad, access via `context`
`ClerkProvider` missing	Forgot root wrapping	Add to `__root.tsx` shell component

Docs

TanStack React Start SDK

clerk-tanstack-patterns

TanStack React Start Patterns

What Do You Need?

References

Setup

Mental Model

Minimal Pattern

Common Pitfalls

See Also

Docs

TanStack React Start Patterns

What Do You Need?

References

Setup

Mental Model

Minimal Pattern

Common Pitfalls

See Also

Docs