[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-clerk-clerk-tanstack-patterns":3,"mdc-282ekw-key":37,"related-org-clerk-clerk-tanstack-patterns":1655,"related-repo-clerk-clerk-tanstack-patterns":1845},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"clerk-tanstack-patterns","implement Clerk auth in TanStack Start","TanStack React Start auth patterns with @clerk\u002Ftanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"clerk","Clerk","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fclerk.png",[12,16,19,20,23],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Backend","backend",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"Auth","auth",{"name":24,"slug":25,"type":15},"Frontend","frontend",59,"https:\u002F\u002Fgithub.com\u002Fclerk\u002Fskills","2026-04-07T04:46:12.031513","MIT",4,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"AI Skills to enhance working with Clerk","https:\u002F\u002Fgithub.com\u002Fclerk\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fframeworks\u002Fclerk-tanstack-patterns","---\nname: clerk-tanstack-patterns\ndescription: 'TanStack React Start auth patterns with @clerk\u002Ftanstack-react-start\n  - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack\n  auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.'\nlicense: MIT\nallowed-tools: WebFetch\nmetadata:\n  author: clerk\n  version: 1.0.0\n---\n\n# TanStack React Start Patterns\n\n## What Do You Need?\n\n| Task | Reference |\n|------|-----------|\n| Protect routes with beforeLoad | references\u002Frouter-guards.md |\n| Auth in createServerFn | references\u002Fserver-functions.md |\n| Pass auth to loaders | references\u002Floaders.md |\n| Configure Vinxi + clerkMiddleware | references\u002Fvinxi-server.md |\n\n## References\n\n| Reference | Description |\n|-----------|-------------|\n| `references\u002Frouter-guards.md` | beforeLoad auth redirect |\n| `references\u002Fserver-functions.md` | createServerFn with auth() |\n| `references\u002Floaders.md` | Auth context in loaders |\n| `references\u002Fvinxi-server.md` | clerkMiddleware() setup |\n\n## Setup\n\n```\nnpm install @clerk\u002Ftanstack-react-start\n```\n\n`.env`:\n```\nCLERK_PUBLISHABLE_KEY=pk_...\nCLERK_SECRET_KEY=sk_...\n```\n\n`src\u002Fstart.ts` (Vinxi entry):\n```typescript\nimport { clerkMiddleware } from '@clerk\u002Ftanstack-react-start\u002Fserver'\nimport { createStart } from '@tanstack\u002Freact-start'\n\nexport const startInstance = createStart(() => {\n  return {\n    requestMiddleware: [clerkMiddleware()],\n  }\n})\n```\n\n`src\u002Froutes\u002F__root.tsx` — wrap with `\u003CClerkProvider>`:\n```tsx\nimport { ClerkProvider } from '@clerk\u002Ftanstack-react-start'\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        \u003CClerkProvider>\n          {children}\n        \u003C\u002FClerkProvider>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\n## Mental Model\n\nTanStack Start runs on Vinxi. Auth flows through two layers:\n\n1. **Server layer** — `createServerFn` + `auth()` from `@clerk\u002Ftanstack-react-start\u002Fserver`\n2. **Router layer** — `beforeLoad` on route definitions, throws `redirect` for unauthenticated\n\nBoth layers are server-executed. Client hooks (`useAuth`, `useUser`) are React hooks for the browser side.\n\n## Minimal Pattern\n\n```typescript\nimport { createFileRoute, redirect } from '@tanstack\u002Freact-router'\nimport { createServerFn } from '@tanstack\u002Freact-start'\nimport { auth } from '@clerk\u002Ftanstack-react-start\u002Fserver'\n\nconst authStateFn = createServerFn().handler(async () => {\n  const { isAuthenticated, userId } = await auth()\n  if (!isAuthenticated) {\n    throw redirect({ to: '\u002Fsign-in' })\n  }\n  return { userId }\n})\n\nexport const Route = createFileRoute('\u002Fdashboard')({\n  beforeLoad: async () => await authStateFn(),\n})\n```\n\n## Common Pitfalls\n\n| Symptom | Cause | Fix |\n|---------|-------|-----|\n| `auth()` returns empty | Missing `clerkMiddleware` in start.ts | Add to `requestMiddleware` array |\n| `redirect` not thrown | Using `return` instead of `throw` | `throw redirect(...)` in TanStack |\n| Wrong import for `auth` | Mixing client\u002Fserver imports | Server: `@clerk\u002Ftanstack-react-start\u002Fserver` |\n| Loader context missing userId | Not passing from beforeLoad | Return from beforeLoad, access via `context` |\n| `ClerkProvider` missing | Forgot root wrapping | Add to `__root.tsx` shell component |\n\n## See Also\n\n- `clerk-setup` - Initial Clerk install\n- `clerk-custom-ui` - Custom flows & appearance\n- `clerk-orgs` - B2B organizations\n\n## Docs\n\n[TanStack React Start SDK](https:\u002F\u002Fclerk.com\u002Fdocs\u002Ftanstack-react-start\u002Fgetting-started\u002Fquickstart)\n",{"data":38,"body":42},{"name":4,"description":6,"license":29,"allowed-tools":39,"metadata":40},"WebFetch",{"author":8,"version":41},"1.0.0",{"type":43,"children":44},"root",[45,54,61,141,147,233,239,251,263,272,283,509,527,819,825,830,892,913,919,1392,1398,1588,1594,1631,1637,1649],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"tanstack-react-start-patterns",[51],{"type":52,"value":53},"text","TanStack React Start Patterns",{"type":46,"tag":55,"props":56,"children":58},"h2",{"id":57},"what-do-you-need",[59],{"type":52,"value":60},"What Do You Need?",{"type":46,"tag":62,"props":63,"children":64},"table",{},[65,84],{"type":46,"tag":66,"props":67,"children":68},"thead",{},[69],{"type":46,"tag":70,"props":71,"children":72},"tr",{},[73,79],{"type":46,"tag":74,"props":75,"children":76},"th",{},[77],{"type":52,"value":78},"Task",{"type":46,"tag":74,"props":80,"children":81},{},[82],{"type":52,"value":83},"Reference",{"type":46,"tag":85,"props":86,"children":87},"tbody",{},[88,102,115,128],{"type":46,"tag":70,"props":89,"children":90},{},[91,97],{"type":46,"tag":92,"props":93,"children":94},"td",{},[95],{"type":52,"value":96},"Protect routes with beforeLoad",{"type":46,"tag":92,"props":98,"children":99},{},[100],{"type":52,"value":101},"references\u002Frouter-guards.md",{"type":46,"tag":70,"props":103,"children":104},{},[105,110],{"type":46,"tag":92,"props":106,"children":107},{},[108],{"type":52,"value":109},"Auth in createServerFn",{"type":46,"tag":92,"props":111,"children":112},{},[113],{"type":52,"value":114},"references\u002Fserver-functions.md",{"type":46,"tag":70,"props":116,"children":117},{},[118,123],{"type":46,"tag":92,"props":119,"children":120},{},[121],{"type":52,"value":122},"Pass auth to loaders",{"type":46,"tag":92,"props":124,"children":125},{},[126],{"type":52,"value":127},"references\u002Floaders.md",{"type":46,"tag":70,"props":129,"children":130},{},[131,136],{"type":46,"tag":92,"props":132,"children":133},{},[134],{"type":52,"value":135},"Configure Vinxi + clerkMiddleware",{"type":46,"tag":92,"props":137,"children":138},{},[139],{"type":52,"value":140},"references\u002Fvinxi-server.md",{"type":46,"tag":55,"props":142,"children":144},{"id":143},"references",[145],{"type":52,"value":146},"References",{"type":46,"tag":62,"props":148,"children":149},{},[150,165],{"type":46,"tag":66,"props":151,"children":152},{},[153],{"type":46,"tag":70,"props":154,"children":155},{},[156,160],{"type":46,"tag":74,"props":157,"children":158},{},[159],{"type":52,"value":83},{"type":46,"tag":74,"props":161,"children":162},{},[163],{"type":52,"value":164},"Description",{"type":46,"tag":85,"props":166,"children":167},{},[168,185,201,217],{"type":46,"tag":70,"props":169,"children":170},{},[171,180],{"type":46,"tag":92,"props":172,"children":173},{},[174],{"type":46,"tag":175,"props":176,"children":178},"code",{"className":177},[],[179],{"type":52,"value":101},{"type":46,"tag":92,"props":181,"children":182},{},[183],{"type":52,"value":184},"beforeLoad auth redirect",{"type":46,"tag":70,"props":186,"children":187},{},[188,196],{"type":46,"tag":92,"props":189,"children":190},{},[191],{"type":46,"tag":175,"props":192,"children":194},{"className":193},[],[195],{"type":52,"value":114},{"type":46,"tag":92,"props":197,"children":198},{},[199],{"type":52,"value":200},"createServerFn with auth()",{"type":46,"tag":70,"props":202,"children":203},{},[204,212],{"type":46,"tag":92,"props":205,"children":206},{},[207],{"type":46,"tag":175,"props":208,"children":210},{"className":209},[],[211],{"type":52,"value":127},{"type":46,"tag":92,"props":213,"children":214},{},[215],{"type":52,"value":216},"Auth context in loaders",{"type":46,"tag":70,"props":218,"children":219},{},[220,228],{"type":46,"tag":92,"props":221,"children":222},{},[223],{"type":46,"tag":175,"props":224,"children":226},{"className":225},[],[227],{"type":52,"value":140},{"type":46,"tag":92,"props":229,"children":230},{},[231],{"type":52,"value":232},"clerkMiddleware() setup",{"type":46,"tag":55,"props":234,"children":236},{"id":235},"setup",[237],{"type":52,"value":238},"Setup",{"type":46,"tag":240,"props":241,"children":245},"pre",{"className":242,"code":244,"language":52},[243],"language-text","npm install @clerk\u002Ftanstack-react-start\n",[246],{"type":46,"tag":175,"props":247,"children":249},{"__ignoreMap":248},"",[250],{"type":52,"value":244},{"type":46,"tag":252,"props":253,"children":254},"p",{},[255,261],{"type":46,"tag":175,"props":256,"children":258},{"className":257},[],[259],{"type":52,"value":260},".env",{"type":52,"value":262},":",{"type":46,"tag":240,"props":264,"children":267},{"className":265,"code":266,"language":52},[243],"CLERK_PUBLISHABLE_KEY=pk_...\nCLERK_SECRET_KEY=sk_...\n",[268],{"type":46,"tag":175,"props":269,"children":270},{"__ignoreMap":248},[271],{"type":52,"value":266},{"type":46,"tag":252,"props":273,"children":274},{},[275,281],{"type":46,"tag":175,"props":276,"children":278},{"className":277},[],[279],{"type":52,"value":280},"src\u002Fstart.ts",{"type":52,"value":282}," (Vinxi entry):",{"type":46,"tag":240,"props":284,"children":288},{"className":285,"code":286,"language":287,"meta":248,"style":248},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { clerkMiddleware } from '@clerk\u002Ftanstack-react-start\u002Fserver'\nimport { createStart } from '@tanstack\u002Freact-start'\n\nexport const startInstance = createStart(() => {\n  return {\n    requestMiddleware: [clerkMiddleware()],\n  }\n})\n","typescript",[289],{"type":46,"tag":175,"props":290,"children":291},{"__ignoreMap":248},[292,342,380,390,439,452,486,495],{"type":46,"tag":293,"props":294,"children":297},"span",{"class":295,"line":296},"line",1,[298,304,310,316,321,326,331,337],{"type":46,"tag":293,"props":299,"children":301},{"style":300},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[302],{"type":52,"value":303},"import",{"type":46,"tag":293,"props":305,"children":307},{"style":306},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[308],{"type":52,"value":309}," {",{"type":46,"tag":293,"props":311,"children":313},{"style":312},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[314],{"type":52,"value":315}," clerkMiddleware",{"type":46,"tag":293,"props":317,"children":318},{"style":306},[319],{"type":52,"value":320}," }",{"type":46,"tag":293,"props":322,"children":323},{"style":300},[324],{"type":52,"value":325}," from",{"type":46,"tag":293,"props":327,"children":328},{"style":306},[329],{"type":52,"value":330}," '",{"type":46,"tag":293,"props":332,"children":334},{"style":333},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[335],{"type":52,"value":336},"@clerk\u002Ftanstack-react-start\u002Fserver",{"type":46,"tag":293,"props":338,"children":339},{"style":306},[340],{"type":52,"value":341},"'\n",{"type":46,"tag":293,"props":343,"children":345},{"class":295,"line":344},2,[346,350,354,359,363,367,371,376],{"type":46,"tag":293,"props":347,"children":348},{"style":300},[349],{"type":52,"value":303},{"type":46,"tag":293,"props":351,"children":352},{"style":306},[353],{"type":52,"value":309},{"type":46,"tag":293,"props":355,"children":356},{"style":312},[357],{"type":52,"value":358}," createStart",{"type":46,"tag":293,"props":360,"children":361},{"style":306},[362],{"type":52,"value":320},{"type":46,"tag":293,"props":364,"children":365},{"style":300},[366],{"type":52,"value":325},{"type":46,"tag":293,"props":368,"children":369},{"style":306},[370],{"type":52,"value":330},{"type":46,"tag":293,"props":372,"children":373},{"style":333},[374],{"type":52,"value":375},"@tanstack\u002Freact-start",{"type":46,"tag":293,"props":377,"children":378},{"style":306},[379],{"type":52,"value":341},{"type":46,"tag":293,"props":381,"children":383},{"class":295,"line":382},3,[384],{"type":46,"tag":293,"props":385,"children":387},{"emptyLinePlaceholder":386},true,[388],{"type":52,"value":389},"\n",{"type":46,"tag":293,"props":391,"children":392},{"class":295,"line":30},[393,398,404,409,414,419,424,429,434],{"type":46,"tag":293,"props":394,"children":395},{"style":300},[396],{"type":52,"value":397},"export",{"type":46,"tag":293,"props":399,"children":401},{"style":400},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[402],{"type":52,"value":403}," const",{"type":46,"tag":293,"props":405,"children":406},{"style":312},[407],{"type":52,"value":408}," startInstance ",{"type":46,"tag":293,"props":410,"children":411},{"style":306},[412],{"type":52,"value":413},"=",{"type":46,"tag":293,"props":415,"children":417},{"style":416},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[418],{"type":52,"value":358},{"type":46,"tag":293,"props":420,"children":421},{"style":312},[422],{"type":52,"value":423},"(",{"type":46,"tag":293,"props":425,"children":426},{"style":306},[427],{"type":52,"value":428},"()",{"type":46,"tag":293,"props":430,"children":431},{"style":400},[432],{"type":52,"value":433}," =>",{"type":46,"tag":293,"props":435,"children":436},{"style":306},[437],{"type":52,"value":438}," {\n",{"type":46,"tag":293,"props":440,"children":442},{"class":295,"line":441},5,[443,448],{"type":46,"tag":293,"props":444,"children":445},{"style":300},[446],{"type":52,"value":447},"  return",{"type":46,"tag":293,"props":449,"children":450},{"style":306},[451],{"type":52,"value":438},{"type":46,"tag":293,"props":453,"children":455},{"class":295,"line":454},6,[456,462,466,471,476,481],{"type":46,"tag":293,"props":457,"children":459},{"style":458},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[460],{"type":52,"value":461},"    requestMiddleware",{"type":46,"tag":293,"props":463,"children":464},{"style":306},[465],{"type":52,"value":262},{"type":46,"tag":293,"props":467,"children":468},{"style":458},[469],{"type":52,"value":470}," [",{"type":46,"tag":293,"props":472,"children":473},{"style":416},[474],{"type":52,"value":475},"clerkMiddleware",{"type":46,"tag":293,"props":477,"children":478},{"style":458},[479],{"type":52,"value":480},"()]",{"type":46,"tag":293,"props":482,"children":483},{"style":306},[484],{"type":52,"value":485},",\n",{"type":46,"tag":293,"props":487,"children":489},{"class":295,"line":488},7,[490],{"type":46,"tag":293,"props":491,"children":492},{"style":306},[493],{"type":52,"value":494},"  }\n",{"type":46,"tag":293,"props":496,"children":498},{"class":295,"line":497},8,[499,504],{"type":46,"tag":293,"props":500,"children":501},{"style":306},[502],{"type":52,"value":503},"}",{"type":46,"tag":293,"props":505,"children":506},{"style":312},[507],{"type":52,"value":508},")\n",{"type":46,"tag":252,"props":510,"children":511},{},[512,518,520,526],{"type":46,"tag":175,"props":513,"children":515},{"className":514},[],[516],{"type":52,"value":517},"src\u002Froutes\u002F__root.tsx",{"type":52,"value":519}," — wrap with ",{"type":46,"tag":175,"props":521,"children":523},{"className":522},[],[524],{"type":52,"value":525},"\u003CClerkProvider>",{"type":52,"value":262},{"type":46,"tag":240,"props":528,"children":532},{"className":529,"code":530,"language":531,"meta":248,"style":248},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ClerkProvider } from '@clerk\u002Ftanstack-react-start'\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        \u003CClerkProvider>\n          {children}\n        \u003C\u002FClerkProvider>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n","tsx",[533],{"type":46,"tag":175,"props":534,"children":535},{"__ignoreMap":248},[536,573,580,646,658,699,716,733,751,768,785,802,811],{"type":46,"tag":293,"props":537,"children":538},{"class":295,"line":296},[539,543,547,552,556,560,564,569],{"type":46,"tag":293,"props":540,"children":541},{"style":300},[542],{"type":52,"value":303},{"type":46,"tag":293,"props":544,"children":545},{"style":306},[546],{"type":52,"value":309},{"type":46,"tag":293,"props":548,"children":549},{"style":312},[550],{"type":52,"value":551}," ClerkProvider",{"type":46,"tag":293,"props":553,"children":554},{"style":306},[555],{"type":52,"value":320},{"type":46,"tag":293,"props":557,"children":558},{"style":300},[559],{"type":52,"value":325},{"type":46,"tag":293,"props":561,"children":562},{"style":306},[563],{"type":52,"value":330},{"type":46,"tag":293,"props":565,"children":566},{"style":333},[567],{"type":52,"value":568},"@clerk\u002Ftanstack-react-start",{"type":46,"tag":293,"props":570,"children":571},{"style":306},[572],{"type":52,"value":341},{"type":46,"tag":293,"props":574,"children":575},{"class":295,"line":344},[576],{"type":46,"tag":293,"props":577,"children":578},{"emptyLinePlaceholder":386},[579],{"type":52,"value":389},{"type":46,"tag":293,"props":581,"children":582},{"class":295,"line":382},[583,588,593,598,604,609,613,617,621,627,632,637,642],{"type":46,"tag":293,"props":584,"children":585},{"style":400},[586],{"type":52,"value":587},"function",{"type":46,"tag":293,"props":589,"children":590},{"style":416},[591],{"type":52,"value":592}," RootDocument",{"type":46,"tag":293,"props":594,"children":595},{"style":306},[596],{"type":52,"value":597},"({",{"type":46,"tag":293,"props":599,"children":601},{"style":600},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[602],{"type":52,"value":603}," children",{"type":46,"tag":293,"props":605,"children":606},{"style":306},[607],{"type":52,"value":608}," }:",{"type":46,"tag":293,"props":610,"children":611},{"style":306},[612],{"type":52,"value":309},{"type":46,"tag":293,"props":614,"children":615},{"style":458},[616],{"type":52,"value":603},{"type":46,"tag":293,"props":618,"children":619},{"style":306},[620],{"type":52,"value":262},{"type":46,"tag":293,"props":622,"children":624},{"style":623},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[625],{"type":52,"value":626}," React",{"type":46,"tag":293,"props":628,"children":629},{"style":306},[630],{"type":52,"value":631},".",{"type":46,"tag":293,"props":633,"children":634},{"style":623},[635],{"type":52,"value":636},"ReactNode",{"type":46,"tag":293,"props":638,"children":639},{"style":306},[640],{"type":52,"value":641}," })",{"type":46,"tag":293,"props":643,"children":644},{"style":306},[645],{"type":52,"value":438},{"type":46,"tag":293,"props":647,"children":648},{"class":295,"line":30},[649,653],{"type":46,"tag":293,"props":650,"children":651},{"style":300},[652],{"type":52,"value":447},{"type":46,"tag":293,"props":654,"children":655},{"style":458},[656],{"type":52,"value":657}," (\n",{"type":46,"tag":293,"props":659,"children":660},{"class":295,"line":441},[661,666,671,676,680,685,690,694],{"type":46,"tag":293,"props":662,"children":663},{"style":306},[664],{"type":52,"value":665},"    \u003C",{"type":46,"tag":293,"props":667,"children":668},{"style":458},[669],{"type":52,"value":670},"html",{"type":46,"tag":293,"props":672,"children":673},{"style":400},[674],{"type":52,"value":675}," lang",{"type":46,"tag":293,"props":677,"children":678},{"style":306},[679],{"type":52,"value":413},{"type":46,"tag":293,"props":681,"children":682},{"style":306},[683],{"type":52,"value":684},"\"",{"type":46,"tag":293,"props":686,"children":687},{"style":333},[688],{"type":52,"value":689},"en",{"type":46,"tag":293,"props":691,"children":692},{"style":306},[693],{"type":52,"value":684},{"type":46,"tag":293,"props":695,"children":696},{"style":306},[697],{"type":52,"value":698},">\n",{"type":46,"tag":293,"props":700,"children":701},{"class":295,"line":454},[702,707,712],{"type":46,"tag":293,"props":703,"children":704},{"style":306},[705],{"type":52,"value":706},"      \u003C",{"type":46,"tag":293,"props":708,"children":709},{"style":458},[710],{"type":52,"value":711},"body",{"type":46,"tag":293,"props":713,"children":714},{"style":306},[715],{"type":52,"value":698},{"type":46,"tag":293,"props":717,"children":718},{"class":295,"line":488},[719,724,729],{"type":46,"tag":293,"props":720,"children":721},{"style":306},[722],{"type":52,"value":723},"        \u003C",{"type":46,"tag":293,"props":725,"children":726},{"style":623},[727],{"type":52,"value":728},"ClerkProvider",{"type":46,"tag":293,"props":730,"children":731},{"style":306},[732],{"type":52,"value":698},{"type":46,"tag":293,"props":734,"children":735},{"class":295,"line":497},[736,741,746],{"type":46,"tag":293,"props":737,"children":738},{"style":306},[739],{"type":52,"value":740},"          {",{"type":46,"tag":293,"props":742,"children":743},{"style":312},[744],{"type":52,"value":745},"children",{"type":46,"tag":293,"props":747,"children":748},{"style":306},[749],{"type":52,"value":750},"}\n",{"type":46,"tag":293,"props":752,"children":754},{"class":295,"line":753},9,[755,760,764],{"type":46,"tag":293,"props":756,"children":757},{"style":306},[758],{"type":52,"value":759},"        \u003C\u002F",{"type":46,"tag":293,"props":761,"children":762},{"style":623},[763],{"type":52,"value":728},{"type":46,"tag":293,"props":765,"children":766},{"style":306},[767],{"type":52,"value":698},{"type":46,"tag":293,"props":769,"children":771},{"class":295,"line":770},10,[772,777,781],{"type":46,"tag":293,"props":773,"children":774},{"style":306},[775],{"type":52,"value":776},"      \u003C\u002F",{"type":46,"tag":293,"props":778,"children":779},{"style":458},[780],{"type":52,"value":711},{"type":46,"tag":293,"props":782,"children":783},{"style":306},[784],{"type":52,"value":698},{"type":46,"tag":293,"props":786,"children":788},{"class":295,"line":787},11,[789,794,798],{"type":46,"tag":293,"props":790,"children":791},{"style":306},[792],{"type":52,"value":793},"    \u003C\u002F",{"type":46,"tag":293,"props":795,"children":796},{"style":458},[797],{"type":52,"value":670},{"type":46,"tag":293,"props":799,"children":800},{"style":306},[801],{"type":52,"value":698},{"type":46,"tag":293,"props":803,"children":805},{"class":295,"line":804},12,[806],{"type":46,"tag":293,"props":807,"children":808},{"style":458},[809],{"type":52,"value":810},"  )\n",{"type":46,"tag":293,"props":812,"children":814},{"class":295,"line":813},13,[815],{"type":46,"tag":293,"props":816,"children":817},{"style":306},[818],{"type":52,"value":750},{"type":46,"tag":55,"props":820,"children":822},{"id":821},"mental-model",[823],{"type":52,"value":824},"Mental Model",{"type":46,"tag":252,"props":826,"children":827},{},[828],{"type":52,"value":829},"TanStack Start runs on Vinxi. Auth flows through two layers:",{"type":46,"tag":831,"props":832,"children":833},"ol",{},[834,867],{"type":46,"tag":835,"props":836,"children":837},"li",{},[838,844,846,852,854,860,862],{"type":46,"tag":839,"props":840,"children":841},"strong",{},[842],{"type":52,"value":843},"Server layer",{"type":52,"value":845}," — ",{"type":46,"tag":175,"props":847,"children":849},{"className":848},[],[850],{"type":52,"value":851},"createServerFn",{"type":52,"value":853}," + ",{"type":46,"tag":175,"props":855,"children":857},{"className":856},[],[858],{"type":52,"value":859},"auth()",{"type":52,"value":861}," from ",{"type":46,"tag":175,"props":863,"children":865},{"className":864},[],[866],{"type":52,"value":336},{"type":46,"tag":835,"props":868,"children":869},{},[870,875,876,882,884,890],{"type":46,"tag":839,"props":871,"children":872},{},[873],{"type":52,"value":874},"Router layer",{"type":52,"value":845},{"type":46,"tag":175,"props":877,"children":879},{"className":878},[],[880],{"type":52,"value":881},"beforeLoad",{"type":52,"value":883}," on route definitions, throws ",{"type":46,"tag":175,"props":885,"children":887},{"className":886},[],[888],{"type":52,"value":889},"redirect",{"type":52,"value":891}," for unauthenticated",{"type":46,"tag":252,"props":893,"children":894},{},[895,897,903,905,911],{"type":52,"value":896},"Both layers are server-executed. Client hooks (",{"type":46,"tag":175,"props":898,"children":900},{"className":899},[],[901],{"type":52,"value":902},"useAuth",{"type":52,"value":904},", ",{"type":46,"tag":175,"props":906,"children":908},{"className":907},[],[909],{"type":52,"value":910},"useUser",{"type":52,"value":912},") are React hooks for the browser side.",{"type":46,"tag":55,"props":914,"children":916},{"id":915},"minimal-pattern",[917],{"type":52,"value":918},"Minimal Pattern",{"type":46,"tag":240,"props":920,"children":922},{"className":285,"code":921,"language":287,"meta":248,"style":248},"import { createFileRoute, redirect } from '@tanstack\u002Freact-router'\nimport { createServerFn } from '@tanstack\u002Freact-start'\nimport { auth } from '@clerk\u002Ftanstack-react-start\u002Fserver'\n\nconst authStateFn = createServerFn().handler(async () => {\n  const { isAuthenticated, userId } = await auth()\n  if (!isAuthenticated) {\n    throw redirect({ to: '\u002Fsign-in' })\n  }\n  return { userId }\n})\n\nexport const Route = createFileRoute('\u002Fdashboard')({\n  beforeLoad: async () => await authStateFn(),\n})\n",[923],{"type":46,"tag":175,"props":924,"children":925},{"__ignoreMap":248},[926,973,1009,1045,1052,1108,1157,1190,1242,1249,1269,1280,1287,1337,1380],{"type":46,"tag":293,"props":927,"children":928},{"class":295,"line":296},[929,933,937,942,947,952,956,960,964,969],{"type":46,"tag":293,"props":930,"children":931},{"style":300},[932],{"type":52,"value":303},{"type":46,"tag":293,"props":934,"children":935},{"style":306},[936],{"type":52,"value":309},{"type":46,"tag":293,"props":938,"children":939},{"style":312},[940],{"type":52,"value":941}," createFileRoute",{"type":46,"tag":293,"props":943,"children":944},{"style":306},[945],{"type":52,"value":946},",",{"type":46,"tag":293,"props":948,"children":949},{"style":312},[950],{"type":52,"value":951}," redirect",{"type":46,"tag":293,"props":953,"children":954},{"style":306},[955],{"type":52,"value":320},{"type":46,"tag":293,"props":957,"children":958},{"style":300},[959],{"type":52,"value":325},{"type":46,"tag":293,"props":961,"children":962},{"style":306},[963],{"type":52,"value":330},{"type":46,"tag":293,"props":965,"children":966},{"style":333},[967],{"type":52,"value":968},"@tanstack\u002Freact-router",{"type":46,"tag":293,"props":970,"children":971},{"style":306},[972],{"type":52,"value":341},{"type":46,"tag":293,"props":974,"children":975},{"class":295,"line":344},[976,980,984,989,993,997,1001,1005],{"type":46,"tag":293,"props":977,"children":978},{"style":300},[979],{"type":52,"value":303},{"type":46,"tag":293,"props":981,"children":982},{"style":306},[983],{"type":52,"value":309},{"type":46,"tag":293,"props":985,"children":986},{"style":312},[987],{"type":52,"value":988}," createServerFn",{"type":46,"tag":293,"props":990,"children":991},{"style":306},[992],{"type":52,"value":320},{"type":46,"tag":293,"props":994,"children":995},{"style":300},[996],{"type":52,"value":325},{"type":46,"tag":293,"props":998,"children":999},{"style":306},[1000],{"type":52,"value":330},{"type":46,"tag":293,"props":1002,"children":1003},{"style":333},[1004],{"type":52,"value":375},{"type":46,"tag":293,"props":1006,"children":1007},{"style":306},[1008],{"type":52,"value":341},{"type":46,"tag":293,"props":1010,"children":1011},{"class":295,"line":382},[1012,1016,1020,1025,1029,1033,1037,1041],{"type":46,"tag":293,"props":1013,"children":1014},{"style":300},[1015],{"type":52,"value":303},{"type":46,"tag":293,"props":1017,"children":1018},{"style":306},[1019],{"type":52,"value":309},{"type":46,"tag":293,"props":1021,"children":1022},{"style":312},[1023],{"type":52,"value":1024}," auth",{"type":46,"tag":293,"props":1026,"children":1027},{"style":306},[1028],{"type":52,"value":320},{"type":46,"tag":293,"props":1030,"children":1031},{"style":300},[1032],{"type":52,"value":325},{"type":46,"tag":293,"props":1034,"children":1035},{"style":306},[1036],{"type":52,"value":330},{"type":46,"tag":293,"props":1038,"children":1039},{"style":333},[1040],{"type":52,"value":336},{"type":46,"tag":293,"props":1042,"children":1043},{"style":306},[1044],{"type":52,"value":341},{"type":46,"tag":293,"props":1046,"children":1047},{"class":295,"line":30},[1048],{"type":46,"tag":293,"props":1049,"children":1050},{"emptyLinePlaceholder":386},[1051],{"type":52,"value":389},{"type":46,"tag":293,"props":1053,"children":1054},{"class":295,"line":441},[1055,1060,1065,1069,1073,1077,1081,1086,1090,1095,1100,1104],{"type":46,"tag":293,"props":1056,"children":1057},{"style":400},[1058],{"type":52,"value":1059},"const",{"type":46,"tag":293,"props":1061,"children":1062},{"style":312},[1063],{"type":52,"value":1064}," authStateFn ",{"type":46,"tag":293,"props":1066,"children":1067},{"style":306},[1068],{"type":52,"value":413},{"type":46,"tag":293,"props":1070,"children":1071},{"style":416},[1072],{"type":52,"value":988},{"type":46,"tag":293,"props":1074,"children":1075},{"style":312},[1076],{"type":52,"value":428},{"type":46,"tag":293,"props":1078,"children":1079},{"style":306},[1080],{"type":52,"value":631},{"type":46,"tag":293,"props":1082,"children":1083},{"style":416},[1084],{"type":52,"value":1085},"handler",{"type":46,"tag":293,"props":1087,"children":1088},{"style":312},[1089],{"type":52,"value":423},{"type":46,"tag":293,"props":1091,"children":1092},{"style":400},[1093],{"type":52,"value":1094},"async",{"type":46,"tag":293,"props":1096,"children":1097},{"style":306},[1098],{"type":52,"value":1099}," ()",{"type":46,"tag":293,"props":1101,"children":1102},{"style":400},[1103],{"type":52,"value":433},{"type":46,"tag":293,"props":1105,"children":1106},{"style":306},[1107],{"type":52,"value":438},{"type":46,"tag":293,"props":1109,"children":1110},{"class":295,"line":454},[1111,1116,1120,1125,1129,1134,1138,1143,1148,1152],{"type":46,"tag":293,"props":1112,"children":1113},{"style":400},[1114],{"type":52,"value":1115},"  const",{"type":46,"tag":293,"props":1117,"children":1118},{"style":306},[1119],{"type":52,"value":309},{"type":46,"tag":293,"props":1121,"children":1122},{"style":312},[1123],{"type":52,"value":1124}," isAuthenticated",{"type":46,"tag":293,"props":1126,"children":1127},{"style":306},[1128],{"type":52,"value":946},{"type":46,"tag":293,"props":1130,"children":1131},{"style":312},[1132],{"type":52,"value":1133}," userId",{"type":46,"tag":293,"props":1135,"children":1136},{"style":306},[1137],{"type":52,"value":320},{"type":46,"tag":293,"props":1139,"children":1140},{"style":306},[1141],{"type":52,"value":1142}," =",{"type":46,"tag":293,"props":1144,"children":1145},{"style":300},[1146],{"type":52,"value":1147}," await",{"type":46,"tag":293,"props":1149,"children":1150},{"style":416},[1151],{"type":52,"value":1024},{"type":46,"tag":293,"props":1153,"children":1154},{"style":458},[1155],{"type":52,"value":1156},"()\n",{"type":46,"tag":293,"props":1158,"children":1159},{"class":295,"line":488},[1160,1165,1170,1175,1180,1185],{"type":46,"tag":293,"props":1161,"children":1162},{"style":300},[1163],{"type":52,"value":1164},"  if",{"type":46,"tag":293,"props":1166,"children":1167},{"style":458},[1168],{"type":52,"value":1169}," (",{"type":46,"tag":293,"props":1171,"children":1172},{"style":306},[1173],{"type":52,"value":1174},"!",{"type":46,"tag":293,"props":1176,"children":1177},{"style":312},[1178],{"type":52,"value":1179},"isAuthenticated",{"type":46,"tag":293,"props":1181,"children":1182},{"style":458},[1183],{"type":52,"value":1184},") ",{"type":46,"tag":293,"props":1186,"children":1187},{"style":306},[1188],{"type":52,"value":1189},"{\n",{"type":46,"tag":293,"props":1191,"children":1192},{"class":295,"line":497},[1193,1198,1202,1206,1211,1216,1220,1224,1229,1234,1238],{"type":46,"tag":293,"props":1194,"children":1195},{"style":300},[1196],{"type":52,"value":1197},"    throw",{"type":46,"tag":293,"props":1199,"children":1200},{"style":416},[1201],{"type":52,"value":951},{"type":46,"tag":293,"props":1203,"children":1204},{"style":458},[1205],{"type":52,"value":423},{"type":46,"tag":293,"props":1207,"children":1208},{"style":306},[1209],{"type":52,"value":1210},"{",{"type":46,"tag":293,"props":1212,"children":1213},{"style":458},[1214],{"type":52,"value":1215}," to",{"type":46,"tag":293,"props":1217,"children":1218},{"style":306},[1219],{"type":52,"value":262},{"type":46,"tag":293,"props":1221,"children":1222},{"style":306},[1223],{"type":52,"value":330},{"type":46,"tag":293,"props":1225,"children":1226},{"style":333},[1227],{"type":52,"value":1228},"\u002Fsign-in",{"type":46,"tag":293,"props":1230,"children":1231},{"style":306},[1232],{"type":52,"value":1233},"'",{"type":46,"tag":293,"props":1235,"children":1236},{"style":306},[1237],{"type":52,"value":320},{"type":46,"tag":293,"props":1239,"children":1240},{"style":458},[1241],{"type":52,"value":508},{"type":46,"tag":293,"props":1243,"children":1244},{"class":295,"line":753},[1245],{"type":46,"tag":293,"props":1246,"children":1247},{"style":306},[1248],{"type":52,"value":494},{"type":46,"tag":293,"props":1250,"children":1251},{"class":295,"line":770},[1252,1256,1260,1264],{"type":46,"tag":293,"props":1253,"children":1254},{"style":300},[1255],{"type":52,"value":447},{"type":46,"tag":293,"props":1257,"children":1258},{"style":306},[1259],{"type":52,"value":309},{"type":46,"tag":293,"props":1261,"children":1262},{"style":312},[1263],{"type":52,"value":1133},{"type":46,"tag":293,"props":1265,"children":1266},{"style":306},[1267],{"type":52,"value":1268}," }\n",{"type":46,"tag":293,"props":1270,"children":1271},{"class":295,"line":787},[1272,1276],{"type":46,"tag":293,"props":1273,"children":1274},{"style":306},[1275],{"type":52,"value":503},{"type":46,"tag":293,"props":1277,"children":1278},{"style":312},[1279],{"type":52,"value":508},{"type":46,"tag":293,"props":1281,"children":1282},{"class":295,"line":804},[1283],{"type":46,"tag":293,"props":1284,"children":1285},{"emptyLinePlaceholder":386},[1286],{"type":52,"value":389},{"type":46,"tag":293,"props":1288,"children":1289},{"class":295,"line":813},[1290,1294,1298,1303,1307,1311,1315,1319,1324,1328,1333],{"type":46,"tag":293,"props":1291,"children":1292},{"style":300},[1293],{"type":52,"value":397},{"type":46,"tag":293,"props":1295,"children":1296},{"style":400},[1297],{"type":52,"value":403},{"type":46,"tag":293,"props":1299,"children":1300},{"style":312},[1301],{"type":52,"value":1302}," Route ",{"type":46,"tag":293,"props":1304,"children":1305},{"style":306},[1306],{"type":52,"value":413},{"type":46,"tag":293,"props":1308,"children":1309},{"style":416},[1310],{"type":52,"value":941},{"type":46,"tag":293,"props":1312,"children":1313},{"style":312},[1314],{"type":52,"value":423},{"type":46,"tag":293,"props":1316,"children":1317},{"style":306},[1318],{"type":52,"value":1233},{"type":46,"tag":293,"props":1320,"children":1321},{"style":333},[1322],{"type":52,"value":1323},"\u002Fdashboard",{"type":46,"tag":293,"props":1325,"children":1326},{"style":306},[1327],{"type":52,"value":1233},{"type":46,"tag":293,"props":1329,"children":1330},{"style":312},[1331],{"type":52,"value":1332},")(",{"type":46,"tag":293,"props":1334,"children":1335},{"style":306},[1336],{"type":52,"value":1189},{"type":46,"tag":293,"props":1338,"children":1340},{"class":295,"line":1339},14,[1341,1346,1350,1355,1359,1363,1367,1372,1376],{"type":46,"tag":293,"props":1342,"children":1343},{"style":416},[1344],{"type":52,"value":1345},"  beforeLoad",{"type":46,"tag":293,"props":1347,"children":1348},{"style":306},[1349],{"type":52,"value":262},{"type":46,"tag":293,"props":1351,"children":1352},{"style":400},[1353],{"type":52,"value":1354}," async",{"type":46,"tag":293,"props":1356,"children":1357},{"style":306},[1358],{"type":52,"value":1099},{"type":46,"tag":293,"props":1360,"children":1361},{"style":400},[1362],{"type":52,"value":433},{"type":46,"tag":293,"props":1364,"children":1365},{"style":300},[1366],{"type":52,"value":1147},{"type":46,"tag":293,"props":1368,"children":1369},{"style":416},[1370],{"type":52,"value":1371}," authStateFn",{"type":46,"tag":293,"props":1373,"children":1374},{"style":312},[1375],{"type":52,"value":428},{"type":46,"tag":293,"props":1377,"children":1378},{"style":306},[1379],{"type":52,"value":485},{"type":46,"tag":293,"props":1381,"children":1383},{"class":295,"line":1382},15,[1384,1388],{"type":46,"tag":293,"props":1385,"children":1386},{"style":306},[1387],{"type":52,"value":503},{"type":46,"tag":293,"props":1389,"children":1390},{"style":312},[1391],{"type":52,"value":508},{"type":46,"tag":55,"props":1393,"children":1395},{"id":1394},"common-pitfalls",[1396],{"type":52,"value":1397},"Common Pitfalls",{"type":46,"tag":62,"props":1399,"children":1400},{},[1401,1422],{"type":46,"tag":66,"props":1402,"children":1403},{},[1404],{"type":46,"tag":70,"props":1405,"children":1406},{},[1407,1412,1417],{"type":46,"tag":74,"props":1408,"children":1409},{},[1410],{"type":52,"value":1411},"Symptom",{"type":46,"tag":74,"props":1413,"children":1414},{},[1415],{"type":52,"value":1416},"Cause",{"type":46,"tag":74,"props":1418,"children":1419},{},[1420],{"type":52,"value":1421},"Fix",{"type":46,"tag":85,"props":1423,"children":1424},{},[1425,1463,1506,1534,1558],{"type":46,"tag":70,"props":1426,"children":1427},{},[1428,1438,1450],{"type":46,"tag":92,"props":1429,"children":1430},{},[1431,1436],{"type":46,"tag":175,"props":1432,"children":1434},{"className":1433},[],[1435],{"type":52,"value":859},{"type":52,"value":1437}," returns empty",{"type":46,"tag":92,"props":1439,"children":1440},{},[1441,1443,1448],{"type":52,"value":1442},"Missing ",{"type":46,"tag":175,"props":1444,"children":1446},{"className":1445},[],[1447],{"type":52,"value":475},{"type":52,"value":1449}," in start.ts",{"type":46,"tag":92,"props":1451,"children":1452},{},[1453,1455,1461],{"type":52,"value":1454},"Add to ",{"type":46,"tag":175,"props":1456,"children":1458},{"className":1457},[],[1459],{"type":52,"value":1460},"requestMiddleware",{"type":52,"value":1462}," array",{"type":46,"tag":70,"props":1464,"children":1465},{},[1466,1476,1495],{"type":46,"tag":92,"props":1467,"children":1468},{},[1469,1474],{"type":46,"tag":175,"props":1470,"children":1472},{"className":1471},[],[1473],{"type":52,"value":889},{"type":52,"value":1475}," not thrown",{"type":46,"tag":92,"props":1477,"children":1478},{},[1479,1481,1487,1489],{"type":52,"value":1480},"Using ",{"type":46,"tag":175,"props":1482,"children":1484},{"className":1483},[],[1485],{"type":52,"value":1486},"return",{"type":52,"value":1488}," instead of ",{"type":46,"tag":175,"props":1490,"children":1492},{"className":1491},[],[1493],{"type":52,"value":1494},"throw",{"type":46,"tag":92,"props":1496,"children":1497},{},[1498,1504],{"type":46,"tag":175,"props":1499,"children":1501},{"className":1500},[],[1502],{"type":52,"value":1503},"throw redirect(...)",{"type":52,"value":1505}," in TanStack",{"type":46,"tag":70,"props":1507,"children":1508},{},[1509,1519,1524],{"type":46,"tag":92,"props":1510,"children":1511},{},[1512,1514],{"type":52,"value":1513},"Wrong import for ",{"type":46,"tag":175,"props":1515,"children":1517},{"className":1516},[],[1518],{"type":52,"value":22},{"type":46,"tag":92,"props":1520,"children":1521},{},[1522],{"type":52,"value":1523},"Mixing client\u002Fserver imports",{"type":46,"tag":92,"props":1525,"children":1526},{},[1527,1529],{"type":52,"value":1528},"Server: ",{"type":46,"tag":175,"props":1530,"children":1532},{"className":1531},[],[1533],{"type":52,"value":336},{"type":46,"tag":70,"props":1535,"children":1536},{},[1537,1542,1547],{"type":46,"tag":92,"props":1538,"children":1539},{},[1540],{"type":52,"value":1541},"Loader context missing userId",{"type":46,"tag":92,"props":1543,"children":1544},{},[1545],{"type":52,"value":1546},"Not passing from beforeLoad",{"type":46,"tag":92,"props":1548,"children":1549},{},[1550,1552],{"type":52,"value":1551},"Return from beforeLoad, access via ",{"type":46,"tag":175,"props":1553,"children":1555},{"className":1554},[],[1556],{"type":52,"value":1557},"context",{"type":46,"tag":70,"props":1559,"children":1560},{},[1561,1571,1576],{"type":46,"tag":92,"props":1562,"children":1563},{},[1564,1569],{"type":46,"tag":175,"props":1565,"children":1567},{"className":1566},[],[1568],{"type":52,"value":728},{"type":52,"value":1570}," missing",{"type":46,"tag":92,"props":1572,"children":1573},{},[1574],{"type":52,"value":1575},"Forgot root wrapping",{"type":46,"tag":92,"props":1577,"children":1578},{},[1579,1580,1586],{"type":52,"value":1454},{"type":46,"tag":175,"props":1581,"children":1583},{"className":1582},[],[1584],{"type":52,"value":1585},"__root.tsx",{"type":52,"value":1587}," shell component",{"type":46,"tag":55,"props":1589,"children":1591},{"id":1590},"see-also",[1592],{"type":52,"value":1593},"See Also",{"type":46,"tag":1595,"props":1596,"children":1597},"ul",{},[1598,1609,1620],{"type":46,"tag":835,"props":1599,"children":1600},{},[1601,1607],{"type":46,"tag":175,"props":1602,"children":1604},{"className":1603},[],[1605],{"type":52,"value":1606},"clerk-setup",{"type":52,"value":1608}," - Initial Clerk install",{"type":46,"tag":835,"props":1610,"children":1611},{},[1612,1618],{"type":46,"tag":175,"props":1613,"children":1615},{"className":1614},[],[1616],{"type":52,"value":1617},"clerk-custom-ui",{"type":52,"value":1619}," - Custom flows & appearance",{"type":46,"tag":835,"props":1621,"children":1622},{},[1623,1629],{"type":46,"tag":175,"props":1624,"children":1626},{"className":1625},[],[1627],{"type":52,"value":1628},"clerk-orgs",{"type":52,"value":1630}," - B2B organizations",{"type":46,"tag":55,"props":1632,"children":1634},{"id":1633},"docs",[1635],{"type":52,"value":1636},"Docs",{"type":46,"tag":252,"props":1638,"children":1639},{},[1640],{"type":46,"tag":1641,"props":1642,"children":1646},"a",{"href":1643,"rel":1644},"https:\u002F\u002Fclerk.com\u002Fdocs\u002Ftanstack-react-start\u002Fgetting-started\u002Fquickstart",[1645],"nofollow",[1647],{"type":52,"value":1648},"TanStack React Start SDK",{"type":46,"tag":1650,"props":1651,"children":1652},"style",{},[1653],{"type":52,"value":1654},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1656,"total":1844},[1657,1673,1688,1704,1720,1736,1752,1769,1784,1801,1816,1830],{"slug":8,"name":8,"fn":1658,"description":1659,"org":1660,"tags":1661,"stars":26,"repoUrl":27,"updatedAt":1672},"route Clerk authentication requests","Clerk authentication router. Use when user asks about Clerk CLI operations, adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router patterns, Chrome Extension patterns, organizations, billing, subscriptions, payments, pricing, plans, seat-based pricing, feature entitlements, syncing users, testing, impersonating a user, or testing webhooks locally. Automatically routes to the specific skill based on their task.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1662,1665,1666,1669],{"name":1663,"slug":1664,"type":15},"Authentication","authentication",{"name":9,"slug":8,"type":15},{"name":1667,"slug":1668,"type":15},"Mobile","mobile",{"name":1670,"slug":1671,"type":15},"Web Development","web-development","2026-07-18T05:12:23.438307",{"slug":1674,"name":1674,"fn":1675,"description":1676,"org":1677,"tags":1678,"stars":26,"repoUrl":27,"updatedAt":1687},"clerk-android","implement Clerk auth for native Android apps","Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt AuthView\u002FUserButton or custom API-driven auth flows. Do not use for Expo or React Native projects.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1679,1682,1683,1686],{"name":1680,"slug":1681,"type":15},"Android","android",{"name":9,"slug":8,"type":15},{"name":1684,"slug":1685,"type":15},"Kotlin","kotlin",{"name":1667,"slug":1668,"type":15},"2026-04-10T05:00:18.622871",{"slug":1689,"name":1689,"fn":1690,"description":1691,"org":1692,"tags":1693,"stars":26,"repoUrl":27,"updatedAt":1703},"clerk-astro-patterns","implement Clerk auth in Astro apps","Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1694,1697,1698,1699,1700],{"name":1695,"slug":1696,"type":15},"Astro","astro",{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1701,"slug":1702,"type":15},"Serverless","serverless","2026-04-07T04:46:14.731808",{"slug":1705,"name":1705,"fn":1706,"description":1707,"org":1708,"tags":1709,"stars":26,"repoUrl":27,"updatedAt":1719},"clerk-backend-api","execute Clerk Backend API requests","Clerk Backend REST API explorer and executor. Browse tags, inspect endpoint schemas, and execute authenticated requests. Use when listing users, managing organizations, or calling any Clerk API endpoint.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1710,1713,1714,1715,1716],{"name":1711,"slug":1712,"type":15},"API Development","api-development",{"name":1663,"slug":1664,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1717,"slug":1718,"type":15},"REST API","rest-api","2026-04-10T05:00:08.728072",{"slug":1721,"name":1721,"fn":1722,"description":1723,"org":1724,"tags":1725,"stars":26,"repoUrl":27,"updatedAt":1735},"clerk-billing","manage subscriptions with Clerk Billing","Clerk Billing for subscription management - render Clerk's PricingTable and in-app checkout drawer, configure subscription plans, seat-limit plans for B2B, feature entitlements with has(), and billing webhooks. Use for SaaS monetization, plan gating, checkout flows, trials, invoicing, and subscription lifecycle management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1726,1727,1728,1729,1732],{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1730,"slug":1731,"type":15},"Payments","payments",{"name":1733,"slug":1734,"type":15},"SaaS","saas","2026-04-29T05:37:27.130955",{"slug":1737,"name":1737,"fn":1738,"description":1739,"org":1740,"tags":1741,"stars":26,"repoUrl":27,"updatedAt":1751},"clerk-chrome-extension-patterns","implement Clerk auth in Chrome Extensions","Chrome Extension auth with @clerk\u002Fchrome-extension -- popup\u002Fsidepanel setup, syncHost for OAuth\u002FSAML via web app, createClerkClient for service workers and headless extensions, stable CRX ID. Triggers on: Chrome extension auth, Plasmo clerk, popup sign-in, syncHost, background service worker token, createClerkClient, headless extension.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1742,1743,1744,1745,1748],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1746,"slug":1747,"type":15},"OAuth","oauth",{"name":1749,"slug":1750,"type":15},"Security","security","2026-04-07T04:46:08.489328",{"slug":1753,"name":1753,"fn":1754,"description":1755,"org":1756,"tags":1757,"stars":26,"repoUrl":27,"updatedAt":1768},"clerk-cli","manage Clerk authentication and instances via CLI","Operate the Clerk CLI (`clerk` binary) for authentication, user\u002Forg\u002Fsession management, impersonation, local webhook testing, deploy verification, instance config, env keys, feature toggles, and any Clerk Backend, Platform, or Frontend API call. Use when the user mentions Clerk management tasks, \"list clerk users\", \"impersonate a user\", \"test webhooks locally\", \"enable orgs\", \"enable billing\", \"clerk env pull\", \"clerk doctor\", \"clerk deploy\", \"clerk api\", or any ad-hoc Clerk API request. Prefer the CLI over raw HTTP: it handles auth, key resolution, app\u002Finstance targeting, and formatting automatically.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1758,1759,1760,1761,1764,1767],{"name":1711,"slug":1712,"type":15},{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":1762,"slug":1763,"type":15},"CLI","cli",{"name":1765,"slug":1766,"type":15},"Deployment","deployment",{"name":1749,"slug":1750,"type":15},"2026-07-31T05:52:40.580813",{"slug":1617,"name":1617,"fn":1770,"description":1771,"org":1772,"tags":1773,"stars":26,"repoUrl":27,"updatedAt":1783},"customize Clerk UI and auth flows","Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use for custom sign-in\u002Fsign-up flows, appearance styling, visual customization, branding.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1774,1775,1778,1779,1782],{"name":1663,"slug":1664,"type":15},{"name":1776,"slug":1777,"type":15},"Branding","branding",{"name":9,"slug":8,"type":15},{"name":1780,"slug":1781,"type":15},"Design","design",{"name":24,"slug":25,"type":15},"2026-04-10T05:00:10.109158",{"slug":1785,"name":1785,"fn":1786,"description":1787,"org":1788,"tags":1789,"stars":26,"repoUrl":27,"updatedAt":1800},"clerk-expo","implement Clerk authentication in Expo apps","Add Clerk authentication to Expo and React Native apps using @clerk\u002Fexpo. Use for Expo setup, prebuilt native components (AuthView, UserButton), custom sign-in\u002Fsign-up flows (email, password, SMS\u002Fphone OTP, MFA), OAuth\u002FSSO, native Google\u002FApple sign-in, Expo Router protected routes, biometrics, and push notifications. Do not use for native Swift\u002FiOS, native Android\u002FKotlin, or web-only framework projects.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1790,1791,1792,1795,1796,1797],{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":1793,"slug":1794,"type":15},"Expo","expo",{"name":24,"slug":25,"type":15},{"name":1667,"slug":1668,"type":15},{"name":1798,"slug":1799,"type":15},"React Native","react-native","2026-05-19T06:48:47.074181",{"slug":1802,"name":1802,"fn":1803,"description":1804,"org":1805,"tags":1806,"stars":26,"repoUrl":27,"updatedAt":1815},"clerk-nextjs-patterns","implement advanced Next.js patterns with Clerk","Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1807,1808,1809,1812],{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1810,"slug":1811,"type":15},"Next.js","next-js",{"name":1813,"slug":1814,"type":15},"Performance","performance","2026-04-10T05:00:15.80215",{"slug":1817,"name":1817,"fn":1818,"description":1819,"org":1820,"tags":1821,"stars":26,"repoUrl":27,"updatedAt":1829},"clerk-nuxt-patterns","implement Clerk auth in Nuxt 3 apps","Nuxt 3 auth patterns with @clerk\u002Fnuxt - middleware, composables, server API routes, SSR. Triggers on: Nuxt auth, useAuth composable, clerkMiddleware Nuxt, server API Clerk, Nuxt route protection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1822,1823,1824,1825,1826],{"name":1663,"slug":1664,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1827,"slug":1828,"type":15},"Nuxt","nuxt","2026-04-07T04:46:18.337538",{"slug":1628,"name":1628,"fn":1831,"description":1832,"org":1833,"tags":1834,"stars":26,"repoUrl":27,"updatedAt":1843},"manage Clerk Organizations for B2B SaaS","Clerk Organizations for B2B SaaS - create multi-tenant apps with org switching, role-based access, verified domains, and enterprise SSO. Use for team workspaces, RBAC, org-based routing, member management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1835,1836,1839,1842],{"name":9,"slug":8,"type":15},{"name":1837,"slug":1838,"type":15},"Multi-Tenant","multi-tenant",{"name":1840,"slug":1841,"type":15},"RBAC","rbac",{"name":1733,"slug":1734,"type":15},"2026-04-10T05:00:14.40165",20,{"items":1846,"total":1844},[1847,1854,1861,1869,1877,1885,1893],{"slug":8,"name":8,"fn":1658,"description":1659,"org":1848,"tags":1849,"stars":26,"repoUrl":27,"updatedAt":1672},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1850,1851,1852,1853],{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":1667,"slug":1668,"type":15},{"name":1670,"slug":1671,"type":15},{"slug":1674,"name":1674,"fn":1675,"description":1676,"org":1855,"tags":1856,"stars":26,"repoUrl":27,"updatedAt":1687},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1857,1858,1859,1860],{"name":1680,"slug":1681,"type":15},{"name":9,"slug":8,"type":15},{"name":1684,"slug":1685,"type":15},{"name":1667,"slug":1668,"type":15},{"slug":1689,"name":1689,"fn":1690,"description":1691,"org":1862,"tags":1863,"stars":26,"repoUrl":27,"updatedAt":1703},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1864,1865,1866,1867,1868],{"name":1695,"slug":1696,"type":15},{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1701,"slug":1702,"type":15},{"slug":1705,"name":1705,"fn":1706,"description":1707,"org":1870,"tags":1871,"stars":26,"repoUrl":27,"updatedAt":1719},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1872,1873,1874,1875,1876],{"name":1711,"slug":1712,"type":15},{"name":1663,"slug":1664,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1717,"slug":1718,"type":15},{"slug":1721,"name":1721,"fn":1722,"description":1723,"org":1878,"tags":1879,"stars":26,"repoUrl":27,"updatedAt":1735},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1880,1881,1882,1883,1884],{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1730,"slug":1731,"type":15},{"name":1733,"slug":1734,"type":15},{"slug":1737,"name":1737,"fn":1738,"description":1739,"org":1886,"tags":1887,"stars":26,"repoUrl":27,"updatedAt":1751},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1888,1889,1890,1891,1892],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":1746,"slug":1747,"type":15},{"name":1749,"slug":1750,"type":15},{"slug":1753,"name":1753,"fn":1754,"description":1755,"org":1894,"tags":1895,"stars":26,"repoUrl":27,"updatedAt":1768},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1896,1897,1898,1899,1900,1901],{"name":1711,"slug":1712,"type":15},{"name":1663,"slug":1664,"type":15},{"name":9,"slug":8,"type":15},{"name":1762,"slug":1763,"type":15},{"name":1765,"slug":1766,"type":15},{"name":1749,"slug":1750,"type":15}]