[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-clerk-clerk-react-patterns":3,"mdc-ytotfd-key":37,"related-repo-clerk-clerk-react-patterns":2447,"related-org-clerk-clerk-react-patterns":2562},{"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-react-patterns","implement Clerk auth in React SPAs","React SPA auth patterns with @clerk\u002Freact for Vite\u002FCRA - ClerkProvider setup, useAuth\u002FuseUser\u002FuseClerk hooks, React Router protected routes, custom sign-in flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected route, custom sign-in form React.",{"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},"Security","security","tag",{"name":17,"slug":18,"type":15},"React","react",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"Authentication","authentication",{"name":24,"slug":25,"type":15},"Frontend","frontend",59,"https:\u002F\u002Fgithub.com\u002Fclerk\u002Fskills","2026-04-07T04:46:13.294474","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-react-patterns","---\nname: clerk-react-patterns\ndescription: 'React SPA auth patterns with @clerk\u002Freact for Vite\u002FCRA - ClerkProvider\n  setup, useAuth\u002FuseUser\u002FuseClerk hooks, React Router protected routes, custom sign-in\n  flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected\n  route, custom sign-in form React.'\nlicense: MIT\nallowed-tools: WebFetch\nmetadata:\n  author: clerk\n  version: 1.0.0\n---\n\n# React SPA Patterns\n\n> This skill covers `@clerk\u002Freact` for Vite\u002FCRA SPAs. For Next.js use `clerk-nextjs-patterns`. For TanStack Start use `clerk-tanstack-patterns`.\n\n## What Do You Need?\n\n| Task | Reference |\n|------|-----------|\n| useAuth \u002F useUser \u002F useClerk hooks | references\u002Fhooks.md |\n| Protected routes with React Router | references\u002Fprotected-routes.md |\n| Custom sign-in \u002F sign-up forms | references\u002Fcustom-flows.md |\n| React Router v6\u002Fv7 integration | references\u002Frouter-integration.md |\n\n## References\n\n| Reference | Description |\n|-----------|-------------|\n| `references\u002Fhooks.md` | useAuth, isLoaded guard |\n| `references\u002Fprotected-routes.md` | ProtectedRoute pattern |\n| `references\u002Fcustom-flows.md` | useSignIn, useSignUp flows |\n| `references\u002Frouter-integration.md` | React Router v6\u002Fv7 setup |\n\n## Setup\n\n```\nnpm install @clerk\u002Freact\n```\n\n`.env`:\n```\nVITE_CLERK_PUBLISHABLE_KEY=pk_...\n```\n\n`src\u002Fmain.tsx`:\n```tsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport { ClerkProvider } from '@clerk\u002Freact'\nimport App from '.\u002FApp.tsx'\n\nconst PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY\n\ncreateRoot(document.getElementById('root')!).render(\n  \u003CStrictMode>\n    \u003CClerkProvider publishableKey={PUBLISHABLE_KEY}>\n      \u003CApp \u002F>\n    \u003C\u002FClerkProvider>\n  \u003C\u002FStrictMode>,\n)\n```\n\n## Mental Model\n\n`@clerk\u002Freact` is client-only — there is no server-side `auth()`. All auth state comes from hooks.\n\n- `isLoaded` must be `true` before trusting `isSignedIn` — always guard on `isLoaded`\n- `useClerk()` gives access to `signOut`, `openSignIn`, `openUserProfile` and other methods\n- `getToken()` from `useAuth()` fetches the session JWT for API calls\n\n## Minimal Pattern\n\n```tsx\nimport { useAuth } from '@clerk\u002Freact'\n\nexport function Dashboard() {\n  const { isLoaded, isSignedIn, userId } = useAuth()\n\n  if (!isLoaded) return \u003Cdiv>Loading...\u003C\u002Fdiv>\n  if (!isSignedIn) return \u003Cdiv>Please sign in\u003C\u002Fdiv>\n\n  return \u003Cdiv>Hello {userId}\u003C\u002Fdiv>\n}\n```\n\n## Protected Route (React Router v6\u002Fv7)\n\n```tsx\nimport { Navigate, Outlet } from 'react-router-dom'\nimport { useAuth } from '@clerk\u002Freact'\n\nexport function ProtectedRoute() {\n  const { isLoaded, isSignedIn } = useAuth()\n\n  if (!isLoaded) return \u003Cdiv>Loading...\u003C\u002Fdiv>\n  if (!isSignedIn) return \u003CNavigate to=\"\u002Fsign-in\" replace \u002F>\n\n  return \u003COutlet \u002F>\n}\n```\n\n```tsx\n\u003CRoutes>\n  \u003CRoute element={\u003CProtectedRoute \u002F>}>\n    \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n    \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n  \u003C\u002FRoute>\n  \u003CRoute path=\"\u002Fsign-in\" element={\u003CSignIn \u002F>} \u002F>\n\u003C\u002FRoutes>\n```\n\n## Token for API Calls\n\n```tsx\nimport { useAuth } from '@clerk\u002Freact'\n\nexport function DataFetcher() {\n  const { getToken } = useAuth()\n\n  async function fetchData() {\n    const token = await getToken()\n    if (!token) return\n\n    const res = await fetch('\u002Fapi\u002Fdata', {\n      headers: { Authorization: `Bearer ${token}` },\n    })\n    return res.json()\n  }\n\n  return \u003Cbutton onClick={fetchData}>Load\u003C\u002Fbutton>\n}\n```\n\n## Common Pitfalls\n\n| Symptom | Cause | Fix |\n|---------|-------|-----|\n| `isSignedIn` is `undefined` | `isLoaded` is still `false` | Always check `isLoaded` first |\n| `ClerkProvider` missing | Provider not at root | Wrap `\u003CApp>` in `main.tsx` |\n| Env var undefined | Wrong Vite prefix | Use `VITE_CLERK_PUBLISHABLE_KEY`, access via `import.meta.env` |\n| Token is `null` | User not signed in | Null-check `getToken()` result |\n| Sign-in component shows blank | No `publishableKey` on provider | Pass `publishableKey` explicitly |\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[React SDK](https:\u002F\u002Fclerk.com\u002Fdocs\u002Freact\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,89,96,176,182,267,273,285,296,305,315,735,741,759,849,855,1178,1184,1506,1740,1746,2168,2174,2381,2387,2423,2429,2441],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"react-spa-patterns",[51],{"type":52,"value":53},"text","React SPA Patterns",{"type":46,"tag":55,"props":56,"children":57},"blockquote",{},[58],{"type":46,"tag":59,"props":60,"children":61},"p",{},[62,64,71,73,79,81,87],{"type":52,"value":63},"This skill covers ",{"type":46,"tag":65,"props":66,"children":68},"code",{"className":67},[],[69],{"type":52,"value":70},"@clerk\u002Freact",{"type":52,"value":72}," for Vite\u002FCRA SPAs. For Next.js use ",{"type":46,"tag":65,"props":74,"children":76},{"className":75},[],[77],{"type":52,"value":78},"clerk-nextjs-patterns",{"type":52,"value":80},". For TanStack Start use ",{"type":46,"tag":65,"props":82,"children":84},{"className":83},[],[85],{"type":52,"value":86},"clerk-tanstack-patterns",{"type":52,"value":88},".",{"type":46,"tag":90,"props":91,"children":93},"h2",{"id":92},"what-do-you-need",[94],{"type":52,"value":95},"What Do You Need?",{"type":46,"tag":97,"props":98,"children":99},"table",{},[100,119],{"type":46,"tag":101,"props":102,"children":103},"thead",{},[104],{"type":46,"tag":105,"props":106,"children":107},"tr",{},[108,114],{"type":46,"tag":109,"props":110,"children":111},"th",{},[112],{"type":52,"value":113},"Task",{"type":46,"tag":109,"props":115,"children":116},{},[117],{"type":52,"value":118},"Reference",{"type":46,"tag":120,"props":121,"children":122},"tbody",{},[123,137,150,163],{"type":46,"tag":105,"props":124,"children":125},{},[126,132],{"type":46,"tag":127,"props":128,"children":129},"td",{},[130],{"type":52,"value":131},"useAuth \u002F useUser \u002F useClerk hooks",{"type":46,"tag":127,"props":133,"children":134},{},[135],{"type":52,"value":136},"references\u002Fhooks.md",{"type":46,"tag":105,"props":138,"children":139},{},[140,145],{"type":46,"tag":127,"props":141,"children":142},{},[143],{"type":52,"value":144},"Protected routes with React Router",{"type":46,"tag":127,"props":146,"children":147},{},[148],{"type":52,"value":149},"references\u002Fprotected-routes.md",{"type":46,"tag":105,"props":151,"children":152},{},[153,158],{"type":46,"tag":127,"props":154,"children":155},{},[156],{"type":52,"value":157},"Custom sign-in \u002F sign-up forms",{"type":46,"tag":127,"props":159,"children":160},{},[161],{"type":52,"value":162},"references\u002Fcustom-flows.md",{"type":46,"tag":105,"props":164,"children":165},{},[166,171],{"type":46,"tag":127,"props":167,"children":168},{},[169],{"type":52,"value":170},"React Router v6\u002Fv7 integration",{"type":46,"tag":127,"props":172,"children":173},{},[174],{"type":52,"value":175},"references\u002Frouter-integration.md",{"type":46,"tag":90,"props":177,"children":179},{"id":178},"references",[180],{"type":52,"value":181},"References",{"type":46,"tag":97,"props":183,"children":184},{},[185,200],{"type":46,"tag":101,"props":186,"children":187},{},[188],{"type":46,"tag":105,"props":189,"children":190},{},[191,195],{"type":46,"tag":109,"props":192,"children":193},{},[194],{"type":52,"value":118},{"type":46,"tag":109,"props":196,"children":197},{},[198],{"type":52,"value":199},"Description",{"type":46,"tag":120,"props":201,"children":202},{},[203,219,235,251],{"type":46,"tag":105,"props":204,"children":205},{},[206,214],{"type":46,"tag":127,"props":207,"children":208},{},[209],{"type":46,"tag":65,"props":210,"children":212},{"className":211},[],[213],{"type":52,"value":136},{"type":46,"tag":127,"props":215,"children":216},{},[217],{"type":52,"value":218},"useAuth, isLoaded guard",{"type":46,"tag":105,"props":220,"children":221},{},[222,230],{"type":46,"tag":127,"props":223,"children":224},{},[225],{"type":46,"tag":65,"props":226,"children":228},{"className":227},[],[229],{"type":52,"value":149},{"type":46,"tag":127,"props":231,"children":232},{},[233],{"type":52,"value":234},"ProtectedRoute pattern",{"type":46,"tag":105,"props":236,"children":237},{},[238,246],{"type":46,"tag":127,"props":239,"children":240},{},[241],{"type":46,"tag":65,"props":242,"children":244},{"className":243},[],[245],{"type":52,"value":162},{"type":46,"tag":127,"props":247,"children":248},{},[249],{"type":52,"value":250},"useSignIn, useSignUp flows",{"type":46,"tag":105,"props":252,"children":253},{},[254,262],{"type":46,"tag":127,"props":255,"children":256},{},[257],{"type":46,"tag":65,"props":258,"children":260},{"className":259},[],[261],{"type":52,"value":175},{"type":46,"tag":127,"props":263,"children":264},{},[265],{"type":52,"value":266},"React Router v6\u002Fv7 setup",{"type":46,"tag":90,"props":268,"children":270},{"id":269},"setup",[271],{"type":52,"value":272},"Setup",{"type":46,"tag":274,"props":275,"children":279},"pre",{"className":276,"code":278,"language":52},[277],"language-text","npm install @clerk\u002Freact\n",[280],{"type":46,"tag":65,"props":281,"children":283},{"__ignoreMap":282},"",[284],{"type":52,"value":278},{"type":46,"tag":59,"props":286,"children":287},{},[288,294],{"type":46,"tag":65,"props":289,"children":291},{"className":290},[],[292],{"type":52,"value":293},".env",{"type":52,"value":295},":",{"type":46,"tag":274,"props":297,"children":300},{"className":298,"code":299,"language":52},[277],"VITE_CLERK_PUBLISHABLE_KEY=pk_...\n",[301],{"type":46,"tag":65,"props":302,"children":303},{"__ignoreMap":282},[304],{"type":52,"value":299},{"type":46,"tag":59,"props":306,"children":307},{},[308,314],{"type":46,"tag":65,"props":309,"children":311},{"className":310},[],[312],{"type":52,"value":313},"src\u002Fmain.tsx",{"type":52,"value":295},{"type":46,"tag":274,"props":316,"children":320},{"className":317,"code":318,"language":319,"meta":282,"style":282},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { StrictMode } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport { ClerkProvider } from '@clerk\u002Freact'\nimport App from '.\u002FApp.tsx'\n\nconst PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY\n\ncreateRoot(document.getElementById('root')!).render(\n  \u003CStrictMode>\n    \u003CClerkProvider publishableKey={PUBLISHABLE_KEY}>\n      \u003CApp \u002F>\n    \u003C\u002FClerkProvider>\n  \u003C\u002FStrictMode>,\n)\n","tsx",[321],{"type":46,"tag":65,"props":322,"children":323},{"__ignoreMap":282},[324,373,411,448,478,488,540,548,618,638,672,691,708,726],{"type":46,"tag":325,"props":326,"children":329},"span",{"class":327,"line":328},"line",1,[330,336,342,348,353,358,363,368],{"type":46,"tag":325,"props":331,"children":333},{"style":332},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[334],{"type":52,"value":335},"import",{"type":46,"tag":325,"props":337,"children":339},{"style":338},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[340],{"type":52,"value":341}," {",{"type":46,"tag":325,"props":343,"children":345},{"style":344},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[346],{"type":52,"value":347}," StrictMode",{"type":46,"tag":325,"props":349,"children":350},{"style":338},[351],{"type":52,"value":352}," }",{"type":46,"tag":325,"props":354,"children":355},{"style":332},[356],{"type":52,"value":357}," from",{"type":46,"tag":325,"props":359,"children":360},{"style":338},[361],{"type":52,"value":362}," '",{"type":46,"tag":325,"props":364,"children":366},{"style":365},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[367],{"type":52,"value":18},{"type":46,"tag":325,"props":369,"children":370},{"style":338},[371],{"type":52,"value":372},"'\n",{"type":46,"tag":325,"props":374,"children":376},{"class":327,"line":375},2,[377,381,385,390,394,398,402,407],{"type":46,"tag":325,"props":378,"children":379},{"style":332},[380],{"type":52,"value":335},{"type":46,"tag":325,"props":382,"children":383},{"style":338},[384],{"type":52,"value":341},{"type":46,"tag":325,"props":386,"children":387},{"style":344},[388],{"type":52,"value":389}," createRoot",{"type":46,"tag":325,"props":391,"children":392},{"style":338},[393],{"type":52,"value":352},{"type":46,"tag":325,"props":395,"children":396},{"style":332},[397],{"type":52,"value":357},{"type":46,"tag":325,"props":399,"children":400},{"style":338},[401],{"type":52,"value":362},{"type":46,"tag":325,"props":403,"children":404},{"style":365},[405],{"type":52,"value":406},"react-dom\u002Fclient",{"type":46,"tag":325,"props":408,"children":409},{"style":338},[410],{"type":52,"value":372},{"type":46,"tag":325,"props":412,"children":414},{"class":327,"line":413},3,[415,419,423,428,432,436,440,444],{"type":46,"tag":325,"props":416,"children":417},{"style":332},[418],{"type":52,"value":335},{"type":46,"tag":325,"props":420,"children":421},{"style":338},[422],{"type":52,"value":341},{"type":46,"tag":325,"props":424,"children":425},{"style":344},[426],{"type":52,"value":427}," ClerkProvider",{"type":46,"tag":325,"props":429,"children":430},{"style":338},[431],{"type":52,"value":352},{"type":46,"tag":325,"props":433,"children":434},{"style":332},[435],{"type":52,"value":357},{"type":46,"tag":325,"props":437,"children":438},{"style":338},[439],{"type":52,"value":362},{"type":46,"tag":325,"props":441,"children":442},{"style":365},[443],{"type":52,"value":70},{"type":46,"tag":325,"props":445,"children":446},{"style":338},[447],{"type":52,"value":372},{"type":46,"tag":325,"props":449,"children":450},{"class":327,"line":30},[451,455,460,465,469,474],{"type":46,"tag":325,"props":452,"children":453},{"style":332},[454],{"type":52,"value":335},{"type":46,"tag":325,"props":456,"children":457},{"style":344},[458],{"type":52,"value":459}," App ",{"type":46,"tag":325,"props":461,"children":462},{"style":332},[463],{"type":52,"value":464},"from",{"type":46,"tag":325,"props":466,"children":467},{"style":338},[468],{"type":52,"value":362},{"type":46,"tag":325,"props":470,"children":471},{"style":365},[472],{"type":52,"value":473},".\u002FApp.tsx",{"type":46,"tag":325,"props":475,"children":476},{"style":338},[477],{"type":52,"value":372},{"type":46,"tag":325,"props":479,"children":481},{"class":327,"line":480},5,[482],{"type":46,"tag":325,"props":483,"children":485},{"emptyLinePlaceholder":484},true,[486],{"type":52,"value":487},"\n",{"type":46,"tag":325,"props":489,"children":491},{"class":327,"line":490},6,[492,498,503,508,513,517,522,526,531,535],{"type":46,"tag":325,"props":493,"children":495},{"style":494},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[496],{"type":52,"value":497},"const",{"type":46,"tag":325,"props":499,"children":500},{"style":344},[501],{"type":52,"value":502}," PUBLISHABLE_KEY ",{"type":46,"tag":325,"props":504,"children":505},{"style":338},[506],{"type":52,"value":507},"=",{"type":46,"tag":325,"props":509,"children":510},{"style":332},[511],{"type":52,"value":512}," import",{"type":46,"tag":325,"props":514,"children":515},{"style":338},[516],{"type":52,"value":88},{"type":46,"tag":325,"props":518,"children":519},{"style":344},[520],{"type":52,"value":521},"meta",{"type":46,"tag":325,"props":523,"children":524},{"style":338},[525],{"type":52,"value":88},{"type":46,"tag":325,"props":527,"children":528},{"style":344},[529],{"type":52,"value":530},"env",{"type":46,"tag":325,"props":532,"children":533},{"style":338},[534],{"type":52,"value":88},{"type":46,"tag":325,"props":536,"children":537},{"style":344},[538],{"type":52,"value":539},"VITE_CLERK_PUBLISHABLE_KEY\n",{"type":46,"tag":325,"props":541,"children":543},{"class":327,"line":542},7,[544],{"type":46,"tag":325,"props":545,"children":546},{"emptyLinePlaceholder":484},[547],{"type":52,"value":487},{"type":46,"tag":325,"props":549,"children":551},{"class":327,"line":550},8,[552,558,563,567,572,577,582,586,590,595,600,604,608,613],{"type":46,"tag":325,"props":553,"children":555},{"style":554},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[556],{"type":52,"value":557},"createRoot",{"type":46,"tag":325,"props":559,"children":560},{"style":344},[561],{"type":52,"value":562},"(document",{"type":46,"tag":325,"props":564,"children":565},{"style":338},[566],{"type":52,"value":88},{"type":46,"tag":325,"props":568,"children":569},{"style":554},[570],{"type":52,"value":571},"getElementById",{"type":46,"tag":325,"props":573,"children":574},{"style":344},[575],{"type":52,"value":576},"(",{"type":46,"tag":325,"props":578,"children":579},{"style":338},[580],{"type":52,"value":581},"'",{"type":46,"tag":325,"props":583,"children":584},{"style":365},[585],{"type":52,"value":43},{"type":46,"tag":325,"props":587,"children":588},{"style":338},[589],{"type":52,"value":581},{"type":46,"tag":325,"props":591,"children":592},{"style":344},[593],{"type":52,"value":594},")",{"type":46,"tag":325,"props":596,"children":597},{"style":338},[598],{"type":52,"value":599},"!",{"type":46,"tag":325,"props":601,"children":602},{"style":344},[603],{"type":52,"value":594},{"type":46,"tag":325,"props":605,"children":606},{"style":338},[607],{"type":52,"value":88},{"type":46,"tag":325,"props":609,"children":610},{"style":554},[611],{"type":52,"value":612},"render",{"type":46,"tag":325,"props":614,"children":615},{"style":344},[616],{"type":52,"value":617},"(\n",{"type":46,"tag":325,"props":619,"children":621},{"class":327,"line":620},9,[622,627,633],{"type":46,"tag":325,"props":623,"children":624},{"style":338},[625],{"type":52,"value":626},"  \u003C",{"type":46,"tag":325,"props":628,"children":630},{"style":629},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[631],{"type":52,"value":632},"StrictMode",{"type":46,"tag":325,"props":634,"children":635},{"style":338},[636],{"type":52,"value":637},">\n",{"type":46,"tag":325,"props":639,"children":641},{"class":327,"line":640},10,[642,647,652,657,662,667],{"type":46,"tag":325,"props":643,"children":644},{"style":338},[645],{"type":52,"value":646},"    \u003C",{"type":46,"tag":325,"props":648,"children":649},{"style":629},[650],{"type":52,"value":651},"ClerkProvider",{"type":46,"tag":325,"props":653,"children":654},{"style":494},[655],{"type":52,"value":656}," publishableKey",{"type":46,"tag":325,"props":658,"children":659},{"style":338},[660],{"type":52,"value":661},"={",{"type":46,"tag":325,"props":663,"children":664},{"style":344},[665],{"type":52,"value":666},"PUBLISHABLE_KEY",{"type":46,"tag":325,"props":668,"children":669},{"style":338},[670],{"type":52,"value":671},"}>\n",{"type":46,"tag":325,"props":673,"children":675},{"class":327,"line":674},11,[676,681,686],{"type":46,"tag":325,"props":677,"children":678},{"style":338},[679],{"type":52,"value":680},"      \u003C",{"type":46,"tag":325,"props":682,"children":683},{"style":629},[684],{"type":52,"value":685},"App",{"type":46,"tag":325,"props":687,"children":688},{"style":338},[689],{"type":52,"value":690}," \u002F>\n",{"type":46,"tag":325,"props":692,"children":694},{"class":327,"line":693},12,[695,700,704],{"type":46,"tag":325,"props":696,"children":697},{"style":338},[698],{"type":52,"value":699},"    \u003C\u002F",{"type":46,"tag":325,"props":701,"children":702},{"style":629},[703],{"type":52,"value":651},{"type":46,"tag":325,"props":705,"children":706},{"style":338},[707],{"type":52,"value":637},{"type":46,"tag":325,"props":709,"children":711},{"class":327,"line":710},13,[712,717,721],{"type":46,"tag":325,"props":713,"children":714},{"style":338},[715],{"type":52,"value":716},"  \u003C\u002F",{"type":46,"tag":325,"props":718,"children":719},{"style":629},[720],{"type":52,"value":632},{"type":46,"tag":325,"props":722,"children":723},{"style":338},[724],{"type":52,"value":725},">,\n",{"type":46,"tag":325,"props":727,"children":729},{"class":327,"line":728},14,[730],{"type":46,"tag":325,"props":731,"children":732},{"style":344},[733],{"type":52,"value":734},")\n",{"type":46,"tag":90,"props":736,"children":738},{"id":737},"mental-model",[739],{"type":52,"value":740},"Mental Model",{"type":46,"tag":59,"props":742,"children":743},{},[744,749,751,757],{"type":46,"tag":65,"props":745,"children":747},{"className":746},[],[748],{"type":52,"value":70},{"type":52,"value":750}," is client-only — there is no server-side ",{"type":46,"tag":65,"props":752,"children":754},{"className":753},[],[755],{"type":52,"value":756},"auth()",{"type":52,"value":758},". All auth state comes from hooks.",{"type":46,"tag":760,"props":761,"children":762},"ul",{},[763,796,830],{"type":46,"tag":764,"props":765,"children":766},"li",{},[767,773,775,781,783,789,791],{"type":46,"tag":65,"props":768,"children":770},{"className":769},[],[771],{"type":52,"value":772},"isLoaded",{"type":52,"value":774}," must be ",{"type":46,"tag":65,"props":776,"children":778},{"className":777},[],[779],{"type":52,"value":780},"true",{"type":52,"value":782}," before trusting ",{"type":46,"tag":65,"props":784,"children":786},{"className":785},[],[787],{"type":52,"value":788},"isSignedIn",{"type":52,"value":790}," — always guard on ",{"type":46,"tag":65,"props":792,"children":794},{"className":793},[],[795],{"type":52,"value":772},{"type":46,"tag":764,"props":797,"children":798},{},[799,805,807,813,815,821,822,828],{"type":46,"tag":65,"props":800,"children":802},{"className":801},[],[803],{"type":52,"value":804},"useClerk()",{"type":52,"value":806}," gives access to ",{"type":46,"tag":65,"props":808,"children":810},{"className":809},[],[811],{"type":52,"value":812},"signOut",{"type":52,"value":814},", ",{"type":46,"tag":65,"props":816,"children":818},{"className":817},[],[819],{"type":52,"value":820},"openSignIn",{"type":52,"value":814},{"type":46,"tag":65,"props":823,"children":825},{"className":824},[],[826],{"type":52,"value":827},"openUserProfile",{"type":52,"value":829}," and other methods",{"type":46,"tag":764,"props":831,"children":832},{},[833,839,841,847],{"type":46,"tag":65,"props":834,"children":836},{"className":835},[],[837],{"type":52,"value":838},"getToken()",{"type":52,"value":840}," from ",{"type":46,"tag":65,"props":842,"children":844},{"className":843},[],[845],{"type":52,"value":846},"useAuth()",{"type":52,"value":848}," fetches the session JWT for API calls",{"type":46,"tag":90,"props":850,"children":852},{"id":851},"minimal-pattern",[853],{"type":52,"value":854},"Minimal Pattern",{"type":46,"tag":274,"props":856,"children":858},{"className":317,"code":857,"language":319,"meta":282,"style":282},"import { useAuth } from '@clerk\u002Freact'\n\nexport function Dashboard() {\n  const { isLoaded, isSignedIn, userId } = useAuth()\n\n  if (!isLoaded) return \u003Cdiv>Loading...\u003C\u002Fdiv>\n  if (!isSignedIn) return \u003Cdiv>Please sign in\u003C\u002Fdiv>\n\n  return \u003Cdiv>Hello {userId}\u003C\u002Fdiv>\n}\n",[859],{"type":46,"tag":65,"props":860,"children":861},{"__ignoreMap":282},[862,898,905,933,988,995,1059,1115,1122,1170],{"type":46,"tag":325,"props":863,"children":864},{"class":327,"line":328},[865,869,873,878,882,886,890,894],{"type":46,"tag":325,"props":866,"children":867},{"style":332},[868],{"type":52,"value":335},{"type":46,"tag":325,"props":870,"children":871},{"style":338},[872],{"type":52,"value":341},{"type":46,"tag":325,"props":874,"children":875},{"style":344},[876],{"type":52,"value":877}," useAuth",{"type":46,"tag":325,"props":879,"children":880},{"style":338},[881],{"type":52,"value":352},{"type":46,"tag":325,"props":883,"children":884},{"style":332},[885],{"type":52,"value":357},{"type":46,"tag":325,"props":887,"children":888},{"style":338},[889],{"type":52,"value":362},{"type":46,"tag":325,"props":891,"children":892},{"style":365},[893],{"type":52,"value":70},{"type":46,"tag":325,"props":895,"children":896},{"style":338},[897],{"type":52,"value":372},{"type":46,"tag":325,"props":899,"children":900},{"class":327,"line":375},[901],{"type":46,"tag":325,"props":902,"children":903},{"emptyLinePlaceholder":484},[904],{"type":52,"value":487},{"type":46,"tag":325,"props":906,"children":907},{"class":327,"line":413},[908,913,918,923,928],{"type":46,"tag":325,"props":909,"children":910},{"style":332},[911],{"type":52,"value":912},"export",{"type":46,"tag":325,"props":914,"children":915},{"style":494},[916],{"type":52,"value":917}," function",{"type":46,"tag":325,"props":919,"children":920},{"style":554},[921],{"type":52,"value":922}," Dashboard",{"type":46,"tag":325,"props":924,"children":925},{"style":338},[926],{"type":52,"value":927},"()",{"type":46,"tag":325,"props":929,"children":930},{"style":338},[931],{"type":52,"value":932}," {\n",{"type":46,"tag":325,"props":934,"children":935},{"class":327,"line":30},[936,941,945,950,955,960,964,969,973,978,982],{"type":46,"tag":325,"props":937,"children":938},{"style":494},[939],{"type":52,"value":940},"  const",{"type":46,"tag":325,"props":942,"children":943},{"style":338},[944],{"type":52,"value":341},{"type":46,"tag":325,"props":946,"children":947},{"style":344},[948],{"type":52,"value":949}," isLoaded",{"type":46,"tag":325,"props":951,"children":952},{"style":338},[953],{"type":52,"value":954},",",{"type":46,"tag":325,"props":956,"children":957},{"style":344},[958],{"type":52,"value":959}," isSignedIn",{"type":46,"tag":325,"props":961,"children":962},{"style":338},[963],{"type":52,"value":954},{"type":46,"tag":325,"props":965,"children":966},{"style":344},[967],{"type":52,"value":968}," userId",{"type":46,"tag":325,"props":970,"children":971},{"style":338},[972],{"type":52,"value":352},{"type":46,"tag":325,"props":974,"children":975},{"style":338},[976],{"type":52,"value":977}," =",{"type":46,"tag":325,"props":979,"children":980},{"style":554},[981],{"type":52,"value":877},{"type":46,"tag":325,"props":983,"children":985},{"style":984},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[986],{"type":52,"value":987},"()\n",{"type":46,"tag":325,"props":989,"children":990},{"class":327,"line":480},[991],{"type":46,"tag":325,"props":992,"children":993},{"emptyLinePlaceholder":484},[994],{"type":52,"value":487},{"type":46,"tag":325,"props":996,"children":997},{"class":327,"line":490},[998,1003,1008,1012,1016,1021,1026,1031,1036,1041,1046,1051,1055],{"type":46,"tag":325,"props":999,"children":1000},{"style":332},[1001],{"type":52,"value":1002},"  if",{"type":46,"tag":325,"props":1004,"children":1005},{"style":984},[1006],{"type":52,"value":1007}," (",{"type":46,"tag":325,"props":1009,"children":1010},{"style":338},[1011],{"type":52,"value":599},{"type":46,"tag":325,"props":1013,"children":1014},{"style":344},[1015],{"type":52,"value":772},{"type":46,"tag":325,"props":1017,"children":1018},{"style":984},[1019],{"type":52,"value":1020},") ",{"type":46,"tag":325,"props":1022,"children":1023},{"style":332},[1024],{"type":52,"value":1025},"return",{"type":46,"tag":325,"props":1027,"children":1028},{"style":338},[1029],{"type":52,"value":1030}," \u003C",{"type":46,"tag":325,"props":1032,"children":1033},{"style":984},[1034],{"type":52,"value":1035},"div",{"type":46,"tag":325,"props":1037,"children":1038},{"style":338},[1039],{"type":52,"value":1040},">",{"type":46,"tag":325,"props":1042,"children":1043},{"style":344},[1044],{"type":52,"value":1045},"Loading...",{"type":46,"tag":325,"props":1047,"children":1048},{"style":338},[1049],{"type":52,"value":1050},"\u003C\u002F",{"type":46,"tag":325,"props":1052,"children":1053},{"style":984},[1054],{"type":52,"value":1035},{"type":46,"tag":325,"props":1056,"children":1057},{"style":338},[1058],{"type":52,"value":637},{"type":46,"tag":325,"props":1060,"children":1061},{"class":327,"line":542},[1062,1066,1070,1074,1078,1082,1086,1090,1094,1098,1103,1107,1111],{"type":46,"tag":325,"props":1063,"children":1064},{"style":332},[1065],{"type":52,"value":1002},{"type":46,"tag":325,"props":1067,"children":1068},{"style":984},[1069],{"type":52,"value":1007},{"type":46,"tag":325,"props":1071,"children":1072},{"style":338},[1073],{"type":52,"value":599},{"type":46,"tag":325,"props":1075,"children":1076},{"style":344},[1077],{"type":52,"value":788},{"type":46,"tag":325,"props":1079,"children":1080},{"style":984},[1081],{"type":52,"value":1020},{"type":46,"tag":325,"props":1083,"children":1084},{"style":332},[1085],{"type":52,"value":1025},{"type":46,"tag":325,"props":1087,"children":1088},{"style":338},[1089],{"type":52,"value":1030},{"type":46,"tag":325,"props":1091,"children":1092},{"style":984},[1093],{"type":52,"value":1035},{"type":46,"tag":325,"props":1095,"children":1096},{"style":338},[1097],{"type":52,"value":1040},{"type":46,"tag":325,"props":1099,"children":1100},{"style":344},[1101],{"type":52,"value":1102},"Please sign in",{"type":46,"tag":325,"props":1104,"children":1105},{"style":338},[1106],{"type":52,"value":1050},{"type":46,"tag":325,"props":1108,"children":1109},{"style":984},[1110],{"type":52,"value":1035},{"type":46,"tag":325,"props":1112,"children":1113},{"style":338},[1114],{"type":52,"value":637},{"type":46,"tag":325,"props":1116,"children":1117},{"class":327,"line":550},[1118],{"type":46,"tag":325,"props":1119,"children":1120},{"emptyLinePlaceholder":484},[1121],{"type":52,"value":487},{"type":46,"tag":325,"props":1123,"children":1124},{"class":327,"line":620},[1125,1130,1134,1138,1142,1147,1152,1157,1162,1166],{"type":46,"tag":325,"props":1126,"children":1127},{"style":332},[1128],{"type":52,"value":1129},"  return",{"type":46,"tag":325,"props":1131,"children":1132},{"style":338},[1133],{"type":52,"value":1030},{"type":46,"tag":325,"props":1135,"children":1136},{"style":984},[1137],{"type":52,"value":1035},{"type":46,"tag":325,"props":1139,"children":1140},{"style":338},[1141],{"type":52,"value":1040},{"type":46,"tag":325,"props":1143,"children":1144},{"style":344},[1145],{"type":52,"value":1146},"Hello ",{"type":46,"tag":325,"props":1148,"children":1149},{"style":338},[1150],{"type":52,"value":1151},"{",{"type":46,"tag":325,"props":1153,"children":1154},{"style":344},[1155],{"type":52,"value":1156},"userId",{"type":46,"tag":325,"props":1158,"children":1159},{"style":338},[1160],{"type":52,"value":1161},"}\u003C\u002F",{"type":46,"tag":325,"props":1163,"children":1164},{"style":984},[1165],{"type":52,"value":1035},{"type":46,"tag":325,"props":1167,"children":1168},{"style":338},[1169],{"type":52,"value":637},{"type":46,"tag":325,"props":1171,"children":1172},{"class":327,"line":640},[1173],{"type":46,"tag":325,"props":1174,"children":1175},{"style":338},[1176],{"type":52,"value":1177},"}\n",{"type":46,"tag":90,"props":1179,"children":1181},{"id":1180},"protected-route-react-router-v6v7",[1182],{"type":52,"value":1183},"Protected Route (React Router v6\u002Fv7)",{"type":46,"tag":274,"props":1185,"children":1187},{"className":317,"code":1186,"language":319,"meta":282,"style":282},"import { Navigate, Outlet } from 'react-router-dom'\nimport { useAuth } from '@clerk\u002Freact'\n\nexport function ProtectedRoute() {\n  const { isLoaded, isSignedIn } = useAuth()\n\n  if (!isLoaded) return \u003Cdiv>Loading...\u003C\u002Fdiv>\n  if (!isSignedIn) return \u003CNavigate to=\"\u002Fsign-in\" replace \u002F>\n\n  return \u003COutlet \u002F>\n}\n",[1188],{"type":46,"tag":65,"props":1189,"children":1190},{"__ignoreMap":282},[1191,1237,1272,1279,1303,1342,1349,1404,1472,1479,1499],{"type":46,"tag":325,"props":1192,"children":1193},{"class":327,"line":328},[1194,1198,1202,1207,1211,1216,1220,1224,1228,1233],{"type":46,"tag":325,"props":1195,"children":1196},{"style":332},[1197],{"type":52,"value":335},{"type":46,"tag":325,"props":1199,"children":1200},{"style":338},[1201],{"type":52,"value":341},{"type":46,"tag":325,"props":1203,"children":1204},{"style":344},[1205],{"type":52,"value":1206}," Navigate",{"type":46,"tag":325,"props":1208,"children":1209},{"style":338},[1210],{"type":52,"value":954},{"type":46,"tag":325,"props":1212,"children":1213},{"style":344},[1214],{"type":52,"value":1215}," Outlet",{"type":46,"tag":325,"props":1217,"children":1218},{"style":338},[1219],{"type":52,"value":352},{"type":46,"tag":325,"props":1221,"children":1222},{"style":332},[1223],{"type":52,"value":357},{"type":46,"tag":325,"props":1225,"children":1226},{"style":338},[1227],{"type":52,"value":362},{"type":46,"tag":325,"props":1229,"children":1230},{"style":365},[1231],{"type":52,"value":1232},"react-router-dom",{"type":46,"tag":325,"props":1234,"children":1235},{"style":338},[1236],{"type":52,"value":372},{"type":46,"tag":325,"props":1238,"children":1239},{"class":327,"line":375},[1240,1244,1248,1252,1256,1260,1264,1268],{"type":46,"tag":325,"props":1241,"children":1242},{"style":332},[1243],{"type":52,"value":335},{"type":46,"tag":325,"props":1245,"children":1246},{"style":338},[1247],{"type":52,"value":341},{"type":46,"tag":325,"props":1249,"children":1250},{"style":344},[1251],{"type":52,"value":877},{"type":46,"tag":325,"props":1253,"children":1254},{"style":338},[1255],{"type":52,"value":352},{"type":46,"tag":325,"props":1257,"children":1258},{"style":332},[1259],{"type":52,"value":357},{"type":46,"tag":325,"props":1261,"children":1262},{"style":338},[1263],{"type":52,"value":362},{"type":46,"tag":325,"props":1265,"children":1266},{"style":365},[1267],{"type":52,"value":70},{"type":46,"tag":325,"props":1269,"children":1270},{"style":338},[1271],{"type":52,"value":372},{"type":46,"tag":325,"props":1273,"children":1274},{"class":327,"line":413},[1275],{"type":46,"tag":325,"props":1276,"children":1277},{"emptyLinePlaceholder":484},[1278],{"type":52,"value":487},{"type":46,"tag":325,"props":1280,"children":1281},{"class":327,"line":30},[1282,1286,1290,1295,1299],{"type":46,"tag":325,"props":1283,"children":1284},{"style":332},[1285],{"type":52,"value":912},{"type":46,"tag":325,"props":1287,"children":1288},{"style":494},[1289],{"type":52,"value":917},{"type":46,"tag":325,"props":1291,"children":1292},{"style":554},[1293],{"type":52,"value":1294}," ProtectedRoute",{"type":46,"tag":325,"props":1296,"children":1297},{"style":338},[1298],{"type":52,"value":927},{"type":46,"tag":325,"props":1300,"children":1301},{"style":338},[1302],{"type":52,"value":932},{"type":46,"tag":325,"props":1304,"children":1305},{"class":327,"line":480},[1306,1310,1314,1318,1322,1326,1330,1334,1338],{"type":46,"tag":325,"props":1307,"children":1308},{"style":494},[1309],{"type":52,"value":940},{"type":46,"tag":325,"props":1311,"children":1312},{"style":338},[1313],{"type":52,"value":341},{"type":46,"tag":325,"props":1315,"children":1316},{"style":344},[1317],{"type":52,"value":949},{"type":46,"tag":325,"props":1319,"children":1320},{"style":338},[1321],{"type":52,"value":954},{"type":46,"tag":325,"props":1323,"children":1324},{"style":344},[1325],{"type":52,"value":959},{"type":46,"tag":325,"props":1327,"children":1328},{"style":338},[1329],{"type":52,"value":352},{"type":46,"tag":325,"props":1331,"children":1332},{"style":338},[1333],{"type":52,"value":977},{"type":46,"tag":325,"props":1335,"children":1336},{"style":554},[1337],{"type":52,"value":877},{"type":46,"tag":325,"props":1339,"children":1340},{"style":984},[1341],{"type":52,"value":987},{"type":46,"tag":325,"props":1343,"children":1344},{"class":327,"line":490},[1345],{"type":46,"tag":325,"props":1346,"children":1347},{"emptyLinePlaceholder":484},[1348],{"type":52,"value":487},{"type":46,"tag":325,"props":1350,"children":1351},{"class":327,"line":542},[1352,1356,1360,1364,1368,1372,1376,1380,1384,1388,1392,1396,1400],{"type":46,"tag":325,"props":1353,"children":1354},{"style":332},[1355],{"type":52,"value":1002},{"type":46,"tag":325,"props":1357,"children":1358},{"style":984},[1359],{"type":52,"value":1007},{"type":46,"tag":325,"props":1361,"children":1362},{"style":338},[1363],{"type":52,"value":599},{"type":46,"tag":325,"props":1365,"children":1366},{"style":344},[1367],{"type":52,"value":772},{"type":46,"tag":325,"props":1369,"children":1370},{"style":984},[1371],{"type":52,"value":1020},{"type":46,"tag":325,"props":1373,"children":1374},{"style":332},[1375],{"type":52,"value":1025},{"type":46,"tag":325,"props":1377,"children":1378},{"style":338},[1379],{"type":52,"value":1030},{"type":46,"tag":325,"props":1381,"children":1382},{"style":984},[1383],{"type":52,"value":1035},{"type":46,"tag":325,"props":1385,"children":1386},{"style":338},[1387],{"type":52,"value":1040},{"type":46,"tag":325,"props":1389,"children":1390},{"style":344},[1391],{"type":52,"value":1045},{"type":46,"tag":325,"props":1393,"children":1394},{"style":338},[1395],{"type":52,"value":1050},{"type":46,"tag":325,"props":1397,"children":1398},{"style":984},[1399],{"type":52,"value":1035},{"type":46,"tag":325,"props":1401,"children":1402},{"style":338},[1403],{"type":52,"value":637},{"type":46,"tag":325,"props":1405,"children":1406},{"class":327,"line":550},[1407,1411,1415,1419,1423,1427,1431,1435,1440,1445,1449,1454,1459,1463,1468],{"type":46,"tag":325,"props":1408,"children":1409},{"style":332},[1410],{"type":52,"value":1002},{"type":46,"tag":325,"props":1412,"children":1413},{"style":984},[1414],{"type":52,"value":1007},{"type":46,"tag":325,"props":1416,"children":1417},{"style":338},[1418],{"type":52,"value":599},{"type":46,"tag":325,"props":1420,"children":1421},{"style":344},[1422],{"type":52,"value":788},{"type":46,"tag":325,"props":1424,"children":1425},{"style":984},[1426],{"type":52,"value":1020},{"type":46,"tag":325,"props":1428,"children":1429},{"style":332},[1430],{"type":52,"value":1025},{"type":46,"tag":325,"props":1432,"children":1433},{"style":338},[1434],{"type":52,"value":1030},{"type":46,"tag":325,"props":1436,"children":1437},{"style":629},[1438],{"type":52,"value":1439},"Navigate",{"type":46,"tag":325,"props":1441,"children":1442},{"style":494},[1443],{"type":52,"value":1444}," to",{"type":46,"tag":325,"props":1446,"children":1447},{"style":338},[1448],{"type":52,"value":507},{"type":46,"tag":325,"props":1450,"children":1451},{"style":338},[1452],{"type":52,"value":1453},"\"",{"type":46,"tag":325,"props":1455,"children":1456},{"style":365},[1457],{"type":52,"value":1458},"\u002Fsign-in",{"type":46,"tag":325,"props":1460,"children":1461},{"style":338},[1462],{"type":52,"value":1453},{"type":46,"tag":325,"props":1464,"children":1465},{"style":494},[1466],{"type":52,"value":1467}," replace",{"type":46,"tag":325,"props":1469,"children":1470},{"style":338},[1471],{"type":52,"value":690},{"type":46,"tag":325,"props":1473,"children":1474},{"class":327,"line":620},[1475],{"type":46,"tag":325,"props":1476,"children":1477},{"emptyLinePlaceholder":484},[1478],{"type":52,"value":487},{"type":46,"tag":325,"props":1480,"children":1481},{"class":327,"line":640},[1482,1486,1490,1495],{"type":46,"tag":325,"props":1483,"children":1484},{"style":332},[1485],{"type":52,"value":1129},{"type":46,"tag":325,"props":1487,"children":1488},{"style":338},[1489],{"type":52,"value":1030},{"type":46,"tag":325,"props":1491,"children":1492},{"style":629},[1493],{"type":52,"value":1494},"Outlet",{"type":46,"tag":325,"props":1496,"children":1497},{"style":338},[1498],{"type":52,"value":690},{"type":46,"tag":325,"props":1500,"children":1501},{"class":327,"line":674},[1502],{"type":46,"tag":325,"props":1503,"children":1504},{"style":338},[1505],{"type":52,"value":1177},{"type":46,"tag":274,"props":1507,"children":1509},{"className":317,"code":1508,"language":319,"meta":282,"style":282},"\u003CRoutes>\n  \u003CRoute element={\u003CProtectedRoute \u002F>}>\n    \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n    \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n  \u003C\u002FRoute>\n  \u003CRoute path=\"\u002Fsign-in\" element={\u003CSignIn \u002F>} \u002F>\n\u003C\u002FRoutes>\n",[1510],{"type":46,"tag":65,"props":1511,"children":1512},{"__ignoreMap":282},[1513,1530,1562,1613,1662,1677,1725],{"type":46,"tag":325,"props":1514,"children":1515},{"class":327,"line":328},[1516,1521,1526],{"type":46,"tag":325,"props":1517,"children":1518},{"style":338},[1519],{"type":52,"value":1520},"\u003C",{"type":46,"tag":325,"props":1522,"children":1523},{"style":629},[1524],{"type":52,"value":1525},"Routes",{"type":46,"tag":325,"props":1527,"children":1528},{"style":338},[1529],{"type":52,"value":637},{"type":46,"tag":325,"props":1531,"children":1532},{"class":327,"line":375},[1533,1537,1542,1547,1552,1557],{"type":46,"tag":325,"props":1534,"children":1535},{"style":338},[1536],{"type":52,"value":626},{"type":46,"tag":325,"props":1538,"children":1539},{"style":629},[1540],{"type":52,"value":1541},"Route",{"type":46,"tag":325,"props":1543,"children":1544},{"style":494},[1545],{"type":52,"value":1546}," element",{"type":46,"tag":325,"props":1548,"children":1549},{"style":338},[1550],{"type":52,"value":1551},"={\u003C",{"type":46,"tag":325,"props":1553,"children":1554},{"style":629},[1555],{"type":52,"value":1556},"ProtectedRoute",{"type":46,"tag":325,"props":1558,"children":1559},{"style":338},[1560],{"type":52,"value":1561}," \u002F>}>\n",{"type":46,"tag":325,"props":1563,"children":1564},{"class":327,"line":413},[1565,1569,1573,1578,1582,1586,1591,1595,1599,1603,1608],{"type":46,"tag":325,"props":1566,"children":1567},{"style":338},[1568],{"type":52,"value":646},{"type":46,"tag":325,"props":1570,"children":1571},{"style":629},[1572],{"type":52,"value":1541},{"type":46,"tag":325,"props":1574,"children":1575},{"style":494},[1576],{"type":52,"value":1577}," path",{"type":46,"tag":325,"props":1579,"children":1580},{"style":338},[1581],{"type":52,"value":507},{"type":46,"tag":325,"props":1583,"children":1584},{"style":338},[1585],{"type":52,"value":1453},{"type":46,"tag":325,"props":1587,"children":1588},{"style":365},[1589],{"type":52,"value":1590},"\u002Fdashboard",{"type":46,"tag":325,"props":1592,"children":1593},{"style":338},[1594],{"type":52,"value":1453},{"type":46,"tag":325,"props":1596,"children":1597},{"style":494},[1598],{"type":52,"value":1546},{"type":46,"tag":325,"props":1600,"children":1601},{"style":338},[1602],{"type":52,"value":1551},{"type":46,"tag":325,"props":1604,"children":1605},{"style":629},[1606],{"type":52,"value":1607},"Dashboard",{"type":46,"tag":325,"props":1609,"children":1610},{"style":338},[1611],{"type":52,"value":1612}," \u002F>} \u002F>\n",{"type":46,"tag":325,"props":1614,"children":1615},{"class":327,"line":30},[1616,1620,1624,1628,1632,1636,1641,1645,1649,1653,1658],{"type":46,"tag":325,"props":1617,"children":1618},{"style":338},[1619],{"type":52,"value":646},{"type":46,"tag":325,"props":1621,"children":1622},{"style":629},[1623],{"type":52,"value":1541},{"type":46,"tag":325,"props":1625,"children":1626},{"style":494},[1627],{"type":52,"value":1577},{"type":46,"tag":325,"props":1629,"children":1630},{"style":338},[1631],{"type":52,"value":507},{"type":46,"tag":325,"props":1633,"children":1634},{"style":338},[1635],{"type":52,"value":1453},{"type":46,"tag":325,"props":1637,"children":1638},{"style":365},[1639],{"type":52,"value":1640},"\u002Fsettings",{"type":46,"tag":325,"props":1642,"children":1643},{"style":338},[1644],{"type":52,"value":1453},{"type":46,"tag":325,"props":1646,"children":1647},{"style":494},[1648],{"type":52,"value":1546},{"type":46,"tag":325,"props":1650,"children":1651},{"style":338},[1652],{"type":52,"value":1551},{"type":46,"tag":325,"props":1654,"children":1655},{"style":629},[1656],{"type":52,"value":1657},"Settings",{"type":46,"tag":325,"props":1659,"children":1660},{"style":338},[1661],{"type":52,"value":1612},{"type":46,"tag":325,"props":1663,"children":1664},{"class":327,"line":480},[1665,1669,1673],{"type":46,"tag":325,"props":1666,"children":1667},{"style":338},[1668],{"type":52,"value":716},{"type":46,"tag":325,"props":1670,"children":1671},{"style":629},[1672],{"type":52,"value":1541},{"type":46,"tag":325,"props":1674,"children":1675},{"style":338},[1676],{"type":52,"value":637},{"type":46,"tag":325,"props":1678,"children":1679},{"class":327,"line":490},[1680,1684,1688,1692,1696,1700,1704,1708,1712,1716,1721],{"type":46,"tag":325,"props":1681,"children":1682},{"style":338},[1683],{"type":52,"value":626},{"type":46,"tag":325,"props":1685,"children":1686},{"style":629},[1687],{"type":52,"value":1541},{"type":46,"tag":325,"props":1689,"children":1690},{"style":494},[1691],{"type":52,"value":1577},{"type":46,"tag":325,"props":1693,"children":1694},{"style":338},[1695],{"type":52,"value":507},{"type":46,"tag":325,"props":1697,"children":1698},{"style":338},[1699],{"type":52,"value":1453},{"type":46,"tag":325,"props":1701,"children":1702},{"style":365},[1703],{"type":52,"value":1458},{"type":46,"tag":325,"props":1705,"children":1706},{"style":338},[1707],{"type":52,"value":1453},{"type":46,"tag":325,"props":1709,"children":1710},{"style":494},[1711],{"type":52,"value":1546},{"type":46,"tag":325,"props":1713,"children":1714},{"style":338},[1715],{"type":52,"value":1551},{"type":46,"tag":325,"props":1717,"children":1718},{"style":629},[1719],{"type":52,"value":1720},"SignIn",{"type":46,"tag":325,"props":1722,"children":1723},{"style":338},[1724],{"type":52,"value":1612},{"type":46,"tag":325,"props":1726,"children":1727},{"class":327,"line":542},[1728,1732,1736],{"type":46,"tag":325,"props":1729,"children":1730},{"style":338},[1731],{"type":52,"value":1050},{"type":46,"tag":325,"props":1733,"children":1734},{"style":629},[1735],{"type":52,"value":1525},{"type":46,"tag":325,"props":1737,"children":1738},{"style":338},[1739],{"type":52,"value":637},{"type":46,"tag":90,"props":1741,"children":1743},{"id":1742},"token-for-api-calls",[1744],{"type":52,"value":1745},"Token for API Calls",{"type":46,"tag":274,"props":1747,"children":1749},{"className":317,"code":1748,"language":319,"meta":282,"style":282},"import { useAuth } from '@clerk\u002Freact'\n\nexport function DataFetcher() {\n  const { getToken } = useAuth()\n\n  async function fetchData() {\n    const token = await getToken()\n    if (!token) return\n\n    const res = await fetch('\u002Fapi\u002Fdata', {\n      headers: { Authorization: `Bearer ${token}` },\n    })\n    return res.json()\n  }\n\n  return \u003Cbutton onClick={fetchData}>Load\u003C\u002Fbutton>\n}\n",[1750],{"type":46,"tag":65,"props":1751,"children":1752},{"__ignoreMap":282},[1753,1788,1795,1819,1851,1858,1883,1913,1943,1950,2000,2054,2066,2091,2099,2107,2160],{"type":46,"tag":325,"props":1754,"children":1755},{"class":327,"line":328},[1756,1760,1764,1768,1772,1776,1780,1784],{"type":46,"tag":325,"props":1757,"children":1758},{"style":332},[1759],{"type":52,"value":335},{"type":46,"tag":325,"props":1761,"children":1762},{"style":338},[1763],{"type":52,"value":341},{"type":46,"tag":325,"props":1765,"children":1766},{"style":344},[1767],{"type":52,"value":877},{"type":46,"tag":325,"props":1769,"children":1770},{"style":338},[1771],{"type":52,"value":352},{"type":46,"tag":325,"props":1773,"children":1774},{"style":332},[1775],{"type":52,"value":357},{"type":46,"tag":325,"props":1777,"children":1778},{"style":338},[1779],{"type":52,"value":362},{"type":46,"tag":325,"props":1781,"children":1782},{"style":365},[1783],{"type":52,"value":70},{"type":46,"tag":325,"props":1785,"children":1786},{"style":338},[1787],{"type":52,"value":372},{"type":46,"tag":325,"props":1789,"children":1790},{"class":327,"line":375},[1791],{"type":46,"tag":325,"props":1792,"children":1793},{"emptyLinePlaceholder":484},[1794],{"type":52,"value":487},{"type":46,"tag":325,"props":1796,"children":1797},{"class":327,"line":413},[1798,1802,1806,1811,1815],{"type":46,"tag":325,"props":1799,"children":1800},{"style":332},[1801],{"type":52,"value":912},{"type":46,"tag":325,"props":1803,"children":1804},{"style":494},[1805],{"type":52,"value":917},{"type":46,"tag":325,"props":1807,"children":1808},{"style":554},[1809],{"type":52,"value":1810}," DataFetcher",{"type":46,"tag":325,"props":1812,"children":1813},{"style":338},[1814],{"type":52,"value":927},{"type":46,"tag":325,"props":1816,"children":1817},{"style":338},[1818],{"type":52,"value":932},{"type":46,"tag":325,"props":1820,"children":1821},{"class":327,"line":30},[1822,1826,1830,1835,1839,1843,1847],{"type":46,"tag":325,"props":1823,"children":1824},{"style":494},[1825],{"type":52,"value":940},{"type":46,"tag":325,"props":1827,"children":1828},{"style":338},[1829],{"type":52,"value":341},{"type":46,"tag":325,"props":1831,"children":1832},{"style":344},[1833],{"type":52,"value":1834}," getToken",{"type":46,"tag":325,"props":1836,"children":1837},{"style":338},[1838],{"type":52,"value":352},{"type":46,"tag":325,"props":1840,"children":1841},{"style":338},[1842],{"type":52,"value":977},{"type":46,"tag":325,"props":1844,"children":1845},{"style":554},[1846],{"type":52,"value":877},{"type":46,"tag":325,"props":1848,"children":1849},{"style":984},[1850],{"type":52,"value":987},{"type":46,"tag":325,"props":1852,"children":1853},{"class":327,"line":480},[1854],{"type":46,"tag":325,"props":1855,"children":1856},{"emptyLinePlaceholder":484},[1857],{"type":52,"value":487},{"type":46,"tag":325,"props":1859,"children":1860},{"class":327,"line":490},[1861,1866,1870,1875,1879],{"type":46,"tag":325,"props":1862,"children":1863},{"style":494},[1864],{"type":52,"value":1865},"  async",{"type":46,"tag":325,"props":1867,"children":1868},{"style":494},[1869],{"type":52,"value":917},{"type":46,"tag":325,"props":1871,"children":1872},{"style":554},[1873],{"type":52,"value":1874}," fetchData",{"type":46,"tag":325,"props":1876,"children":1877},{"style":338},[1878],{"type":52,"value":927},{"type":46,"tag":325,"props":1880,"children":1881},{"style":338},[1882],{"type":52,"value":932},{"type":46,"tag":325,"props":1884,"children":1885},{"class":327,"line":542},[1886,1891,1896,1900,1905,1909],{"type":46,"tag":325,"props":1887,"children":1888},{"style":494},[1889],{"type":52,"value":1890},"    const",{"type":46,"tag":325,"props":1892,"children":1893},{"style":344},[1894],{"type":52,"value":1895}," token",{"type":46,"tag":325,"props":1897,"children":1898},{"style":338},[1899],{"type":52,"value":977},{"type":46,"tag":325,"props":1901,"children":1902},{"style":332},[1903],{"type":52,"value":1904}," await",{"type":46,"tag":325,"props":1906,"children":1907},{"style":554},[1908],{"type":52,"value":1834},{"type":46,"tag":325,"props":1910,"children":1911},{"style":984},[1912],{"type":52,"value":987},{"type":46,"tag":325,"props":1914,"children":1915},{"class":327,"line":550},[1916,1921,1925,1929,1934,1938],{"type":46,"tag":325,"props":1917,"children":1918},{"style":332},[1919],{"type":52,"value":1920},"    if",{"type":46,"tag":325,"props":1922,"children":1923},{"style":984},[1924],{"type":52,"value":1007},{"type":46,"tag":325,"props":1926,"children":1927},{"style":338},[1928],{"type":52,"value":599},{"type":46,"tag":325,"props":1930,"children":1931},{"style":344},[1932],{"type":52,"value":1933},"token",{"type":46,"tag":325,"props":1935,"children":1936},{"style":984},[1937],{"type":52,"value":1020},{"type":46,"tag":325,"props":1939,"children":1940},{"style":332},[1941],{"type":52,"value":1942},"return\n",{"type":46,"tag":325,"props":1944,"children":1945},{"class":327,"line":620},[1946],{"type":46,"tag":325,"props":1947,"children":1948},{"emptyLinePlaceholder":484},[1949],{"type":52,"value":487},{"type":46,"tag":325,"props":1951,"children":1952},{"class":327,"line":640},[1953,1957,1962,1966,1970,1975,1979,1983,1988,1992,1996],{"type":46,"tag":325,"props":1954,"children":1955},{"style":494},[1956],{"type":52,"value":1890},{"type":46,"tag":325,"props":1958,"children":1959},{"style":344},[1960],{"type":52,"value":1961}," res",{"type":46,"tag":325,"props":1963,"children":1964},{"style":338},[1965],{"type":52,"value":977},{"type":46,"tag":325,"props":1967,"children":1968},{"style":332},[1969],{"type":52,"value":1904},{"type":46,"tag":325,"props":1971,"children":1972},{"style":554},[1973],{"type":52,"value":1974}," fetch",{"type":46,"tag":325,"props":1976,"children":1977},{"style":984},[1978],{"type":52,"value":576},{"type":46,"tag":325,"props":1980,"children":1981},{"style":338},[1982],{"type":52,"value":581},{"type":46,"tag":325,"props":1984,"children":1985},{"style":365},[1986],{"type":52,"value":1987},"\u002Fapi\u002Fdata",{"type":46,"tag":325,"props":1989,"children":1990},{"style":338},[1991],{"type":52,"value":581},{"type":46,"tag":325,"props":1993,"children":1994},{"style":338},[1995],{"type":52,"value":954},{"type":46,"tag":325,"props":1997,"children":1998},{"style":338},[1999],{"type":52,"value":932},{"type":46,"tag":325,"props":2001,"children":2002},{"class":327,"line":674},[2003,2008,2012,2016,2021,2025,2030,2035,2040,2044,2049],{"type":46,"tag":325,"props":2004,"children":2005},{"style":984},[2006],{"type":52,"value":2007},"      headers",{"type":46,"tag":325,"props":2009,"children":2010},{"style":338},[2011],{"type":52,"value":295},{"type":46,"tag":325,"props":2013,"children":2014},{"style":338},[2015],{"type":52,"value":341},{"type":46,"tag":325,"props":2017,"children":2018},{"style":984},[2019],{"type":52,"value":2020}," Authorization",{"type":46,"tag":325,"props":2022,"children":2023},{"style":338},[2024],{"type":52,"value":295},{"type":46,"tag":325,"props":2026,"children":2027},{"style":338},[2028],{"type":52,"value":2029}," `",{"type":46,"tag":325,"props":2031,"children":2032},{"style":365},[2033],{"type":52,"value":2034},"Bearer ",{"type":46,"tag":325,"props":2036,"children":2037},{"style":338},[2038],{"type":52,"value":2039},"${",{"type":46,"tag":325,"props":2041,"children":2042},{"style":344},[2043],{"type":52,"value":1933},{"type":46,"tag":325,"props":2045,"children":2046},{"style":338},[2047],{"type":52,"value":2048},"}`",{"type":46,"tag":325,"props":2050,"children":2051},{"style":338},[2052],{"type":52,"value":2053}," },\n",{"type":46,"tag":325,"props":2055,"children":2056},{"class":327,"line":693},[2057,2062],{"type":46,"tag":325,"props":2058,"children":2059},{"style":338},[2060],{"type":52,"value":2061},"    }",{"type":46,"tag":325,"props":2063,"children":2064},{"style":984},[2065],{"type":52,"value":734},{"type":46,"tag":325,"props":2067,"children":2068},{"class":327,"line":710},[2069,2074,2078,2082,2087],{"type":46,"tag":325,"props":2070,"children":2071},{"style":332},[2072],{"type":52,"value":2073},"    return",{"type":46,"tag":325,"props":2075,"children":2076},{"style":344},[2077],{"type":52,"value":1961},{"type":46,"tag":325,"props":2079,"children":2080},{"style":338},[2081],{"type":52,"value":88},{"type":46,"tag":325,"props":2083,"children":2084},{"style":554},[2085],{"type":52,"value":2086},"json",{"type":46,"tag":325,"props":2088,"children":2089},{"style":984},[2090],{"type":52,"value":987},{"type":46,"tag":325,"props":2092,"children":2093},{"class":327,"line":728},[2094],{"type":46,"tag":325,"props":2095,"children":2096},{"style":338},[2097],{"type":52,"value":2098},"  }\n",{"type":46,"tag":325,"props":2100,"children":2102},{"class":327,"line":2101},15,[2103],{"type":46,"tag":325,"props":2104,"children":2105},{"emptyLinePlaceholder":484},[2106],{"type":52,"value":487},{"type":46,"tag":325,"props":2108,"children":2110},{"class":327,"line":2109},16,[2111,2115,2119,2124,2129,2133,2138,2143,2148,2152,2156],{"type":46,"tag":325,"props":2112,"children":2113},{"style":332},[2114],{"type":52,"value":1129},{"type":46,"tag":325,"props":2116,"children":2117},{"style":338},[2118],{"type":52,"value":1030},{"type":46,"tag":325,"props":2120,"children":2121},{"style":984},[2122],{"type":52,"value":2123},"button",{"type":46,"tag":325,"props":2125,"children":2126},{"style":494},[2127],{"type":52,"value":2128}," onClick",{"type":46,"tag":325,"props":2130,"children":2131},{"style":338},[2132],{"type":52,"value":661},{"type":46,"tag":325,"props":2134,"children":2135},{"style":344},[2136],{"type":52,"value":2137},"fetchData",{"type":46,"tag":325,"props":2139,"children":2140},{"style":338},[2141],{"type":52,"value":2142},"}>",{"type":46,"tag":325,"props":2144,"children":2145},{"style":344},[2146],{"type":52,"value":2147},"Load",{"type":46,"tag":325,"props":2149,"children":2150},{"style":338},[2151],{"type":52,"value":1050},{"type":46,"tag":325,"props":2153,"children":2154},{"style":984},[2155],{"type":52,"value":2123},{"type":46,"tag":325,"props":2157,"children":2158},{"style":338},[2159],{"type":52,"value":637},{"type":46,"tag":325,"props":2161,"children":2163},{"class":327,"line":2162},17,[2164],{"type":46,"tag":325,"props":2165,"children":2166},{"style":338},[2167],{"type":52,"value":1177},{"type":46,"tag":90,"props":2169,"children":2171},{"id":2170},"common-pitfalls",[2172],{"type":52,"value":2173},"Common Pitfalls",{"type":46,"tag":97,"props":2175,"children":2176},{},[2177,2198],{"type":46,"tag":101,"props":2178,"children":2179},{},[2180],{"type":46,"tag":105,"props":2181,"children":2182},{},[2183,2188,2193],{"type":46,"tag":109,"props":2184,"children":2185},{},[2186],{"type":52,"value":2187},"Symptom",{"type":46,"tag":109,"props":2189,"children":2190},{},[2191],{"type":52,"value":2192},"Cause",{"type":46,"tag":109,"props":2194,"children":2195},{},[2196],{"type":52,"value":2197},"Fix",{"type":46,"tag":120,"props":2199,"children":2200},{},[2201,2248,2285,2317,2348],{"type":46,"tag":105,"props":2202,"children":2203},{},[2204,2220,2236],{"type":46,"tag":127,"props":2205,"children":2206},{},[2207,2212,2214],{"type":46,"tag":65,"props":2208,"children":2210},{"className":2209},[],[2211],{"type":52,"value":788},{"type":52,"value":2213}," is ",{"type":46,"tag":65,"props":2215,"children":2217},{"className":2216},[],[2218],{"type":52,"value":2219},"undefined",{"type":46,"tag":127,"props":2221,"children":2222},{},[2223,2228,2230],{"type":46,"tag":65,"props":2224,"children":2226},{"className":2225},[],[2227],{"type":52,"value":772},{"type":52,"value":2229}," is still ",{"type":46,"tag":65,"props":2231,"children":2233},{"className":2232},[],[2234],{"type":52,"value":2235},"false",{"type":46,"tag":127,"props":2237,"children":2238},{},[2239,2241,2246],{"type":52,"value":2240},"Always check ",{"type":46,"tag":65,"props":2242,"children":2244},{"className":2243},[],[2245],{"type":52,"value":772},{"type":52,"value":2247}," first",{"type":46,"tag":105,"props":2249,"children":2250},{},[2251,2261,2266],{"type":46,"tag":127,"props":2252,"children":2253},{},[2254,2259],{"type":46,"tag":65,"props":2255,"children":2257},{"className":2256},[],[2258],{"type":52,"value":651},{"type":52,"value":2260}," missing",{"type":46,"tag":127,"props":2262,"children":2263},{},[2264],{"type":52,"value":2265},"Provider not at root",{"type":46,"tag":127,"props":2267,"children":2268},{},[2269,2271,2277,2279],{"type":52,"value":2270},"Wrap ",{"type":46,"tag":65,"props":2272,"children":2274},{"className":2273},[],[2275],{"type":52,"value":2276},"\u003CApp>",{"type":52,"value":2278}," in ",{"type":46,"tag":65,"props":2280,"children":2282},{"className":2281},[],[2283],{"type":52,"value":2284},"main.tsx",{"type":46,"tag":105,"props":2286,"children":2287},{},[2288,2293,2298],{"type":46,"tag":127,"props":2289,"children":2290},{},[2291],{"type":52,"value":2292},"Env var undefined",{"type":46,"tag":127,"props":2294,"children":2295},{},[2296],{"type":52,"value":2297},"Wrong Vite prefix",{"type":46,"tag":127,"props":2299,"children":2300},{},[2301,2303,2309,2311],{"type":52,"value":2302},"Use ",{"type":46,"tag":65,"props":2304,"children":2306},{"className":2305},[],[2307],{"type":52,"value":2308},"VITE_CLERK_PUBLISHABLE_KEY",{"type":52,"value":2310},", access via ",{"type":46,"tag":65,"props":2312,"children":2314},{"className":2313},[],[2315],{"type":52,"value":2316},"import.meta.env",{"type":46,"tag":105,"props":2318,"children":2319},{},[2320,2331,2336],{"type":46,"tag":127,"props":2321,"children":2322},{},[2323,2325],{"type":52,"value":2324},"Token is ",{"type":46,"tag":65,"props":2326,"children":2328},{"className":2327},[],[2329],{"type":52,"value":2330},"null",{"type":46,"tag":127,"props":2332,"children":2333},{},[2334],{"type":52,"value":2335},"User not signed in",{"type":46,"tag":127,"props":2337,"children":2338},{},[2339,2341,2346],{"type":52,"value":2340},"Null-check ",{"type":46,"tag":65,"props":2342,"children":2344},{"className":2343},[],[2345],{"type":52,"value":838},{"type":52,"value":2347}," result",{"type":46,"tag":105,"props":2349,"children":2350},{},[2351,2356,2369],{"type":46,"tag":127,"props":2352,"children":2353},{},[2354],{"type":52,"value":2355},"Sign-in component shows blank",{"type":46,"tag":127,"props":2357,"children":2358},{},[2359,2361,2367],{"type":52,"value":2360},"No ",{"type":46,"tag":65,"props":2362,"children":2364},{"className":2363},[],[2365],{"type":52,"value":2366},"publishableKey",{"type":52,"value":2368}," on provider",{"type":46,"tag":127,"props":2370,"children":2371},{},[2372,2374,2379],{"type":52,"value":2373},"Pass ",{"type":46,"tag":65,"props":2375,"children":2377},{"className":2376},[],[2378],{"type":52,"value":2366},{"type":52,"value":2380}," explicitly",{"type":46,"tag":90,"props":2382,"children":2384},{"id":2383},"see-also",[2385],{"type":52,"value":2386},"See Also",{"type":46,"tag":760,"props":2388,"children":2389},{},[2390,2401,2412],{"type":46,"tag":764,"props":2391,"children":2392},{},[2393,2399],{"type":46,"tag":65,"props":2394,"children":2396},{"className":2395},[],[2397],{"type":52,"value":2398},"clerk-setup",{"type":52,"value":2400}," - Initial Clerk install",{"type":46,"tag":764,"props":2402,"children":2403},{},[2404,2410],{"type":46,"tag":65,"props":2405,"children":2407},{"className":2406},[],[2408],{"type":52,"value":2409},"clerk-custom-ui",{"type":52,"value":2411}," - Custom flows & appearance",{"type":46,"tag":764,"props":2413,"children":2414},{},[2415,2421],{"type":46,"tag":65,"props":2416,"children":2418},{"className":2417},[],[2419],{"type":52,"value":2420},"clerk-orgs",{"type":52,"value":2422}," - B2B organizations",{"type":46,"tag":90,"props":2424,"children":2426},{"id":2425},"docs",[2427],{"type":52,"value":2428},"Docs",{"type":46,"tag":59,"props":2430,"children":2431},{},[2432],{"type":46,"tag":2433,"props":2434,"children":2438},"a",{"href":2435,"rel":2436},"https:\u002F\u002Fclerk.com\u002Fdocs\u002Freact\u002Fgetting-started\u002Fquickstart",[2437],"nofollow",[2439],{"type":52,"value":2440},"React SDK",{"type":46,"tag":2442,"props":2443,"children":2444},"style",{},[2445],{"type":52,"value":2446},"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":2448,"total":2561},[2449,2463,2478,2494,2512,2528,2544],{"slug":8,"name":8,"fn":2450,"description":2451,"org":2452,"tags":2453,"stars":26,"repoUrl":27,"updatedAt":2462},"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},[2454,2455,2456,2459],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2457,"slug":2458,"type":15},"Mobile","mobile",{"name":2460,"slug":2461,"type":15},"Web Development","web-development","2026-07-18T05:12:23.438307",{"slug":2464,"name":2464,"fn":2465,"description":2466,"org":2467,"tags":2468,"stars":26,"repoUrl":27,"updatedAt":2477},"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},[2469,2472,2473,2476],{"name":2470,"slug":2471,"type":15},"Android","android",{"name":9,"slug":8,"type":15},{"name":2474,"slug":2475,"type":15},"Kotlin","kotlin",{"name":2457,"slug":2458,"type":15},"2026-04-10T05:00:18.622871",{"slug":2479,"name":2479,"fn":2480,"description":2481,"org":2482,"tags":2483,"stars":26,"repoUrl":27,"updatedAt":2493},"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},[2484,2487,2488,2489,2490],{"name":2485,"slug":2486,"type":15},"Astro","astro",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2491,"slug":2492,"type":15},"Serverless","serverless","2026-04-07T04:46:14.731808",{"slug":2495,"name":2495,"fn":2496,"description":2497,"org":2498,"tags":2499,"stars":26,"repoUrl":27,"updatedAt":2511},"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},[2500,2503,2504,2507,2508],{"name":2501,"slug":2502,"type":15},"API Development","api-development",{"name":21,"slug":22,"type":15},{"name":2505,"slug":2506,"type":15},"Backend","backend",{"name":9,"slug":8,"type":15},{"name":2509,"slug":2510,"type":15},"REST API","rest-api","2026-04-10T05:00:08.728072",{"slug":2513,"name":2513,"fn":2514,"description":2515,"org":2516,"tags":2517,"stars":26,"repoUrl":27,"updatedAt":2527},"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},[2518,2519,2520,2521,2524],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2522,"slug":2523,"type":15},"Payments","payments",{"name":2525,"slug":2526,"type":15},"SaaS","saas","2026-04-29T05:37:27.130955",{"slug":2529,"name":2529,"fn":2530,"description":2531,"org":2532,"tags":2533,"stars":26,"repoUrl":27,"updatedAt":2543},"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},[2534,2537,2538,2539,2542],{"name":2535,"slug":2536,"type":15},"Auth","auth",{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2540,"slug":2541,"type":15},"OAuth","oauth",{"name":13,"slug":14,"type":15},"2026-04-07T04:46:08.489328",{"slug":2545,"name":2545,"fn":2546,"description":2547,"org":2548,"tags":2549,"stars":26,"repoUrl":27,"updatedAt":2560},"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},[2550,2551,2552,2553,2556,2559],{"name":2501,"slug":2502,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2554,"slug":2555,"type":15},"CLI","cli",{"name":2557,"slug":2558,"type":15},"Deployment","deployment",{"name":13,"slug":14,"type":15},"2026-07-31T05:52:40.580813",20,{"items":2563,"total":2561},[2564,2571,2578,2586,2594,2602,2610,2619,2634,2651,2665,2679],{"slug":8,"name":8,"fn":2450,"description":2451,"org":2565,"tags":2566,"stars":26,"repoUrl":27,"updatedAt":2462},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2567,2568,2569,2570],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2457,"slug":2458,"type":15},{"name":2460,"slug":2461,"type":15},{"slug":2464,"name":2464,"fn":2465,"description":2466,"org":2572,"tags":2573,"stars":26,"repoUrl":27,"updatedAt":2477},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2574,2575,2576,2577],{"name":2470,"slug":2471,"type":15},{"name":9,"slug":8,"type":15},{"name":2474,"slug":2475,"type":15},{"name":2457,"slug":2458,"type":15},{"slug":2479,"name":2479,"fn":2480,"description":2481,"org":2579,"tags":2580,"stars":26,"repoUrl":27,"updatedAt":2493},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2581,2582,2583,2584,2585],{"name":2485,"slug":2486,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2491,"slug":2492,"type":15},{"slug":2495,"name":2495,"fn":2496,"description":2497,"org":2587,"tags":2588,"stars":26,"repoUrl":27,"updatedAt":2511},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2589,2590,2591,2592,2593],{"name":2501,"slug":2502,"type":15},{"name":21,"slug":22,"type":15},{"name":2505,"slug":2506,"type":15},{"name":9,"slug":8,"type":15},{"name":2509,"slug":2510,"type":15},{"slug":2513,"name":2513,"fn":2514,"description":2515,"org":2595,"tags":2596,"stars":26,"repoUrl":27,"updatedAt":2527},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2597,2598,2599,2600,2601],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2522,"slug":2523,"type":15},{"name":2525,"slug":2526,"type":15},{"slug":2529,"name":2529,"fn":2530,"description":2531,"org":2603,"tags":2604,"stars":26,"repoUrl":27,"updatedAt":2543},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2605,2606,2607,2608,2609],{"name":2535,"slug":2536,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2540,"slug":2541,"type":15},{"name":13,"slug":14,"type":15},{"slug":2545,"name":2545,"fn":2546,"description":2547,"org":2611,"tags":2612,"stars":26,"repoUrl":27,"updatedAt":2560},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2613,2614,2615,2616,2617,2618],{"name":2501,"slug":2502,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2554,"slug":2555,"type":15},{"name":2557,"slug":2558,"type":15},{"name":13,"slug":14,"type":15},{"slug":2409,"name":2409,"fn":2620,"description":2621,"org":2622,"tags":2623,"stars":26,"repoUrl":27,"updatedAt":2633},"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},[2624,2625,2628,2629,2632],{"name":21,"slug":22,"type":15},{"name":2626,"slug":2627,"type":15},"Branding","branding",{"name":9,"slug":8,"type":15},{"name":2630,"slug":2631,"type":15},"Design","design",{"name":24,"slug":25,"type":15},"2026-04-10T05:00:10.109158",{"slug":2635,"name":2635,"fn":2636,"description":2637,"org":2638,"tags":2639,"stars":26,"repoUrl":27,"updatedAt":2650},"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},[2640,2641,2642,2645,2646,2647],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2643,"slug":2644,"type":15},"Expo","expo",{"name":24,"slug":25,"type":15},{"name":2457,"slug":2458,"type":15},{"name":2648,"slug":2649,"type":15},"React Native","react-native","2026-05-19T06:48:47.074181",{"slug":78,"name":78,"fn":2652,"description":2653,"org":2654,"tags":2655,"stars":26,"repoUrl":27,"updatedAt":2664},"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},[2656,2657,2658,2661],{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2659,"slug":2660,"type":15},"Next.js","next-js",{"name":2662,"slug":2663,"type":15},"Performance","performance","2026-04-10T05:00:15.80215",{"slug":2666,"name":2666,"fn":2667,"description":2668,"org":2669,"tags":2670,"stars":26,"repoUrl":27,"updatedAt":2678},"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},[2671,2672,2673,2674,2675],{"name":21,"slug":22,"type":15},{"name":2505,"slug":2506,"type":15},{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":2676,"slug":2677,"type":15},"Nuxt","nuxt","2026-04-07T04:46:18.337538",{"slug":2420,"name":2420,"fn":2680,"description":2681,"org":2682,"tags":2683,"stars":26,"repoUrl":27,"updatedAt":2692},"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},[2684,2685,2688,2691],{"name":9,"slug":8,"type":15},{"name":2686,"slug":2687,"type":15},"Multi-Tenant","multi-tenant",{"name":2689,"slug":2690,"type":15},"RBAC","rbac",{"name":2525,"slug":2526,"type":15},"2026-04-10T05:00:14.40165"]