{"id":31673161,"url":"https://github.com/workos/authkit-tanstack-start","last_synced_at":"2026-01-20T16:55:40.648Z","repository":{"id":318339669,"uuid":"1069185214","full_name":"workos/authkit-tanstack-start","owner":"workos","description":"The WorkOS library for TanStack Start provides convenient helpers for authentication and session management using WorkOS \u0026 AuthKit with TanStack Start.","archived":false,"fork":false,"pushed_at":"2025-10-06T15:53:27.000Z","size":315,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T16:46:32.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/workos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-03T14:31:34.000Z","updated_at":"2025-10-06T15:44:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"21bfb667-8db4-4a12-acd4-55fc637021f9","html_url":"https://github.com/workos/authkit-tanstack-start","commit_stats":null,"previous_names":["workos/authkit-tanstack-start"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/workos/authkit-tanstack-start","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-tanstack-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-tanstack-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-tanstack-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-tanstack-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/workos","download_url":"https://codeload.github.com/workos/authkit-tanstack-start/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-tanstack-start/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278886173,"owners_count":26062972,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-08T03:36:00.069Z","updated_at":"2026-01-20T16:55:40.642Z","avatar_url":"https://github.com/workos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AuthKit TanStack Start\n\nAuthentication and session management for TanStack Start applications using WorkOS AuthKit.\n\n\u003e [!NOTE]\n\u003e This library is designed for TanStack Start v1.0+. TanStack Start is currently in beta - expect some API changes as the framework evolves.\n\n## Installation\n\n```bash\nnpm install @workos/authkit-tanstack-react-start\n```\n\n```bash\npnpm add @workos/authkit-tanstack-react-start\n```\n\n## Quickstart\n\n### Environment Variables\n\nCreate a `.env` file in your project root with the following required variables:\n\n```bash\nWORKOS_CLIENT_ID=\"client_...\"      # Get from WorkOS dashboard\nWORKOS_API_KEY=\"sk_test_...\"       # Get from WorkOS dashboard\nWORKOS_REDIRECT_URI=\"http://localhost:3000/api/auth/callback\"\nWORKOS_COOKIE_PASSWORD=\"...\"       # Min 32 characters\n```\n\nGenerate a secure cookie password (32+ characters):\n\n```bash\nopenssl rand -base64 24\n```\n\n#### Optional Configuration\n\n| Variable                 | Default               | Description                                  |\n| ------------------------ | --------------------- | -------------------------------------------- |\n| `WORKOS_COOKIE_MAX_AGE`  | `34560000` (400 days) | Cookie lifetime in seconds                   |\n| `WORKOS_COOKIE_NAME`     | `wos-session`         | Session cookie name                          |\n| `WORKOS_COOKIE_DOMAIN`   | None                  | Cookie domain (for multi-domain sessions)    |\n| `WORKOS_COOKIE_SAMESITE` | `lax`                 | SameSite attribute (`lax`, `strict`, `none`) |\n| `WORKOS_API_HOSTNAME`    | `api.workos.com`      | WorkOS API hostname                          |\n\n### Setup (3 Steps)\n\n#### 1. Configure Middleware\n\nCreate or update `src/start.ts`:\n\n```typescript\nimport { createStart } from '@tanstack/react-start';\nimport { authkitMiddleware } from '@workos/authkit-tanstack-react-start';\n\nexport const startInstance = createStart(() =\u003e ({\n  requestMiddleware: [authkitMiddleware()],\n}));\n```\n\n#### 2. Create Callback Route\n\nCreate `src/routes/api/auth/callback.tsx`:\n\n```typescript\nimport { createFileRoute } from '@tanstack/react-router';\nimport { handleCallbackRoute } from '@workos/authkit-tanstack-react-start';\n\nexport const Route = createFileRoute('/api/auth/callback')({\n  server: {\n    handlers: {\n      GET: handleCallbackRoute(),\n    },\n  },\n});\n```\n\nMake sure this matches your `WORKOS_REDIRECT_URI` environment variable.\n\n#### 3. Add Provider (Optional - only needed for client hooks)\n\nIf you want to use `useAuth()` or other client hooks, wrap your app with `AuthKitProvider` in `src/routes/__root.tsx`:\n\n```typescript\nimport { AuthKitProvider } from '@workos/authkit-tanstack-react-start/client';\nimport { Outlet, createRootRoute } from '@tanstack/react-router';\n\nexport const Route = createRootRoute({\n  component: RootComponent,\n});\n\nfunction RootComponent() {\n  return (\n    \u003cAuthKitProvider\u003e\n      \u003cOutlet /\u003e\n    \u003c/AuthKitProvider\u003e\n  );\n}\n```\n\nIf you're only using server-side authentication (`getAuth()` in loaders), you can skip this step.\n\n### WorkOS Dashboard Configuration\n\n1. Go to [WorkOS Dashboard](https://dashboard.workos.com) and navigate to the **Redirects** page.\n2. Under **Redirect URIs**, add your callback URL: `http://localhost:3000/api/auth/callback`\n3. Under **Sign-out redirect**, set the URL where you want users to be redirected after signing out. If you don't set a sign-out redirect URL, you must set the **App homepage URL** instead — WorkOS will redirect users there when no sign-out redirect is specified.\n\n   Note: If you don't set either the **Sign-out redirect** or the **App homepage URL**, WorkOS will redirect users to an error page.\n\n## Usage\n\n### Server-Side Authentication\n\nUse `getAuth()` in route loaders or server functions to access the current session:\n\n```typescript\nimport { createFileRoute, redirect } from '@tanstack/react-router';\nimport { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';\n\nexport const Route = createFileRoute('/dashboard')({\n  loader: async () =\u003e {\n    const { user } = await getAuth();\n\n    if (!user) {\n      const signInUrl = await getSignInUrl();\n      throw redirect({ href: signInUrl });\n    }\n\n    return { user };\n  },\n  component: DashboardPage,\n});\n\nfunction DashboardPage() {\n  const { user } = Route.useLoaderData();\n  return \u003cdiv\u003eWelcome, {user.firstName}!\u003c/div\u003e;\n}\n```\n\n### Client-Side Hooks\n\nFor client components that need reactive auth state, use the `useAuth()` hook:\n\n```typescript\n'use client'; // Not actually needed in TanStack Start, but shows intent\n\nimport { useAuth } from '@workos/authkit-tanstack-react-start/client';\n\nfunction ProfileButton() {\n  const { user, loading, signOut } = useAuth();\n\n  if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n  if (!user) return \u003ca href=\"/signin\"\u003eSign In\u003c/a\u003e;\n\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{user.email}\u003c/span\u003e\n      \u003cbutton onClick={() =\u003e signOut()}\u003eSign Out\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Signing Out\n\n**Server-side (in route loader):**\n\n```typescript\nimport { signOut } from '@workos/authkit-tanstack-react-start';\n\nexport const Route = createFileRoute('/logout')({\n  loader: async () =\u003e {\n    await signOut(); // Redirects to WorkOS logout, then back to '/'\n  },\n});\n```\n\n**Client-side (from useAuth hook):**\n\n```typescript\nconst { signOut } = useAuth();\n\nawait signOut({ returnTo: '/goodbye' });\n```\n\n### Organization Switching\n\nSwitch the active organization for multi-org users:\n\n**Server-side:**\n\n```typescript\nimport { switchToOrganization } from '@workos/authkit-tanstack-react-start';\n\n// In a server function or loader\nconst auth = await switchToOrganization({\n  data: { organizationId: 'org_456' },\n});\n\n// Session now has org_456's role, permissions, etc.\n```\n\n**Client-side:**\n\n```typescript\nconst { switchToOrganization, organizationId } = useAuth();\n\nawait switchToOrganization('org_456');\n// Auth state updates automatically\n```\n\n### Protected Routes\n\nUse layout routes to protect multiple pages:\n\n```typescript\n// src/routes/_authenticated.tsx\nimport { createFileRoute, redirect } from '@tanstack/react-router';\nimport { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';\n\nexport const Route = createFileRoute('/_authenticated')({\n  loader: async ({ location }) =\u003e {\n    const { user } = await getAuth();\n\n    if (!user) {\n      const signInUrl = await getSignInUrl({\n        data: { returnPathname: location.pathname },\n      });\n      throw redirect({ href: signInUrl });\n    }\n\n    return { user };\n  },\n});\n\n// Now all routes under _authenticated require auth:\n// - _authenticated/dashboard.tsx\n// - _authenticated/profile.tsx\n// etc.\n```\n\n## API Reference\n\n### Server Functions\n\nThese functions can be called from route loaders, server functions, or server route handlers.\n\n#### `getAuth()`\n\nRetrieves the current user session.\n\n```typescript\nconst { user } = await getAuth();\n\nif (user) {\n  console.log(user.email);\n  console.log(user.firstName);\n}\n```\n\n**Returns:** `UserInfo | NoUserInfo`\n\n**UserInfo fields:**\n\n- `user` - The authenticated user object\n- `sessionId` - WorkOS session ID\n- `organizationId` - Active organization (if in org context)\n- `role` - User's role in the organization\n- `roles` - Array of role strings\n- `permissions` - Array of permission strings\n- `entitlements` - Array of entitlement strings\n- `featureFlags` - Array of feature flag strings\n- `impersonator` - Impersonator details (if being impersonated)\n- `accessToken` - JWT access token\n\n#### `signOut(options?)`\n\nSigns out the current user and redirects to WorkOS logout.\n\n```typescript\nawait signOut();\nawait signOut({ data: { returnTo: '/goodbye' } });\n```\n\n**Options:**\n\n- `returnTo` - Path to redirect to after logout (default: `/`)\n\n#### `switchToOrganization(options)`\n\nSwitches to a different organization and refreshes the session with new claims.\n\n```typescript\nconst auth = await switchToOrganization({\n  data: {\n    organizationId: 'org_123',\n    returnTo: '/dashboard', // optional\n  },\n});\n```\n\n**Options:**\n\n- `organizationId` - The organization ID to switch to (required)\n- `returnTo` - Path to redirect to if auth fails\n\n**Returns:** `UserInfo` with updated organization claims\n\n#### `getSignInUrl(options?)`\n\nGenerates a sign-in URL for redirecting to AuthKit.\n\n```typescript\n// Basic usage\nconst url = await getSignInUrl();\n\n// With return path\nconst url = await getSignInUrl({\n  data: { returnPathname: '/dashboard' },\n});\n```\n\n**Options:**\n\n- `returnPathname` - Path to return to after sign-in\n\n#### `getSignUpUrl(options?)`\n\nGenerates a sign-up URL for redirecting to AuthKit.\n\n```typescript\nconst url = await getSignUpUrl();\nconst url = await getSignUpUrl({\n  data: { returnPathname: '/onboarding' },\n});\n```\n\n**Options:**\n\n- `returnPathname` - Path to return to after sign-up\n\n#### `getAuthorizationUrl(options)`\n\nAdvanced: Generate a custom authorization URL with full control.\n\n```typescript\nconst url = await getAuthorizationUrl({\n  data: {\n    screenHint: 'sign-in',\n    returnPathname: '/dashboard',\n    redirectUri: 'https://example.com/callback', // override default\n  },\n});\n```\n\n**Options:**\n\n- `screenHint` - `'sign-in'` or `'sign-up'`\n- `returnPathname` - Return path after authentication\n- `redirectUri` - Override the default redirect URI\n\n### Route Handlers\n\n#### `handleCallbackRoute`\n\nHandles the OAuth callback from WorkOS. Use this in your callback route.\n\n**Basic usage:**\n\n```typescript\nimport { createFileRoute } from '@tanstack/react-router';\nimport { handleCallbackRoute } from '@workos/authkit-tanstack-react-start';\n\nexport const Route = createFileRoute('/api/auth/callback')({\n  server: {\n    handlers: {\n      GET: handleCallbackRoute(),\n    },\n  },\n});\n```\n\n**With hooks for custom logic:**\n\n```typescript\nexport const Route = createFileRoute('/api/auth/callback')({\n  server: {\n    handlers: {\n      GET: handleCallbackRoute({\n        onSuccess: async ({ user, authenticationMethod }) =\u003e {\n          // Create user record in your database\n          await db.users.upsert({ id: user.id, email: user.email });\n          // Track analytics\n          analytics.track('User Signed In', { method: authenticationMethod });\n        },\n        onError: ({ error, request }) =\u003e {\n          // Custom error handling\n          console.error('Auth failed:', error);\n          return new Response(JSON.stringify({ error: 'Authentication failed' }), {\n            status: 500,\n            headers: { 'Content-Type': 'application/json' },\n          });\n        },\n      }),\n    },\n  },\n});\n```\n\n**Options:**\n\n- `onSuccess?: (data) =\u003e Promise\u003cvoid\u003e` - Called after successful authentication with user data, tokens, and authentication method\n- `onError?: ({ error, request }) =\u003e Response` - Custom error handler that returns a Response\n- `returnPathname?: string` - Override the redirect path after authentication (defaults to state or `/`)\n\n### Client Hooks\n\nAvailable from `@workos/authkit-tanstack-react-start/client`. Requires `\u003cAuthKitProvider\u003e` wrapper.\n\n#### `useAuth(options?)`\n\nAccess authentication state and methods in client components.\n\n```typescript\nimport { useAuth } from '@workos/authkit-tanstack-react-start/client';\n\nfunction MyComponent() {\n  const { user, loading, signOut } = useAuth();\n\n  if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  if (!user) return \u003cdiv\u003eNot signed in\u003c/div\u003e;\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e{user.email}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e signOut()}\u003eSign Out\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**Options:**\n\n- `ensureSignedIn?: boolean` - If true, automatically triggers sign-in flow for unauthenticated users\n\n**Returns:** `AuthContextType` with:\n\n- `user` - Current user or null\n- `loading` - Loading state\n- `sessionId`, `organizationId`, `role`, `roles`, `permissions`, `entitlements`, `featureFlags`, `impersonator`\n- `getAuth()` - Refresh auth state\n- `refreshAuth(options)` - Refresh session with optional org switch\n- `signOut(options)` - Sign out\n- `switchToOrganization(orgId)` - Switch organizations\n\n#### `useAccessToken()`\n\nManage access tokens with automatic refresh.\n\n```typescript\nimport { useAccessToken } from '@workos/authkit-tanstack-react-start/client';\n\nfunction ApiCaller() {\n  const { accessToken, loading, getAccessToken } = useAccessToken();\n\n  const callApi = async () =\u003e {\n    const token = await getAccessToken(); // Always fresh\n\n    const response = await fetch('/api/data', {\n      headers: { Authorization: `Bearer ${token}` },\n    });\n  };\n\n  return \u003cbutton onClick={callApi}\u003eFetch Data\u003c/button\u003e;\n}\n```\n\n**Returns:**\n\n- `accessToken` - Current token (may be stale)\n- `loading` - Loading state\n- `error` - Last error or null\n- `refresh()` - Manually refresh token\n- `getAccessToken()` - Get guaranteed fresh token\n\n#### `useTokenClaims()`\n\nParse and decode JWT claims from the access token.\n\n```typescript\nimport { useTokenClaims } from '@workos/authkit-tanstack-react-start/client';\n\nfunction ClaimsDisplay() {\n  const claims = useTokenClaims();\n\n  if (!claims) return null;\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eSession ID: {claims.sid}\u003c/p\u003e\n      \u003cp\u003eOrganization: {claims.org_id}\u003c/p\u003e\n      \u003cp\u003eRole: {claims.role}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Middleware\n\n#### `authkitMiddleware(options?)`\n\nProcesses authentication on every request. Validates tokens, refreshes sessions, and provides auth context to server functions.\n\n```typescript\nimport { authkitMiddleware } from '@workos/authkit-tanstack-react-start';\n\n// Basic usage\nauthkitMiddleware();\n\n// With custom redirect URI (e.g., for Vercel preview deployments)\nauthkitMiddleware({\n  redirectUri: 'https://preview-123.example.com/api/auth/callback',\n});\n```\n\n**Options:**\n\n- `redirectUri` - Override the default redirect URI from `WORKOS_REDIRECT_URI`. Useful for dynamic environments like preview deployments.\n\n## TypeScript\n\nThis library is fully typed. Common types:\n\n```typescript\nimport type {\n  User,\n  Session,\n  UserInfo,\n  NoUserInfo,\n  Impersonator\n} from '@workos/authkit-tanstack-react-start';\n\n// User object from WorkOS\nconst user: User = {\n  id: string;\n  email: string;\n  firstName: string | null;\n  lastName: string | null;\n  emailVerified: boolean;\n  profilePictureUrl: string | null;\n  // ... more fields\n};\n\n// Auth result from getAuth()\nconst auth: UserInfo | NoUserInfo = await getAuth();\n```\n\nRoute loaders get full type inference:\n\n```typescript\nexport const Route = createFileRoute('/profile')({\n  loader: async () =\u003e {\n    const { user } = await getAuth();\n    return { user }; // Fully typed\n  },\n  component: ProfilePage,\n});\n\nfunction ProfilePage() {\n  const { user } = Route.useLoaderData(); // user is typed!\n}\n```\n\n## How It Works\n\n### Server-Side Flow\n\n1. **Middleware runs on every request** - validates/refreshes session, stores auth in context\n2. **Route loaders call `getAuth()`** - retrieves auth from middleware context\n3. **No client bundle bloat** - server functions create RPC boundaries automatically\n\n### Client-Side Flow (with Provider)\n\n1. **Provider wraps app** - provides auth context to hooks\n2. **Hooks call server actions** - fetch auth state via RPC\n3. **State updates automatically** - on tab focus, refresh, org switch\n\n### Why the Provider is Optional\n\n- **Server-only apps**: Just use `getAuth()` in loaders - no provider needed\n- **Client hooks needed**: Add provider to use `useAuth()`, `useAccessToken()`, etc.\n- **Flexibility**: Start server-only, add client hooks later\n\n## Common Patterns\n\n### Sign In Flow\n\n```typescript\n// Get sign-in URL in loader\nexport const Route = createFileRoute('/')({\n  loader: async () =\u003e {\n    const { user } = await getAuth();\n    const signInUrl = await getSignInUrl();\n    return { user, signInUrl };\n  },\n  component: HomePage,\n});\n\nfunction HomePage() {\n  const { user, signInUrl } = Route.useLoaderData();\n\n  if (!user) {\n    return \u003ca href={signInUrl}\u003eSign In with AuthKit\u003c/a\u003e;\n  }\n\n  return \u003cdiv\u003eWelcome, {user.firstName}!\u003c/div\u003e;\n}\n```\n\n### Protected Route Layout\n\n```typescript\n// src/routes/_authenticated.tsx\nimport { createFileRoute, redirect } from '@tanstack/react-router';\nimport { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';\n\nexport const Route = createFileRoute('/_authenticated')({\n  loader: async ({ location }) =\u003e {\n    const { user } = await getAuth();\n\n    if (!user) {\n      const signInUrl = await getSignInUrl({\n        data: { returnPathname: location.pathname },\n      });\n      throw redirect({ href: signInUrl });\n    }\n\n    return { user };\n  },\n});\n\n// All child routes require authentication:\n// - _authenticated/dashboard.tsx\n// - _authenticated/settings.tsx\n```\n\n### Organization Switcher\n\n```typescript\nimport { useAuth } from '@workos/authkit-tanstack-react-start/client';\n\nfunction OrgSwitcher() {\n  const { organizationId, switchToOrganization } = useAuth();\n\n  return (\n    \u003cselect\n      value={organizationId || ''}\n      onChange={(e) =\u003e switchToOrganization(e.target.value)}\n    \u003e\n      \u003coption value=\"org_123\"\u003eAcme Corp\u003c/option\u003e\n      \u003coption value=\"org_456\"\u003eOther Company\u003c/option\u003e\n    \u003c/select\u003e\n  );\n}\n```\n\n### Accessing User in Multiple Places\n\n**Loader (server-side):**\n\n```typescript\nloader: async () =\u003e {\n  const { user, organizationId, role } = await getAuth();\n  return { user, organizationId, role };\n};\n```\n\n**Component (from loader data):**\n\n```typescript\nfunction MyPage() {\n  const { user } = Route.useLoaderData();\n  // ...\n}\n```\n\n**Client hook (reactive):**\n\n```typescript\nfunction MyClientComponent() {\n  const { user, loading } = useAuth();\n  // Updates on session changes\n}\n```\n\n## Troubleshooting\n\n### \"AuthKit middleware is not configured\"\n\nYou forgot to add `authkitMiddleware()` to `src/start.ts`. See step 1 in setup.\n\n### \"useAuth must be used within an AuthKitProvider\"\n\nYou're calling `useAuth()` but haven't wrapped your app with `\u003cAuthKitProvider\u003e`. See step 3 in setup.\n\nIf you don't need client hooks, use `getAuth()` in loaders instead.\n\n### Environment variable errors on startup\n\nThe middleware validates configuration on first request. If you see errors about missing variables:\n\n1. Check your `.env` file exists\n2. Verify all required variables are set\n3. Ensure `WORKOS_COOKIE_PASSWORD` is 32+ characters\n4. Restart your dev server after changing env vars\n\n### Types not working / Import errors\n\nMake sure you're importing from the right path:\n\n```typescript\n// Server functions\nimport { getAuth, signOut } from '@workos/authkit-tanstack-react-start';\n\n// Client hooks\nimport { useAuth } from '@workos/authkit-tanstack-react-start/client';\n```\n\nDon't import client hooks in server code or vice versa.\n\n### \"can only be called on the server\"\n\nYou're trying to call a server function from a `beforeLoad` hook or client component.\n\n**Wrong:**\n\n```typescript\nbeforeLoad: async () =\u003e {\n  const { user } = await getAuth(); // ❌ Runs on client during hydration\n};\n```\n\n**Right:**\n\n```typescript\nloader: async () =\u003e {\n  const { user } = await getAuth(); // ✅ Server-only during SSR\n};\n```\n\nUse `useAuth()` client hook for client components, or move logic to a loader.\n\n## Example Application\n\nCheck the `/example` directory for a complete working application demonstrating:\n\n- Server-side authentication in loaders\n- Client-side hooks with provider\n- Protected routes\n- Organization switching\n- Sign in/out flows\n- Access token management\n\nRun it locally:\n\n```bash\ncd example\npnpm install\npnpm dev\n```\n\n## Framework Compatibility\n\n- **TanStack Start:** v1.132.0+\n- **TanStack Router:** v1.132.0+\n- **React:** 18.0+\n- **Node.js:** 18+\n\n## Related\n\n- [WorkOS AuthKit Documentation](https://workos.com/docs/user-management/authkit)\n- [TanStack Start Documentation](https://tanstack.com/start/latest)\n- [WorkOS Node SDK](https://github.com/workos/workos-node)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkos%2Fauthkit-tanstack-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkos%2Fauthkit-tanstack-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkos%2Fauthkit-tanstack-start/lists"}