Loading...
Loading...
Integrate WorkOS AuthKit with TanStack Start applications. Full-stack TypeScript with server functions. Use when project uses TanStack Start, @tanstack/start, or vinxi.
npx skill4agent add workos/skills workos-authkit-tanstack-start1. Fetch README (BLOCKING)
├── Extract package name from install command
└── README is source of truth for ALL code patterns
2. Detect directory structure
├── src/ (TanStack Start v1.132+, default)
└── app/ (legacy vinxi-based projects)
3. Follow README install/setup exactly
└── Do not invent commands or patternshttps://github.com/workos/authkit-tanstack-start/blob/main/README.md@workos/authkit-tanstack-react-start@tanstack/start@tanstack/react-startsrc/app/src/src/
├── start.ts # Middleware config (CRITICAL)
├── router.tsx # Router setup
├── routes/
│ ├── __root.tsx # Root layout
│ ├── api.auth.callback.tsx # OAuth callback (flat route)
│ └── ...app/app/
├── start.ts or router.tsx
├── routes/
│ └── api/auth/callback.tsx # OAuth callback (nested route)ls src/routes 2>/dev/null && echo "Modern (src/)" || echo "Legacy (app/)"| Variable | Format | Required |
|---|---|---|
| | Yes |
| | Yes |
| Full URL | Yes |
| 32+ chars | Yes |
openssl rand -base64 32http://localhost:3000/api/auth/callbacksrc/start.tsapp/start.tsimport { authkitMiddleware } from '@workos/authkit-tanstack-react-start';
export default {
requestMiddleware: [authkitMiddleware()],
};import { createStart } from '@tanstack/react-start';
import { authkitMiddleware } from '@workos/authkit-tanstack-react-start';
export default createStart({
requestMiddleware: [authkitMiddleware()],
});authkitMiddleware@workos/authkit-tanstack-react-startrequestMiddlewarestartInstancegrep -r "authkitMiddleware" src/ app/ 2>/dev/nullWORKOS_REDIRECT_URI/api/auth/callbacksrc/routes/api.auth.callback.tsxapp/routes/api/auth/callback.tsximport { createFileRoute } from '@tanstack/react-router';
import { handleCallbackRoute } from '@workos/authkit-tanstack-react-start';
export const Route = createFileRoute('/api/auth/callback')({
server: {
handlers: {
GET: handleCallbackRoute(),
},
},
});handleCallbackRoute()getAuth()import { createFileRoute, redirect } from '@tanstack/react-router';
import { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';
export const Route = createFileRoute('/dashboard')({
loader: async () => {
const { user } = await getAuth();
if (!user) {
const signInUrl = await getSignInUrl();
throw redirect({ href: signInUrl });
}
return { user };
},
component: Dashboard,
});import { createFileRoute, redirect } from '@tanstack/react-router';
import { signOut } from '@workos/authkit-tanstack-react-start';
export const Route = createFileRoute('/signout')({
loader: async () => {
await signOut();
throw redirect({ href: '/' });
},
});// src/routes/__root.tsx
import { AuthKitProvider } from '@workos/authkit-tanstack-react-start/client';
function RootComponent() {
return (
<AuthKitProvider>
<Outlet />
</AuthKitProvider>
);
}import { useAuth } from '@workos/authkit-tanstack-react-start/client';
function Profile() {
const { user, isLoading } = useAuth();
// ...
}getAuth()authkitMiddleware()src/start.tsgrep -r "authkitMiddleware" src/pnpm add @workos/authkit-tanstack-react-startls node_modules/@workos/authkit-tanstack-react-start/api/auth/callbacksrc/routes/api.auth.callback.tsxapp/routes/api/auth/callback.tsxcreateFileRoute()authkitMiddleware()openssl rand -base64 32pnpm devrouteTree.gen.tsauthkitMiddleware()handleCallbackRoute()getAuth()signOut()getSignInUrl()getSignUpUrl()switchToOrganization()/clientAuthKitProvideruseAuth()useAccessToken()