feat(tanstack-start): Path based routing and Router support

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
  - integration/**
+
+tanstack:
+ - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
  strategy:
  matrix:
- test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+ test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
  test-project: ['chrome']
  include:
  - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
  envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
  elements,
  expo,
  astro,
+ tanstack,
  secrets: {
  instanceKeys,
  },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,8 @@ export const createLongRunningApps = () => {
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
+ { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+ .setName('tanstack-router')
+ .useTemplate(templates['tanstack-router'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+ .setName('tanstack-start')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `VITE_${key}`)
+ // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+ // please do not remove this flag as it's going to break the setup
+ .addScript('setup', 'npm i --install-links')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+ router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,8 @@ export const templates = {
  'astro-node': resolve(__dirname, './astro-node'),
  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
  'expo-web': resolve(__dirname, './expo-web'),
+ 'tanstack-start': resolve(__dirname, './tanstack-start'),
+ 'tanstack-router': resolve(__dirname, './tanstack-router'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0"
+ />
+ <title>Vite App</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <style type="text/tailwindcss">
+ html {
+ color-scheme: light dark;
+ }
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+ body {
+ @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ type="module"
+ src="/src/main.tsx"
+ ></script>
+ </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "tanstack-router-react-example-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=$PORT",
+ "build": "vite build",
+ "serve": "vite preview --port=$PORT",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.47.1",
+ "@tanstack/router-devtools": "^1.47.1",
+ "@tanstack/router-plugin": "^1.47.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.47",
+ "@types/react-dom": "^18.2.18",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.5"
+ }
+}

integration/templates/tanstack-router/src/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+ id: string;
+ title: string;
+ body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`);
+ await new Promise(r => setTimeout(r, 500));
+ const post = await axios
+ .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then(r => r.data)
+ .catch(err => {
+ if (err.status === 404) {
+ throw notFound();
+ }
+ throw err;
+ });
+
+ return post;
+};
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...');
+ await new Promise(r => setTimeout(r, 500));
+ return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};