TanStack Start Integration

This integration guide is assuming you are using TanStack Start.

Before you start, make sure you have a Better Auth instance configured. If you haven't done that yet, check out the installation.

Mount the handler

We need to mount the handler to a TanStack API endpoint. Create a new file: /app/routes/api/auth/$.ts

routes/api/auth/$.ts
import { auth } from '@/lib/auth' // import your auth instance
import { createAPIFileRoute } from '@tanstack/react-start/api'
 
export const APIRoute = createAPIFileRoute('/api/auth/$')({
  GET: ({ request }) => {
    return auth.handler(request)
  },
  POST: ({ request }) => {
    return auth.handler(request)
  },
})

If you haven't defined an API Route yet, you can do so by creating a file: /app/api.ts

app/api.ts
import {
  createStartAPIHandler,
  defaultAPIFileRouteHandler,
} from '@tanstack/react-start/api'
 
export default createStartAPIHandler(defaultAPIFileRouteHandler)

Usage tips

  • We recommend using the client SDK or authClient to handle authentication, rather than server actions with auth.api.
  • When you call functions that need to set cookies (like signInEmail or signUpEmail), you'll need to handle cookie setting for TanStack Start. Better Auth provides a reactStartCookies plugin to automatically handle this for you.
auth.ts
import { betterAuth } from "better-auth";
import { reactStartCookies } from "better-auth/react-start";
 
export const auth = betterAuth({
    //...your config
    plugins: [reactStartCookies()] // make sure this is the last plugin in the array
})

Now, when you call functions that set cookies, they will be automatically set using TanStack Start's cookie handling system.

import { auth } from "@/lib/auth"
 
const signIn = async () => {
    await auth.api.signInEmail({
        body: {
            email: "[email protected]",
            password: "password",
        }
    })
}

On this page