feat(e2e): Add TanStack Start test suite

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}

.changeset/good-peaches-dress.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/ninety-walls-drop.md

@@ -0,0 +1,2 @@
+---
+---

.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']
  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.
@@ -26,6 +27,7 @@ export const createLongRunningApps = () => {
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
  { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
+ { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
  ] as const;
 
  const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,21 @@
+import { constants } from '../constants.js';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const start = applicationConfig()
+ .setName('tanstack-start-ssr')
+ .useTemplate(templates['tanstack-start'])
+ .setEnvFormatter('public', key => `${key}`)
+ .addScript('setup', 'npm i')
+ .addScript('dev', 'npm run dev')
+ .addScript('build', 'npm run build')
+ .addScript('serve', 'npm run start')
+ .addDependency('react', constants.E2E_REACT_VERSION)
+ .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
+ .addDependency('@clerk/tanstack-start', constants.E2E_CLERK_VERSION || clerkTanStackLocal);
+
+export const tanstack = {
+ start,
+} as const;

integration/templates/index.ts

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

integration/templates/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/blob-report/

integration/templates/tanstack-start/.prettierignore

@@ -0,0 +1,5 @@
+**/api
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

integration/templates/tanstack-start/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "semi": false,
+ "trailingComma": "all"
+}

integration/templates/tanstack-start/README.md

@@ -0,0 +1,76 @@
+<p align="center">
+ <a href="https://clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart" target="_blank" rel="noopener noreferrer">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png">
+ <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64">
+ </picture>
+ </a>
+ <br />
+</p>
+<div align="center">
+ <h1>
+ Clerk and TanStack Start Quickstart
+ </h1>
+ <a href="https://www.npmjs.com/package/@clerk/clerk-react">
+ <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-react" />
+ </a>
+ <a href="https://discord.com/invite/b5rXHjAg7A">
+ <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+ </a>
+ <a href="https://twitter.com/clerkdev">
+ <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+ </a>
+ <br />
+ <br />
+ <img alt="Clerk Hero Image" src="./public/hero.png">
+</div>
+
+## Introduction
+
+Clerk is a developer-first authentication and user management solution. It provides pre-built components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be integrated into any TanStack Start application.
+
+After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
+
+- Create a new TanStack Start application
+- Install `@clerk/tanstack-start`
+- Set up your environment keys
+- Wrap your Root Component with `<ClerkProvider />`
+- Configure `clerkHandler()` in the SSR entrypoint
+- Use Clerk components to protect your content
+- Embed the `<SignInButton />` and `<SignOutButton />`
+- Deploy your application
+
+## Running the template
+
+```bash
+git clone https://github.com/clerk/clerk-tanstack-start-quickstart
+```
+
+To run the example locally, you need to:
+
+1. Sign up for a Clerk account at [https://clerk.com](https://www.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart).
+
+2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
+
+3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.example).
+
+4. `npm install` the required dependencies.
+
+5. `npm run dev` to launch the development server.
+
+## Learn more
+
+To learn more about Clerk and TanStack Start, check out the following resources:
+
+- [Quickstart: Get started with TanStack Start and Clerk](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart)
+
+## Found an issue or want to leave feedback
+
+Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
+
+## Connect with us
+
+You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
+
+If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!

integration/templates/tanstack-start/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ vite: {
+ plugins: () => [
+ tsConfigPaths({
+ projects: ['./tsconfig.json'],
+ }),
+ ],
+ },
+})

integration/templates/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

integration/templates/tanstack-start/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+ ErrorComponent,
+ ErrorComponentProps,
+ Link,
+ rootRouteId,
+ useMatch,
+ useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ const isRoot = useMatch({
+ strict: false,
+ select: (state) => state.id === rootRouteId,
+ })
+
+ console.error(error)
+
+ return (
+ <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+ <ErrorComponent error={error} />
+ <div className="flex gap-2 items-center flex-wrap">
+ <button
+ onClick={() => {
+ router.invalidate()
+ }}
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Try Again
+ </button>
+ {isRoot ? (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ >
+ Home
+ </Link>
+ ) : (
+ <Link
+ to="/"
+ className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+ onClick={(e) => {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+ </Link>
+ )}
+ </div>
+ </div>
+ )
+}

integration/templates/tanstack-start/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+ <div className="space-y-2 p-2">
+ <div className="text-gray-600 dark:text-gray-400">
+ {children || <p>The page you are looking for does not exist.</p>}
+ </div>
+ <p className="flex items-center gap-2 flex-wrap">
+ <button
+ onClick={() => window.history.back()}
+ className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Go back
+ </button>
+ <Link
+ to="/"
+ className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+ >
+ Start Over
+ </Link>
+ </p>
+ </div>
+ )
+}