Update WorkOS example to use new AuthKit SDK #5394

nicknisi · 2025-10-07T13:55:37Z

This PR updates the start-workos example to use the new @workos/authkit-tanstack-react-start SDK instead of the custom implementation.

What changed

Replaced custom AuthKit implementation with the official SDK package
Removed all the manual session management, cookie handling, and JWKS verification code
Updated routes to use the SDK's built-in getAuth() and getSignInUrl() server functions
Added AuthKitProvider for client-side auth state management

Why

We built an official SDK that handles all the AuthKit integration details, so this example should demonstrate the recommended approach rather than a custom implementation. Makes the example cleaner and easier to follow.

Summary by CodeRabbit

New Features
- Added a Client demo route showcasing client-side authentication, tokens, and org switching.
- Integrated AuthKit provider and middleware for seamless auth across the app.
Refactor
- Migrated authentication to WorkOS AuthKit for TanStack Start; routes now load user data via library helpers.
Style
- Applied Radix UI theme styles across the application.
Chores
- Enabled .env support via dotenv in Vite config.
- Updated SSR bundling to include Radix UI themes as noExternal.
- Added typings for CSS URL imports.
- Updated dependencies.

coderabbitai · 2025-10-07T13:56:08Z

Walkthrough

Replaces custom SSR AuthKit implementation with @workos/authkit-tanstack-react-start. Adds AuthKit middleware and provider, delegates callback handling to library, updates loaders to use getAuth/getSignInUrl, introduces a new “/client” demo route, adds Radix UI theme CSS, adjusts Vite SSR settings, and updates package dependencies and generated route types.

Changes

Cohort / File(s)	Summary
AuthKit SSR removal `examples/react/start-workos/src/authkit/serverFunctions.ts`, `examples/react/start-workos/src/authkit/ssr/config.ts`, `examples/react/start-workos/src/authkit/ssr/interfaces.ts`, `examples/react/start-workos/src/authkit/ssr/session.ts`, `examples/react/start-workos/src/authkit/ssr/utils.ts`, `examples/react/start-workos/src/authkit/ssr/workos.ts`	Removes custom SSR auth config, session management, cookie/JWT utilities, WorkOS client init, and server functions in favor of external library.
Routing/types generation `examples/react/start-workos/src/routeTree.gen.ts`	Adds ClientRoute (/client) and wires it into all route maps/types; updates root children; references named startInstance options in typing.
Root layout and provider `examples/react/start-workos/src/routes/__root.tsx`, `examples/react/start-workos/src/app.css`	Wraps app with AuthKitProvider; replaces beforeLoad with loader using getAuth/getSignInUrl; links Radix UI stylesheet via CSS URL import.
Authenticated routing logic `examples/react/start-workos/src/routes/_authenticated.tsx`, `examples/react/start-workos/src/routes/_authenticated/account.tsx`	Switches from beforeLoad/context to loaders using getAuth; updates sign-in URL data shape to include { returnPathname }.
Auth callback and sign-out `examples/react/start-workos/src/routes/api/auth/callback.tsx`, `examples/react/start-workos/src/routes/logout.tsx`	Delegates GET to handleCallbackRoute; switches signOut import to external library.
New client demo route `examples/react/start-workos/src/routes/client.tsx`	Adds /client route demonstrating useAuth/useAccessToken, token refresh, org switching, and sign-out flows.
Index route `examples/react/start-workos/src/routes/index.tsx`	Loader now calls getAuth and getSignInUrl; removes context dependency; minor copy tweak.
Start/Vite config and typings `examples/react/start-workos/src/start.ts`, `examples/react/start-workos/vite.config.ts`, `examples/react/start-workos/src/vite-env.d.ts`	Adds startInstance with authkitMiddleware; loads .env and sets ssr.noExternal for @radix-ui/themes; declares *.css?url module and Vite types.
Package updates `examples/react/start-workos/package.json`, `packages/start-server-core/package.json`	Adds @workos/authkit-tanstack-react-start to example deps; adds vite devDependency to start-server-core; minor reordering.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant R as Router (TanStack Start)
  participant MW as AuthKit Middleware
  participant L as Route Loader
  participant AK as AuthKit (@workos/...-start)
  participant IdP as WorkOS/Auth

  U->>R: Navigate to protected route
  activate R
  R->>MW: Request middleware
  MW->>AK: Parse session from cookies
  AK-->>MW: Auth context (user/none)
  MW-->>R: Continue request
  R->>L: Run loader()
  alt No user
    L->>AK: getSignInUrl({ data: { returnPathname } })
    AK-->>L: Authorization URL
    L-->>U: Redirect to sign-in
    U->>IdP: Authenticate
    IdP-->>R: Redirect to /api/auth/callback?code&state
    R->>AK: handleCallbackRoute (GET)
    AK->>IdP: Exchange code for tokens
    IdP-->>AK: Tokens
    AK->>MW: Save session cookie
    AK-->>U: Redirect to returnPathname
  else User present
    L-->>U: Return data (user)
  end
  deactivate R

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

fix: various fixes #5215 — Introduces/aligns named startInstance export used by routeTree.gen.ts to read Start options.

Suggested labels

package: react-router, package: react-start

Suggested reviewers

schiller-manuel
SeanCassiere

Poem

I nibbled old cookies, then bounced them away,
New trails through Start guide my hop-happy day.
A callback burrow, a client-side view—
I twitch for tokens fresh as morning dew.
With Radix leaves and routes aligned,
I thump: “All signed!” and peace of mind. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly summarizes the primary change by stating that the WorkOS example is being updated to use the new AuthKit SDK, matches the PR objectives of replacing custom auth code with the official SDK, and is concise and specific without unnecessary detail.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2025-10-07T13:56:11Z

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

View your CI Pipeline Execution ↗ for commit 4a09897

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	❌ Failed	6m 47s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1m 37s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-07 14:03:24 UTC

pkg-pr-new · 2025-10-07T13:58:53Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5394

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5394

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5394

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5394

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5394

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5394

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5394

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5394

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5394

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5394

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5394

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5394

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5394

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5394

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5394

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5394

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5394

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5394

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5394

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5394

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5394

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5394

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5394

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5394

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5394

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5394

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5394

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5394

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5394

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5394

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5394

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5394

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5394

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5394

commit: 4a09897

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a5fdf29 and 4a09897.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (20)

examples/react/start-workos/package.json (2 hunks)
examples/react/start-workos/src/app.css (1 hunks)
examples/react/start-workos/src/authkit/serverFunctions.ts (0 hunks)
examples/react/start-workos/src/authkit/ssr/config.ts (0 hunks)
examples/react/start-workos/src/authkit/ssr/interfaces.ts (0 hunks)
examples/react/start-workos/src/authkit/ssr/session.ts (0 hunks)
examples/react/start-workos/src/authkit/ssr/utils.ts (0 hunks)
examples/react/start-workos/src/authkit/ssr/workos.ts (0 hunks)
examples/react/start-workos/src/routeTree.gen.ts (8 hunks)
examples/react/start-workos/src/routes/__root.tsx (3 hunks)
examples/react/start-workos/src/routes/_authenticated.tsx (1 hunks)
examples/react/start-workos/src/routes/_authenticated/account.tsx (1 hunks)
examples/react/start-workos/src/routes/api/auth/callback.tsx (1 hunks)
examples/react/start-workos/src/routes/client.tsx (1 hunks)
examples/react/start-workos/src/routes/index.tsx (2 hunks)
examples/react/start-workos/src/routes/logout.tsx (1 hunks)
examples/react/start-workos/src/start.ts (1 hunks)
examples/react/start-workos/src/vite-env.d.ts (1 hunks)
examples/react/start-workos/vite.config.ts (2 hunks)
packages/start-server-core/package.json (1 hunks)

💤 Files with no reviewable changes (6)

examples/react/start-workos/src/authkit/ssr/utils.ts
examples/react/start-workos/src/authkit/ssr/session.ts
examples/react/start-workos/src/authkit/ssr/interfaces.ts
examples/react/start-workos/src/authkit/serverFunctions.ts
examples/react/start-workos/src/authkit/ssr/workos.ts
examples/react/start-workos/src/authkit/ssr/config.ts

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}