> ## Documentation Index
> Fetch the complete documentation index at: https://docs.timeback.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TanStack Start

> Integrate Timeback with TanStack Start

## Overview

The Timeback SDK provides a TanStack Start adapter using file-based route handlers.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @timeback/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @timeback/sdk
  ```

  ```bash yarn theme={null}
  yarn add @timeback/sdk
  ```

  ```bash bun theme={null}
  bun add @timeback/sdk
  ```
</CodeGroup>

## Server Setup

Create a server-only Timeback instance. The session helpers below belong to your application: persist the callback user in your authenticated session, and return that session user (including `email`) or `null` from `getUser`. These helpers are not SDK exports. Keep API and SSO secrets on the server:

```typescript src/lib/timeback.ts theme={null}
import { createTimeback } from '@timeback/sdk'

export const timeback = await createTimeback({
    env: 'staging',
    api: {
        clientId: process.env.TIMEBACK_API_CLIENT_ID!,
        clientSecret: process.env.TIMEBACK_API_CLIENT_SECRET!,
    },
    identity: {
        mode: 'sso',
        clientId: process.env.AWS_COGNITO_CLIENT_ID!,
        clientSecret: process.env.AWS_COGNITO_CLIENT_SECRET!,
        redirectUri: 'http://localhost:3000/api/timeback/identity/callback',
        onCallbackSuccess: async ({ user, state, redirect }) => {
            await setSession({ id: user.id, email: user.email })
            return redirect(state?.returnTo ?? '/')
        },
        onCallbackError: ({ error, redirect }) => {
            return redirect('/?error=sso_failed')
        },
        getUser: () => getSession(),
    },
})
```

## Route Handler

Create a catch-all route handler:

```typescript src/routes/api/timeback/$.ts theme={null}
import { createFileRoute } from '@tanstack/react-router'
import { toTanStackStartHandler } from '@timeback/sdk/tanstack-start'

import { timeback } from '@/lib/timeback'

const handlers = toTanStackStartHandler(timeback)

export const Route = createFileRoute('/api/timeback/$')({
    server: { handlers },
})
```

## Client Provider

Wrap your app with the TimebackProvider:

```tsx src/routes/__root.tsx theme={null}
import { TimebackProvider } from '@timeback/sdk/react'
import { createRootRoute, Outlet } from '@tanstack/react-router'

export const Route = createRootRoute({
    component: () => (
        <TimebackProvider>
            <Outlet />
        </TimebackProvider>
    ),
})
```

## Usage

<Tip>
  For the full client-side API, see the [React client
  adapter](/beta/build-on-timeback/sdk/client/react).
</Tip>

Use hooks in components:

```tsx src/routes/index.tsx theme={null}
import { SignInButton, useTimebackVerification } from '@timeback/sdk/react'

function HomePage() {
    const { state } = useTimebackVerification()

    if (state.status === 'loading') return <div>Loading...</div>
    if (state.status === 'error') return <div>{state.message}</div>
    if (state.status !== 'verified') {
        return <SignInButton>Sign In</SignInButton>
    }

    return <div>Welcome!</div>
}
```

## Next Steps

<CardGroup cols={2}>
  <Card title="React Client" href="/beta/build-on-timeback/sdk/client/react">
    Client-side React integration
  </Card>

  <Card title="Identity" href="/beta/build-on-timeback/sdk/identity">
    Authentication options
  </Card>

  <Card title="Custom Activities" href="/beta/build-on-timeback/sdk/activity-tracking/intro">
    Track learning sessions
  </Card>
</CardGroup>