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.
Overview
The Timeback SDK provides a TanStack Start adapter using file-based route handlers.
Installation
npm install @timeback/sdk
Server Setup
Create a Timeback instance:
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:
src/routes/api/timeback/$.ts
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:
import { TimebackProvider } from '@timeback/sdk/react'
export const Route = createRootRoute({
component: () => (
<TimebackProvider>
<Outlet />
</TimebackProvider>
),
})
Usage
Use hooks in components:
import { SignInButton, useTimeback } from '@timeback/sdk/react'
function HomePage() {
const timeback = useTimeback()
if (!timeback) {
return <SignInButton>Sign In</SignInButton>
}
return <div>Welcome!</div>
}
Next Steps
React Client
Client-side React integration
Identity
Authentication options
Custom Activities
Track learning sessions