@clerk/tanstack-start

Changelog · Report a Bug · Request a Feature · Get help

Getting Started

Clerk is the easiest way to add authentication and user management to your Tanstack Start application. Add sign up, sign in, and profile management to your application in minutes.

[!WARNING] > @clerk/tanstack-start is currently in beta. It's not recommended to use it in production just yet, but it would be much appreciated if you give it a try.

Prerequisites

• Tanstack Start ^1.49.1 or later
• Tanstack Router ^1.49.1 or later
• React 18 or later
• Node.js >=18.17.0 or later
• An existing Clerk application. Create your account for free.

Installation

npm install @clerk/tanstack-start

Usage

Make sure the following environment variables are set in a .env file:

CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

You can get these from the API Keys screen in your Clerk dashboard.

To initialize Clerk with your TanStack Start application, you will need to make one modification to app/routes/_root.tsx. Wrap the children of the RootComponent with <ClerkProvider/>

import { ClerkProvider } from '@clerk/tanstack-start'
import { createRootRoute } from '@tanstack/react-router'
import { Link, Outlet, ScrollRestoration } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'
import { Body, Head, Html, Meta, Scripts } from '@tanstack/start'
import * as React from 'react'
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
import { NotFound } from '~/components/NotFound'

export const Route = createRootRoute({
  meta: () => [
    {
      charSet: 'utf-8',
    },
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1',
    },
  ],
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    )
  },
  notFoundComponent: () => <NotFound />,
  component: RootComponent,
})

function RootComponent() {
  return (
    <ClerkProvider>
      <RootDocument>
          <Outlet />
      </RootDocument>
    </ClerkProvider>
  )
}

function RootDocument({ children }: { children: React.ReactNode }) { ... }

Setup clerkHandler in the SSR entrypoint

You will also need to make on more modification to you SSR entrypoint (default: app/ssr.tsx):

• Wrap the createStartHandler with createClerkHandler

import { createStartHandler, defaultStreamHandler } from '@tanstack/start/server';
import { getRouterManifest } from '@tanstack/start/router-manifest';
import { createRouter } from './router';
import { createClerkHandler } from '@clerk/tanstack-start/server';

const handler = createStartHandler({
  createRouter,
  getRouterManifest,
});

const clerkHandler = createClerkHandler(handler);

/*
 * // You can also override Clerk options by passing an object as second argument
 * const clerkHandler = createClerkHandler(handler, {
 *   afterSignInUrl: '/dashboard',
 * });
 */

export default clerkHandler(defaultStreamHandler);

After those changes are made, you can use Clerk components in your routes.

For example, in app/routes/index.tsx:

import { SignIn, SignedIn, SignedOut, UserButton } from '@clerk/tanstack-start';
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/')({
  component: Home,
});

function Home() {
  return (
    <div className='p-2'>
      <h1>Hello Clerk!</h1>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <SignIn />
      </SignedOut>
    </div>
  );
}

Support

You can get in touch with us in any of the following ways:

• Join our official community Discord server
• On our support page

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines and code of conduct.

Security

@clerk/tanstack-start follows good practices of security, but 100% security cannot be assured.

@clerk/tanstack-start is provided "as is" without any warranty. Use at your own risk.

For more information and to report security issues, please refer to our security documentation.

License

This project is licensed under the MIT license.

See LICENSE for more information.