feat: add Cloudflare Workers deployment for example app

.gitignore

@@ -16,5 +16,8 @@ yarn.lock
 .vinxi/
 dist/
 coverage/
+.wrangler/
+.dev.vars*
+!.dev.vars.example
 
 test-results/

example/.dev.vars.example

@@ -0,0 +1,5 @@
+# Used by Cloudflare local preview. Do not commit real secrets.
+WORKOS_REDIRECT_URI="http://localhost:3000/api/auth/callback"
+WORKOS_API_KEY="<YOUR_API_KEY>"
+WORKOS_CLIENT_ID="<YOUR_CLIENT_ID>"
+WORKOS_COOKIE_PASSWORD="<YOUR_COOKIE_PASSWORD>"

example/README.md

@@ -1,6 +1,6 @@
 # TanStack Start + WorkOS
 
-This site is built with TanStack Router! An example application demonstrating how to authenticate users with AuthKit and the WorkOS Node SDK.
+This site is built with TanStack Router. It demonstrates authenticating users with AuthKit and the npm-published `@workos/authkit-tanstack-react-start` SDK.
 
 - [TanStack Router Docs](https://tanstack.com/router)
 
@@ -21,13 +21,13 @@ You will need a [WorkOS account](https://dashboard.workos.com/signup).
 
    It has to be at least 32 characters long. You can use https://1password.com/password-generator/ to generate strong passwords.
 
-4. Verify your `.env.local` file has the following variables filled.
+4. Verify your `.env` file has the following variables filled.
 
    ```bash
    WORKOS_CLIENT_ID=<YOUR_CLIENT_ID>
    WORKOS_API_KEY=<YOUR_API_SECRET_KEY>
    WORKOS_COOKIE_PASSWORD=<YOUR_COOKIE_PASSWORD>
-   WORKOS_REDIRECT_URI=http://localhost:3000/callback
+   WORKOS_REDIRECT_URI=http://localhost:3000/api/auth/callback
    ```
 
    `WORKOS_COOKIE_PASSWORD` is the private key used to encrypt the session cookie. It has to be at least 32 characters long. You can use the [1Password generator](https://1password.com/password-generator/) or the `openssl` library to generate a strong password via the command line:
@@ -43,3 +43,28 @@ You will need a [WorkOS account](https://dashboard.workos.com/signup).
    ```bash
    pnpm dev
    ```
+
+## Deploying to Cloudflare Workers
+
+This example is configured for Cloudflare Workers using the Cloudflare Vite plugin. Local development keeps the workspace dependency, while `pnpm run deploy` stages a temporary copy that rewrites `@workos/authkit-tanstack-react-start` to the published npm version matching this repo's package version. Override it with `WORKOS_AUTHKIT_TANSTACK_START_VERSION` when you need a different published version.
+
+1. Create a Worker from this `example/` directory, or deploy locally:
+
+   ```bash
+   pnpm run deploy
+   ```
+
+2. Add these Worker variables/secrets in Cloudflare:
+
+   ```bash
+   WORKOS_CLIENT_ID=<YOUR_CLIENT_ID>
+   WORKOS_API_KEY=<YOUR_API_SECRET_KEY>
+   WORKOS_COOKIE_PASSWORD=<YOUR_COOKIE_PASSWORD>
+   WORKOS_REDIRECT_URI=https://<YOUR_WORKER_HOST>/api/auth/callback
+   ```
+
+3. In the WorkOS dashboard Redirects settings, add the deployed callback URI and set the sign-in endpoint to:
+
+   ```text
+   https://<YOUR_WORKER_HOST>/api/auth/sign-in
+   ```

example/package.json

@@ -8,6 +8,9 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && tsc --noEmit",
+    "preview": "vite preview",
+    "deploy": "node --experimental-strip-types ../scripts/deploy-example-cloudflare.ts",
+    "cf-typegen": "wrangler types",
     "start": "vite start",
     "typecheck": "tsc --noEmit"
   },
@@ -26,6 +29,7 @@
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.37.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.1.0",
@@ -34,6 +38,7 @@
     "tailwindcss": "^4.1.16",
     "typescript": "^5.9.3",
     "vite": "^7.2.6",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "wrangler": "^4.92.0"
   }
 }

example/src/start.ts

@@ -1,13 +1,8 @@
 import { createStart } from '@tanstack/react-start';
 import { authkitMiddleware } from '@workos/authkit-tanstack-react-start';
 
-/**
- * Configure TanStack Start with AuthKit middleware.
- * The middleware runs on every server request and provides auth context.
- */
 export const startInstance = createStart(() => {
   return {
-    // Run AuthKit middleware on every request
     requestMiddleware: [authkitMiddleware()],
   };
 });

example/tsconfig.json

@@ -7,6 +7,9 @@
     "target": "ES2022",
     "skipLibCheck": true,
     "strictNullChecks": true,
+    "declaration": false,
+    "declarationMap": false,
+    "types": ["vite/client"],
     "rootDir": "./src",
     "outDir": "./dist"
   },

example/vite.config.ts

@@ -1,13 +1,15 @@
 import { defineConfig } from 'vite';
 import tsConfigPaths from 'vite-tsconfig-paths';
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+import { cloudflare } from '@cloudflare/vite-plugin';
 import viteReact from '@vitejs/plugin-react';
 
 export default defineConfig({
   server: {
     port: 3000,
   },
   plugins: [
+    cloudflare({ viteEnvironment: { name: 'ssr' } }),
     tsConfigPaths({
       projects: ['./tsconfig.json'],
     }),

example/wrangler.jsonc

@@ -0,0 +1,10 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "authkit-tanstack-start-example",
+  "compatibility_date": "2026-05-18",
+  "compatibility_flags": ["nodejs_compat"],
+  "main": "@tanstack/react-start/server-entry",
+  "observability": {
+    "enabled": true
+  }
+}

package.json

@@ -35,7 +35,9 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "deploy:example": "node --experimental-strip-types scripts/deploy-example-cloudflare.ts",
+    "deploy:example:secrets": "wrangler secret bulk example/.env --config example/wrangler.jsonc"
   },
   "keywords": [
     "workos",
@@ -81,6 +83,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.2",
     "@vitest/coverage-v8": "4.0.15",