TanStack Start SDK Beta

TanStack Start is an exciting new full-stack React framework that provides tons of great functionality like full-document SSR, streaming, server functions, bundling, and more. It's built by the same folks who have contributed some wonderful tools that we all know and love, like TanStack Router and TanStack Query.

We're so excited by it, we've even helped by sponsoring the project.

And today, we're proud to announce @clerk/tanstack-start@beta, a new official SDK that allows developers to add authentication and authorization into their TanStack Start application in matter of minutes.

The SDK comes fully equiped with Clerk's UI components, server utilities, and low level utilities for any of your custom flows.

Use Clerk UI components

Clerk's pre-built UI components give you a beautiful, fully-functional user and organization management experience in minutes.

Here's an example on how simple it is to build a sign-in page using Clerk's <SignIn /> component inside your TanStack Start applications.

import { SignIn } from '@clerk/tanstack-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/sign-in/$')({
  component: Page,
})

function Page() {
  return <SignIn />
}

Server functions

You can also pair our getAuth() utility function with TanStack Start's server functions to protect your routes.

import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'
import { getAuth } from '@clerk/tanstack-start/server'

const authStateFn = createServerFn('GET', async (_, { request }) => {
  const { userId } = await getAuth(request)

  if (!userId) {
    throw redirect({
      to: '/sign-in/$',
    })
  }

  return { userId }
})

export const Route = createFileRoute('/')({
  component: Home,
  beforeLoad: async () => await authStateFn(),
  loader: async ({ context }) => {
    return { userId: context.userId }
  },
})

function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()

  return <h1>Welcome your user id is {state.userId}!</h1>
}

This is just the beginning. You can learn more on how to get started building TanStack Start applications with Clerk, check out our TanStack Start Quickstart guide.

We're excited to see what you build 🏝️.